/* =========================================================================
   Alrasly — Guides (/guides/ index + /guides/<slug>/). Navy hero band over a
   light prose body (~70ch) with an in-flow side rail. Same offwhite + faint-grid
   surface as the other sub-pages. Brand law (CLAUDE.md): palette only via tokens,
   radius 0, squares only, AAA text pairings, Arabic never letter-spaced.
   ========================================================================= */

.gd{ position:relative; background:var(--offwhite); color:var(--ink); }
.gd::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
	background-image:
		linear-gradient(rgba(41,37,97,.04) 1px,transparent 1px),
		linear-gradient(90deg,rgba(41,37,97,.04) 1px,transparent 1px);
	background-size:72px 72px;
}
.gd-hero,.gd-main{ position:relative; z-index:1; }

/* ---------- kicker + breadcrumb ---------- */
.gd-kick{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-4); }
.gd-tick4,.gd-author__mark{ display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; flex:0 0 auto; }
.gd-tick4 i,.gd-author__mark i{ width:9px; height:9px; display:block; }
.gd-kick__t{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.22em; text-transform:uppercase; color:var(--sky); }
[dir="rtl"] .gd-kick__t{ letter-spacing:normal; text-transform:none; }
.gd-crumbs{ display:flex; flex-wrap:wrap; gap:var(--space-2); font-size:var(--fs-small); color:rgba(255,255,255,.8); margin:0 0 var(--space-5); }
.gd-crumbs a{ color:var(--sky); text-decoration:none; }
.gd-crumbs a:hover,.gd-crumbs a:focus-visible{ color:var(--white); text-decoration:underline; }

/* ---------- HERO ---------- */
.gd-hero{
	color:var(--white); overflow:hidden;
	background-image:
		radial-gradient(120% 90% at 82% 18%,rgba(9,91,244,.5),transparent 55%),
		radial-gradient(110% 90% at 95% 95%,rgba(85,70,250,.45),transparent 50%),
		linear-gradient(135deg,#211d4e,#292561 50%,#191636);
	padding-block:clamp(72px,10vw,116px) var(--space-8);
}
.gd-hero__title{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:var(--fw-bold); letter-spacing:-.5px; color:var(--white); margin:0; max-width:26ch; }
[dir="rtl"] .gd-hero__title{ letter-spacing:normal; }
.gd-hero__meta{ font-size:var(--fs-small); color:rgba(255,255,255,.8); margin:var(--space-4) 0 0; }
.gd-hero__lead{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:rgba(255,255,255,.88); margin:var(--space-4) 0 0; max-width:64ch; }

/* ---------- LAYOUT ---------- */
.gd-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-7); padding-block:var(--space-8); }
.gd-prose{ max-width:72ch; min-width:0; }

/* ---------- DIRECT ANSWER ---------- */
.gd-answer{ background:var(--white); border:1px solid rgba(41,37,97,.12); border-inline-start:var(--space-2) solid var(--blue); padding:var(--space-5); margin:0 0 var(--space-7); }
.gd-answer__lbl{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin:0 0 var(--space-2); }
[dir="rtl"] .gd-answer__lbl{ letter-spacing:normal; text-transform:none; }
.gd-answer__t{ font-size:var(--fs-body-lg); line-height:var(--lh-body); color:var(--ink); margin:0; }

/* ---------- BODY ---------- */
.gd-h2{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-bold); color:var(--navy); margin:var(--space-7) 0 var(--space-4); letter-spacing:-.3px; }
[dir="rtl"] .gd-h2{ letter-spacing:normal; }
.gd-body .gd-h2:first-child{ margin-top:0; }
.gd-p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); margin:0 0 var(--space-4); }
.gd-list{ margin:0 0 var(--space-4); padding:0; list-style:none; display:grid; gap:var(--space-3); }
.gd-list li{ position:relative; padding-inline-start:var(--space-5); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink); }
.gd-list li::before{ content:""; position:absolute; inset-inline-start:0; top:.55em; width:10px; height:10px; background:var(--blue); }

/* ---------- KEY TAKEAWAYS ---------- */
.gd-take{ background:var(--navy); color:var(--white); padding:var(--space-6); margin:var(--space-7) 0 0; }
.gd-take__h{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-bold); color:var(--white); margin:0 0 var(--space-4); }
.gd-take__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.gd-take__list li{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--white); }
.gd-take__sq{ flex:0 0 12px; width:12px; height:12px; margin-top:.5em; background:var(--sky); }

/* ---------- FAQ (semantic <dl>, always visible) ---------- */
.gd-faq{ margin:var(--space-7) 0 0; }
.gd-faqlist{ margin:0; display:grid; gap:var(--space-3); }
.gd-faqitem{ background:var(--white); border:1px solid rgba(41,37,97,.12); padding:var(--space-4) var(--space-5); }
.gd-faqq{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-2); }
.gd-faqa{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0; }

/* ---------- AUTHOR / REVIEW BOX ---------- */
.gd-author{ display:flex; gap:var(--space-4); align-items:flex-start; background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:var(--space-1) solid var(--navy); padding:var(--space-5); margin:var(--space-7) 0 0; }
.gd-author__lbl{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin:0 0 var(--space-1); }
[dir="rtl"] .gd-author__lbl{ letter-spacing:normal; text-transform:none; }
.gd-author__name{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-2); }
.gd-author__creds{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0 0 var(--space-2); }
.gd-author__dates{ font-size:var(--fs-caption); color:var(--ink); margin:0; }

/* ---------- SIDE RAIL ---------- */
.gd-rail{ display:grid; gap:var(--space-4); align-content:start; }
.gd-railbox{ background:var(--white); border:1px solid rgba(41,37,97,.12); border-top:var(--space-1) solid var(--blue); padding:var(--space-5); }
.gd-rail__h{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin:0 0 var(--space-3); }
[dir="rtl"] .gd-rail__h{ letter-spacing:normal; text-transform:none; }
.gd-rail__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.gd-rail__list a{ font-size:var(--fs-small); line-height:var(--lh-small); font-weight:var(--fw-semibold); color:var(--blue); text-decoration:none; }
.gd-rail__list a:hover,.gd-rail__list a:focus-visible{ color:var(--blue-hover); text-decoration:underline; }
.gd-railbox--navy{ background:var(--navy); border-color:var(--navy); border-top-color:var(--sky); }
.gd-rail__cta-t{ font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--white); margin:0 0 var(--space-4); }
.gd-rail__btn{ display:inline-block; padding:var(--space-3) var(--space-5); background:var(--white); color:var(--navy); font-weight:var(--fw-bold); font-size:var(--fs-small); text-decoration:none; transition:background-color .18s ease; }
.gd-rail__btn:hover{ background:var(--sky); color:var(--navy); text-decoration:none; }
.gd-rail__btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* ---------- INDEX CARDS ---------- */
.gd-index{ padding-block:var(--space-8); }
.gd-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.gd-card{ position:relative; background:var(--white); border:1px solid rgba(41,37,97,.12); padding:var(--space-6) var(--space-5) var(--space-5); transition:transform .35s ease, border-color .25s ease; }
.gd-card__bar{ position:absolute; top:0; left:0; width:100%; height:var(--space-1); transition:height .25s ease; }
.gd-card--navy   .gd-card__bar{ background:var(--navy); }
.gd-card--blue   .gd-card__bar{ background:var(--blue); }
.gd-card--purple .gd-card__bar{ background:var(--purple-blue); }
.gd-card--sky    .gd-card__bar{ background:var(--sky); }
.gd-card:hover{ transform:translateY(-6px); border-color:var(--navy); }
.gd-card:hover .gd-card__bar{ height:var(--space-2); }
.gd-card__kick{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin:0 0 var(--space-2); }
[dir="rtl"] .gd-card__kick{ letter-spacing:normal; text-transform:none; }
.gd-card__h{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-bold); color:var(--navy); margin:0 0 var(--space-3); }
.gd-card__h a{ color:inherit; text-decoration:none; }
.gd-card__h a:hover,.gd-card__h a:focus-visible{ color:var(--blue); text-decoration:underline; }
.gd-card__p{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--ink); margin:0 0 var(--space-4); }
.gd-card__more{ margin:0; }
.gd-card__more a{ font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--blue); text-decoration:none; }
.gd-card__more a:hover,.gd-card__more a:focus-visible{ color:var(--blue-hover); text-decoration:underline; }

/* ---------- Motion — sitewide reveal (gated behind .js; no-JS shows everything) ---------- */
.js .gd [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; }
.js .gd [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	.js .gd [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
	.gd-card,.gd-card__bar{ transition:none !important; }
	.gd-card:hover{ transform:none; }
	.gd-card:hover .gd-card__bar{ height:var(--space-1); }
}

/* ---------- responsive ---------- */
@media (min-width:600px){
	.gd-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1040px){
	.gd-grid{ grid-template-columns:minmax(0,72ch) 280px; justify-content:space-between; }
}