/* ═══════════════════════════════════════════════════════════════════════
   styles/mushaf-hub.css — Mithlayn · Mushaf 3-hub selector (v211)
   ─────────────────────────────────────────────────────────────────────
   Three-card selector that appears when "Mushaf" is clicked in the
   top nav: Regular (→ mushaf_v1_001 renderer), Mutashābihāt, Memorize.
   Variant V (Linen Cards) markup, palette tied to --ms-* tokens so it
   follows whichever theme is active.
   ═══════════════════════════════════════════════════════════════════════ */

.mh-hub {
  background: var(--ms-bg, #0E1418);
  color: var(--ms-ink, #E8DDD0);
  padding: 96px 32px;
  min-height: calc(100vh - 60px);
}

.mh-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 72px;
}
.mh-head .mh-stamp {
  font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .40em; text-transform: uppercase;
  color: var(--ms-ink-3, #7A8D99);
  margin-bottom: 28px;
}
.mh-head .mh-stamp::before,
.mh-head .mh-stamp::after {
  content: "———"; margin: 0 14px; opacity: .4;
}
.mh-head h2 {
  font: 300 italic 60px/1.04 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.02em;
  color: var(--ms-ink, #E8DDD0);
}
.mh-head h2 em {
  color: var(--ms-mint, #5FB594);
  font-style: italic;
  font-weight: 400;
}
.mh-head .mh-dek {
  font: 400 italic 14px/1.6 'Cormorant Garamond', Georgia, serif;
  color: var(--ms-ink-3, #7A8D99);
  margin-top: 16px;
  max-width: 48ch;
  margin-left: auto; margin-right: auto;
}

.mh-cards {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ms-hair-2, rgba(232,221,208,.10));
}
.mh-card {
  padding: 48px 32px 56px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--ms-hair-2, rgba(232,221,208,.10));
  border-bottom: 1px solid var(--ms-hair-2, rgba(232,221,208,.10));
  position: relative;
  transition: padding-top .35s ease, background .25s ease;
  display: block;
}
.mh-card:last-child { border-right: 0; }
.mh-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ms-mint, #5FB594);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease;
}
.mh-card:hover {
  padding-top: 40px;
  background: color-mix(in srgb, var(--ms-mint, #5FB594) 5%, transparent);
}
.mh-card:hover::after,
.mh-card:focus-visible::after { transform: scaleX(.6); }
.mh-card:hover .mh-read,
.mh-card:focus-visible .mh-read { transform: translateY(0); opacity: 1; }

.mh-card .mh-roman {
  font: 500 italic 12px/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .10em;
  color: var(--ms-mint, #5FB594);
  margin-bottom: 24px;
  text-transform: uppercase;
  font-variant: small-caps;
}
.mh-card .mh-ar {
  font: 400 38px/1 'Amiri Quran', serif;
  color: var(--ms-ink, #E8DDD0);
  direction: rtl;
  margin-bottom: 18px;
  opacity: .9;
}
.mh-card h3 {
  font: 300 italic 38px/1.04 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.018em;
  color: var(--ms-ink, #E8DDD0);
  margin-bottom: 10px;
}
.mh-card h3 em {
  font-style: italic;
  color: var(--ms-mint, #5FB594);
  font-weight: 400;
}
.mh-card p {
  font: 400 italic 13.5px/1.55 'Cormorant Garamond', Georgia, serif;
  color: var(--ms-ink-3, #7A8D99);
  max-width: 30ch;
  margin: 0 auto;
}
.mh-card .mh-read {
  display: inline-block;
  margin-top: 24px;
  font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ms-mint, #5FB594);
  transform: translateY(6px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.mh-card .mh-read::after { content: " →"; letter-spacing: 0; }

/* Disabled / "soon" state for Mutashābihāt + Memorize. */
.mh-card.soon { cursor: not-allowed; }
.mh-card.soon::before {
  content: "soon";
  position: absolute;
  top: 18px; right: 18px;
  font: 600 8.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ms-gold, #D4AF37);
  padding: 4px 8px;
  border: 1px solid var(--ms-gold-rim, rgba(212,175,55,.28));
  border-radius: 99px;
  background: var(--ms-gold-soft, rgba(212,175,55,.10));
}
.mh-card.soon .mh-ar,
.mh-card.soon h3,
.mh-card.soon p { opacity: .55; }

@media (max-width: 900px) {
  .mh-hub { padding: 64px 20px; }
  .mh-head h2 { font-size: 44px; }
  .mh-cards { grid-template-columns: 1fr; }
  .mh-card { border-right: 0; }
}