.alphabet-gallery { background: rgba(19, 83, 88, 0.92); }
.alphabet-gallery .container { width: min(1120px, calc(100% - 1.4rem)); }
.alphabet-gallery .section-intro, .alphabet-gallery .eyebrow { color: #d3e4d9; }
.alphabet-gallery .eyebrow { margin-bottom: .25rem; font-weight: 800; }
.alphabet-gallery .section-intro { margin: .55rem 0; }
.alphabet-language-switch { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin: .9rem 0 1rem; }
.alphabet-language-switch-label { width: 100%; text-align: center; font-weight: 800; color: #f2e4be; }
.alphabet-language-switch button { min-height: 44px; padding: .45rem .8rem; border: 2px solid rgba(245, 234, 213, 0.24); border-radius: 12px; background: #f5ead5; color: #17383f; font: inherit; font-weight: 800; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.alphabet-language-switch button:hover,
.alphabet-language-switch button:focus-visible,
.alphabet-language-switch button.is-active { background: #79c9bd; border-color: #cde9e4; color: #03272c; transform: translateY(-2px); }
.alphabet-language-switch button:focus-visible { outline: 3px solid #f2d474; outline-offset: 3px; }
.alphabet-gallery .alphabet-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.alphabet-card { min-width: 0; padding: .55rem; border: 2px solid rgba(245, 234, 213, 0.22); border-radius: 18px; background: #f5ead5; color: #17383f; display: grid; gap: .15rem; justify-items: center; font: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.alphabet-card:hover,
.alphabet-card:focus-visible,
.alphabet-card.is-selected { transform: translateY(-4px); border-color: #79c9bd; box-shadow: 0 10px 20px rgba(5, 39, 43, 0.3); }
.alphabet-card[data-locale="ar"] { text-align: center; }
.alphabet-card[data-locale="en"] { text-align: center; }
.alphabet-card .alphabet-letter { font-size: clamp(1.45rem, 2.8vw, 1.65rem); font-weight: 800; color: #0d4f52; line-height: 1; }
.alphabet-card .alphabet-word { font-size: clamp(.77rem, 1.7vw, .92rem); font-weight: 700; color: #113b40; }
.alphabet-card .atlas-art { width: 100%; aspect-ratio: 1; border-radius: 12px; background-repeat: no-repeat; background-image: var(--atlas-image, url('assets/arabic-alphabet-atlas.png')); background-size: var(--atlas-size, 700% 400%); background-position: calc((var(--atlas-col, 0) / var(--atlas-x, 6)) * 100%) calc((var(--atlas-row, 0) / var(--atlas-y, 3)) * 100%); }
.alphabet-gallery .section-status { min-height: 1.55em; }
.alphabet-gallery[data-locale="ar"] .section-intro,
.alphabet-gallery[data-locale="ar"] .section-status,
.alphabet-gallery[data-locale="ar"] .section-intro-head { direction: rtl; }
.alphabet-gallery[data-locale="en"] .section-intro,
.alphabet-gallery[data-locale="en"] .section-status,
.alphabet-gallery[data-locale="en"] .section-intro-head { direction: ltr; }

@media (max-width: 900px) {
  .alphabet-gallery .alphabet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
  .alphabet-language-switch { justify-content: center; }
}

@media (max-width: 540px) {
  .alphabet-gallery { padding-top: 3.4rem; }
  .alphabet-gallery .container { width: calc(100% - .95rem); }
  .alphabet-gallery .alphabet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .alphabet-card { padding: .42rem; }
  .alphabet-card .alphabet-letter { font-size: 1.35rem; }
  .alphabet-card .alphabet-word { font-size: .77rem; }
  .alphabet-language-switch button { flex: 1 1 calc(50% - .3rem); }
}