/* Symbolism letter-card unification v13
   Layout only: Phoenician + English cards aligned to the Arabic/Hebrew visual system.
   All colors use site variables so dark/light modes stay native. */

:is(#pagePhoenician,#pageEnglishLetters){font-family:var(--font-main)}

/* Same desktop footprint used by the Hebrew/Paleo card grid. */
#pagePhoenician .grid,
#pageEnglishLetters .el-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  max-width:900px!important;
  margin:0 auto!important;
}
#pagePhoenician .grid{padding:2rem 1.5rem 1.5rem!important}
#pageEnglishLetters .el-grid{padding:0 0 1.5rem!important}

/* Shared card shell: same scale, radius and interaction language. */
#pagePhoenician .ph-card,
#pageEnglishLetters .el-card{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:165px!important;
  padding:1rem .8rem!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--bg-card)!important;
  color:var(--text-pri)!important;
  cursor:pointer!important;
  text-align:center!important;
  position:relative!important;
  overflow:hidden!important;
  transition:border-color .18s ease,transform .16s ease,box-shadow .18s ease,background-color .18s ease!important;
}
#pagePhoenician .ph-card:hover,
#pageEnglishLetters .el-card:hover,
#pagePhoenician .ph-card:focus-visible,
#pageEnglishLetters .el-card:focus-visible{
  border-color:var(--gold)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
  outline:none!important;
  background:color-mix(in srgb,var(--bg-card) 94%,var(--gold) 6%)!important;
}
html[data-theme="light"] #pagePhoenician .ph-card:hover,
html[data-theme="light"] #pageEnglishLetters .el-card:hover,
html[data-theme="light"] #pagePhoenician .ph-card:focus-visible,
html[data-theme="light"] #pageEnglishLetters .el-card:focus-visible{
  box-shadow:0 7px 18px rgba(0,0,0,.12)!important;
}

/* Header strip inside each card. */
#pagePhoenician .ph-card-top,
#pageEnglishLetters .el-card-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.45rem;
  direction:ltr;
  color:var(--gold-dim);
  font-size:.68rem;
  line-height:1.25;
  margin-bottom:.4rem;
  white-space:nowrap;
}

/* Phoenician card internals. */
#pagePhoenician .ph-glyph{
  font-family:'NotoPhoenician',serif!important;
  font-size:3.2rem!important;
  line-height:1.05!important;
  color:var(--gold)!important;
  margin:.05rem 0 .3rem!important;
}
#pagePhoenician .ph-name-ar{
  font-family:var(--font-main)!important;
  font-size:1.05rem!important;
  font-weight:700!important;
  line-height:1.4!important;
  color:var(--text-pri)!important;
  direction:rtl!important;
}
#pagePhoenician .ph-picture{
  font-family:var(--font-main)!important;
  font-size:.74rem!important;
  line-height:1.5!important;
  color:var(--gold-dim)!important;
  margin-top:.35rem!important;
  direction:rtl!important;
}

/* English card internals — same hierarchy, no data removed. */
#pageEnglishLetters .el-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
#pageEnglishLetters .el-char{
  margin:auto 0!important;
  font-family:var(--font-main)!important;
  font-size:3.2rem!important;
  font-weight:700!important;
  line-height:1!important;
  color:var(--gold)!important;
  direction:ltr!important;
}

/* Tablet/normal phone: exactly the Hebrew/Paleo 3-card rhythm. */
@media (max-width:820px) and (min-width:341px){
  #pagePhoenician .grid,
  #pageEnglishLetters .el-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:.5rem!important;
    padding:.8rem 0!important;
    max-width:100%!important;
  }
  #pagePhoenician .ph-card,
  #pageEnglishLetters .el-card{
    min-height:142px!important;
    padding:.72rem .42rem .68rem!important;
  }
  #pagePhoenician .ph-glyph,
  #pageEnglishLetters .el-char{font-size:2.45rem!important}
  #pagePhoenician .ph-name-ar{font-size:.84rem!important}
  #pagePhoenician .ph-picture{font-size:.68rem!important;line-height:1.35!important}
  #pagePhoenician .ph-card-top,
  #pageEnglishLetters .el-card-top{font-size:.6rem!important;gap:.2rem!important}
}

/* Very narrow phones: two cards, preventing clipped labels or glyphs. */
@media (max-width:340px){
  #pagePhoenician .grid,
  #pageEnglishLetters .el-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
    padding:.7rem 0!important;
    max-width:100%!important;
  }
  #pagePhoenician .ph-card,
  #pageEnglishLetters .el-card{min-height:136px!important;padding:.7rem .4rem!important}
  #pagePhoenician .ph-glyph,
  #pageEnglishLetters .el-char{font-size:2.4rem!important}
}

/* Search and detail panels must remain usable on mobile and in both themes. */
@media (max-width:600px){
  #pageEnglishLetters .el-tools{width:100%;gap:.5rem;align-items:stretch}
  #pageEnglishLetters .el-tools input{width:100%;min-width:0}
  #pageEnglishLetters .el-tools button{min-width:64px}
  #pagePhoenician #phoenicianPanel,
  #pageEnglishLetters .el-panel{width:100%;max-width:100%;margin-inline:auto}
  #pagePhoenician #phoenicianPanelInner{padding:1rem!important}
}