/* Awwab — Knowledge Hub (/learn) and its guides (/learn/*), in the game's
   night-journey look (night.css). Restyles the shared hub and article classes
   from styles.css only inside .learn-main / .learn-guide. */

.learn-main, .learn-guide { color-scheme: dark; }
.learn-main section { padding: 0; }
.learn-main .lh-sec { padding: 56px 0 0; }
.learn-main .cta-band { padding: 56px 0 90px; }
.lh-narrow { max-width: 760px; }

/* ---- hero: copy on the left, the lit arch on the right ---- */
.lh-hero { position: relative; overflow: hidden; padding: 0 0 8px !important; }
.lh-hero-in { position: relative; display: grid; grid-template-columns: 1fr; padding-top: 54px; padding-bottom: 30px; }
.lh-copy { position: relative; z-index: 1; }
.learn-main .eyebrow { color: var(--g-gold); margin-bottom: 18px; }
.learn-main .eyebrow::before { background: var(--g-gold); }
.lh-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 8vw, 72px); line-height: 1.04; letter-spacing: -0.5px; margin: 0; max-width: 15ch; }
.lh-hero .lede { font-size: clamp(17px, 2.3vw, 20px); line-height: 1.6; color: #d7d2c4; max-width: 600px; margin: 20px 0 30px; }
.lh-link { color: var(--g-gold); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(226,196,119,0.4); padding: 8px 4px; }
.lh-link:hover { text-decoration-color: currentColor; }
.lh-arch { position: absolute; inset-inline-end: 4px; top: 22px; width: 110px; height: 138px; opacity: .55; }

/* numbers: six khatam-capped tiles */
.lh-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lh-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 8px 14px; border-radius: 18px;
  background: linear-gradient(170deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border: 1px solid var(--g-line); }
.lh-stat::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--g-gold); clip-path: var(--khatam); box-shadow: 0 0 12px var(--g-gold); }
.lh-stat b { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 6vw, 40px); line-height: 1; color: var(--g-gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(226,196,119,0.3); }
.lh-stat > span { font-size: 13px; color: var(--mist); line-height: 1.3; }

/* section titles */
.learn-main .section-label, .learn-guide .section-label { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 4.4vw, 30px); text-transform: none; letter-spacing: 0; color: var(--parch); margin: 0 0 16px; }
.lh-sub { color: var(--mist); font-size: 15px; margin: -8px 0 20px; max-width: 62ch; }

/* featured guides */
.learn-main .guide-card { min-height: 210px; border-radius: 24px; color: var(--parch);
  background: radial-gradient(360px 220px at 88% 0%, color-mix(in srgb, var(--ac) 26%, transparent), transparent 62%), linear-gradient(160deg, #173f2b, #0d2a1d 62%, #0a2117);
  border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent); box-shadow: 0 30px 60px -36px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,241,196,0.1); }
.learn-main .guide-card:hover { border-color: var(--ac); }
.learn-main .guide-card .gc-orn { color: var(--ac); opacity: .22; }
.learn-main .guide-card .read { color: var(--ac); }
.learn-main .post-tag, .learn-guide .post-tag { color: var(--ac, var(--g-gold)); background: color-mix(in srgb, var(--ac, var(--g-gold)) 14%, transparent); border-color: color-mix(in srgb, var(--ac, var(--g-gold)) 42%, transparent); }

/* theme tiles: each in its journey-map colour */
.learn-main .theme-grid { gap: 14px; }
.learn-main .theme-card { position: relative; overflow: hidden; padding: 20px 20px 16px; border-radius: 22px; color: var(--parch);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 12%, transparent), rgba(255,255,255,0.025) 70%);
  border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent); }
.learn-main .theme-card::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 100px; height: 100px; opacity: .12; background: var(--ac); clip-path: var(--khatam); pointer-events: none; }
.learn-main .theme-card:hover { border-color: var(--ac); box-shadow: 0 24px 50px -36px color-mix(in srgb, var(--ac) 70%, transparent); }
.learn-main .tc-ic { width: 52px; height: 52px; margin-bottom: 12px; border-radius: 0; color: var(--ac); background: color-mix(in srgb, var(--ac) 18%, transparent); }
.learn-main .tc-ic svg { width: 24px; height: 24px; stroke-width: 1.7; }
.learn-main .theme-card h3 { color: var(--parch); }
.learn-main .theme-card .tc-desc { color: #c9d3c9; }
.learn-main .tc-chip { color: #dfe5db; background: rgba(255,255,255,0.05); border-color: rgba(243,239,230,0.12); }
.learn-main .tc-foot { flex-wrap: wrap; gap: 8px 12px; padding-top: 12px; border-top-color: color-mix(in srgb, var(--ac) 22%, transparent); }
.learn-main .tc-count { color: var(--mist-2); font-variant-numeric: tabular-nums; }
.tc-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-inline-start: auto; }
.learn-main .tc-play, .tc-cards { color: var(--ac); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.tc-cards::before { content: ""; width: 11px; height: 14px; border-radius: 3px; border: 1.5px solid currentColor; box-shadow: 3px -3px 0 -1.5px var(--em-900), 3px -3px 0 0 currentColor; margin-inline-end: 5px; }
.tc-cards:hover, .learn-main .tc-play:hover { text-decoration: underline; text-underline-offset: 3px; }

/* bands */
.learn-main .band, .learn-guide .band { color: var(--parch); text-align: center; border-radius: 28px; padding: 48px 26px;
  background: radial-gradient(520px 260px at 50% -10%, rgba(226,196,119,0.18), transparent 70%), linear-gradient(160deg, #143424, #0b2318);
  border: 1px solid rgba(226,196,119,0.34); box-shadow: inset 0 1px 0 rgba(255,241,196,0.1); }
.learn-main .band::after { background: none; }
.learn-main .band::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 14px; background: var(--g-gold); clip-path: var(--khatam); box-shadow: 0 0 20px var(--g-gold); }
.learn-main .kicker { color: var(--g-gold); }
.learn-main .band p { color: #cfd6cc; max-width: 640px; margin: 0 auto; font-size: 17px; }
.learn-main .band a:not(.btn) { color: var(--g-gold); }
.learn-main .cta-band .cta-row { margin-top: 22px; }

/* FAQ */
.learn-main .faq details, .learn-guide .faq details { background: rgba(255,255,255,0.04); border-color: rgba(243,239,230,0.1); border-radius: 16px; }
.learn-main .faq details[open], .learn-guide .faq details[open] { border-color: rgba(226,196,119,0.35); }
.learn-main .faq summary, .learn-guide .faq summary { color: var(--parch); }
.learn-main .faq summary::after, .learn-guide .faq summary::after { color: var(--g-gold); }
.learn-main .faq details p, .learn-guide .faq details p { color: #c9d3c9; }

@media (min-width: 760px) {
  .lh-hero-in { grid-template-columns: 1fr 260px; align-items: center; gap: 30px; padding-top: 72px; padding-bottom: 40px; }
  .lh-arch { position: relative; inset: auto; width: 260px; height: 325px; opacity: 1; }
  .lh-stats { grid-template-columns: repeat(6, 1fr); }
  .learn-main .band, .learn-guide .band { padding: 56px 44px; }
}

/* ===================== guides (/learn/*) ===================== */
.learn-guide .post-hero { background: radial-gradient(820px 380px at 82% -25%, rgba(226,196,119,0.2), transparent 62%); color: var(--parch); }
.learn-guide .post-hero .back { color: var(--g-gold); }
.learn-guide .post-hero .back:hover { color: var(--parch); }
.learn-guide .post-hero h1 { color: #fbf7ee; }
.learn-guide .post-hero .post-meta { color: var(--mist); }
.learn-guide .post-hero .ornament { color: var(--g-gold); opacity: .2; }
.learn-guide .post-article { padding-top: 34px; }
.learn-guide .post-article .wrap { max-width: 740px; }
.learn-guide .post-body { position: relative; }
.learn-guide .post-lede { color: var(--parch); }
.learn-guide .post-body .post-lede::first-letter { color: var(--g-gold); }
.learn-guide .post-body p, .learn-guide .post-body li { color: #d3dacf; }
.learn-guide .post-body h2 { color: var(--parch); }
.learn-guide .post-body h2::before { background: var(--g-gold); width: 18px; height: 18px; border-radius: 0; clip-path: var(--khatam); }
.learn-guide .post-body h3 { color: #ede4cd; font-family: var(--serif); }
.learn-guide .post-body strong { color: #f3ead2; }
.learn-guide .post-body p a, .learn-guide .post-body li a { color: var(--g-gold); border-bottom-color: rgba(226,196,119,0.35); }
.learn-guide .post-body p a:hover, .learn-guide .post-body li a:hover { border-bottom-color: var(--g-gold); }
.learn-guide .post-body [lang="ar"] { color: #f2e6c4; }
.learn-guide .infographic { background: linear-gradient(170deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: var(--g-line); border-radius: 22px; }
.learn-guide .infographic .ig-title { color: var(--g-gold); text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.learn-guide .info-tile { position: relative; background: rgba(6,23,15,0.45); border-color: rgba(226,196,119,0.18); border-radius: 16px; padding-top: 20px; }
.learn-guide .info-tile::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--g-gold); clip-path: var(--khatam); }
.learn-guide .info-tile b { color: var(--g-gold); }
.learn-guide .info-tile span { color: var(--mist); }
.learn-guide .post-article .callout { background: linear-gradient(135deg, rgba(226,196,119,0.12), rgba(226,196,119,0.03)); border: 1px solid rgba(226,196,119,0.3); border-inline-start: 3px solid var(--g-gold); }
.learn-guide .post-article .callout p { color: #e6e1d2; }
.learn-guide .fact-list li { color: #d3dacf; }
.learn-guide .fact-list li svg { stroke: var(--g-gold); }
.learn-guide .ornament-rule { color: var(--g-gold); }
.learn-guide .ornament-rule::before, .learn-guide .ornament-rule::after { background: linear-gradient(90deg, transparent, rgba(226,196,119,0.4), transparent); }
.learn-guide .post-cta { border-top-color: var(--g-line); }
.learn-guide .post-body a.btn-ghost { color: var(--parch); border-color: rgba(243,239,230,0.28); }
.learn-guide .post-body a.btn-ghost:hover { border-color: var(--g-gold); }
.learn-guide .related h3 { color: var(--g-gold); text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.learn-guide .related-grid a { background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border-color: var(--g-line); }
.learn-guide .related-grid a:hover { border-color: rgba(226,196,119,0.6); }
.learn-guide .related-grid b { color: var(--parch); }

@media (prefers-reduced-motion: reduce) {
  .learn-guide .post-hero .ornament, .learn-guide .post-hero .ornament-2, .learn-main .gc-orn { animation: none; }
}