/* LANDING-LAYOUT-01 (seat A1; Anwar's order of 16 Oct 2026): THE HOME PAGE'S LAYOUT AND SPACING, nothing else. Linked by
   base.html on the home page only (nav == 'home'), last, so every other page is untouched and these rules win over the
   older sheets without editing them. No colour, face, size of type or word changes here: only where blocks sit and the
   space between them.

   ONE CONTAINER: every block sits in .rd-wrap and fills it, so all left and right edges meet the same two lines (the
   band alone still runs edge to edge, as before). ONE VERTICAL SCALE: --ll-gap between the page's rows, --ll-in between
   blocks inside a row; both from the site's own spacing steps (--s3, --s4), smaller on phones. */
.rd-home{--ll-gap:var(--s4,2.5rem);--ll-in:var(--s3,1.5rem)}
@media (max-width:639.98px){ .rd-home{--ll-gap:2rem;--ll-in:1.25rem} }

/* 1. THE HERO: two columns from 1024px (the 1.45 : 1 split the lede already had). Left, the eyebrow, heading, line, the
   three buttons and the search with its samples; right, the featured verse at its own height and, directly under it at
   its width, the Read in strip. "New here?" runs full width under both columns. The lede's children are placed by name,
   so the markup keeps the phone's order (hero, "New here?", card, Read in). If the hero is the taller column, the space
   falls under the strip, never inside the card. */
.rd-home .rd-lede{padding-bottom:0}
@media (min-width:64rem){
  .rd-home .rd-lede{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"hero rail" "hero langs" "new new";column-gap:var(--ll-gap);row-gap:0;align-items:start}
  .rd-home .rd-hero{grid-area:hero}
  .rd-home .rd-rail{grid-area:rail}
  .rd-home .rd-lede > .rd-langs{grid-area:langs}
  .rd-home .rd-lede > .cu-new{grid-area:new}
}
@media (max-width:63.99rem){ .rd-home .rd-rail{margin-top:var(--ll-gap)} }
/* every block in the left column ends on the column's right edge (they stopped at 34rem and 42ch before) */
.rd-home .rd-hero-sub{max-width:none;margin-bottom:0}
.rd-home .rd-hero-actions{margin-top:var(--ll-in)}
.rd-home .rd-ask-card{max-width:none;margin-top:var(--ll-in)}
.rd-home .rd-ask-eg{max-width:none}

/* 2. "NEW HERE?": full width under the hero from 1024px; below that, straight after the hero's last line and before the
   card. Four cards in one row from 1024px, two by two from 640px (header-nav.css), stacked below that (clarity-ui.css).
   Three cards (the player off) keep one row of three. */
.rd-home .cu-new{margin:var(--ll-gap) 0 0}
@media (min-width:64rem){
  .rd-home .cu-doors:has(> li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 3. "READ IN": under the card, at the card's width. */
.rd-home .rd-langs{margin:var(--ll-in) 0 0}

/* 4. The numbers band: its own rules, unchanged; only the space above it is the page's step. */
.rd-home .rd-band{margin-top:var(--ll-gap)}

/* 5. WHAT AALAMIN IS and WHAT DOES CONTEXT MEAN HERE?, side by side from 768px, together filling the container. */
.ll-pair{display:grid;gap:var(--ll-gap);margin:var(--ll-gap) 0 0}
@media (min-width:48rem){ .ll-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }
.ll-pair > .rd-trust,.ll-pair > .rd-context-box{margin:0;max-width:none;min-width:0}

/* 6. The rows after them on the same scale. */
.rd-home .rd-section{padding-block:var(--ll-gap) 0}
.rd-home .rd-panel{margin-block:var(--ll-gap) 0}

/* 7. THE DARK PANEL: its closing statement sits in the left column, between the argument and its button, at the column's
   width and the argument's spacing; nothing spans both columns. */
.rd-home .rd-panel .rd-panel-close{max-width:none;margin:0 0 1.75rem}

/* 8. THE SOURCES FOLD: half the space it had above (48px to 24) and below (the footer's 80px to 40; 144px to 72 on a
   phone or tablet, where main keeps a bottom padding). */
.rd-home .cu-home-sources{margin-top:1.5rem}
body:has(> main.rd-home) > .rd-footer{margin-top:2.5rem}
@media (max-width:63.99rem){ body.rd-shell > main.rd-home{padding-bottom:2rem} }

/* 9. POLISH-01 (seat A1; Anwar's order of 17 Oct 2026, item 1): BELOW 640px THE HERO'S THREE BUTTONS ARE NOT SHOWN - the header
   row above them carries the same three (Read the Qur'an, Listen, Explore questions) on every phone. 640px and up, unchanged.
   Three classes, so it outranks header-nav.css's phone grid (.rd-hero-actions:has(> .rd-btn:nth-child(3)), also three). */
@media (max-width:639.98px){ .rd-home .rd-hero .rd-hero-actions{display:none} }