/* ============================================================================
   SRH ALOQOD — صرح العقود للعقارات
   layout.css · layout and responsive layer
   ----------------------------------------------------------------------------
   Load AFTER spacing.tokens.css.

   This layer holds NO measurements of its own. Container width, page margin,
   gutter and column count were all inherited in spacing.tokens.css, and are
   referenced here rather than restated:

       --layout-container-max        1200px
       --grid-columns                12
       --layout-gutter               24px   --layout-gutter-mobile       16px
       --layout-page-margin          80px   --layout-page-margin-mobile  24px

   ONE number is written here: the breakpoint. CSS cannot read a custom
   property inside a media query, so 768px cannot be tokenised — it appears
   exactly once, below, and nowhere else. It is a single decided breakpoint,
   not a scale: there is deliberately no 1024px or 1440px.

   Mobile-first. The base rules are the mobile case, and the single query
   raises them to desktop, so a narrow viewport never has to undo anything.

   Everything is logical, never sided: padding-inline, margin-inline. The
   system reads right-to-left and the grid follows the document direction on
   its own.
   ========================================================================= */

:root {
  /* active values — these switch at the breakpoint and are the only thing
     components should read. They alias the inherited tokens; no value is
     duplicated. */
  --layout-margin-active: var(--layout-page-margin-mobile);
  --layout-gutter-active: var(--layout-gutter-mobile);
}

/* ============================================================================
   CONTAINER
   Caps the measure and holds the page margin. margin-inline: auto centres it
   without caring which way the text runs.
   ========================================================================= */

.srh-container {
  max-width: var(--layout-container-max);
  margin-inline: auto;
  padding-inline: var(--layout-margin-active);
}

/* a container that should run to the viewport edge but keep its margins */
.srh-container--full {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--layout-margin-active);
}


/* ============================================================================
   GRID
   Mobile is a single column: at 24px margins a twelve-column grid leaves
   columns narrower than a word of Arabic, so it collapses rather than shrinks.
   Desktop restores the inherited twelve.

   Elements inside the grid declare their width with --span (1–12). On
   mobile --span is ignored, so nothing has to be unset per breakpoint:

       <div class="srh-grid">
         <article style="--span:8">…</article>
         <aside   style="--span:4">…</aside>
       </div>
   ========================================================================= */

.srh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-gutter-active);
}

/* two-up and three-up collections collapse the same way */
.srh-grid--2,
.srh-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-gutter-active);
}

/* ============================================================================
   THE ONE BREAKPOINT
   ----------------------------------------------------------------------------
   Every large-screen rule in the system lives in this single query. Nothing
   below 768px needs undoing, because the base rules above are already the
   mobile case.

   Values are unchanged: they are the same inherited tokens, only gathered.
   ========================================================================= */

@media (min-width: 768px) {

  /* active values switch to their desktop counterparts */
  :root {
    --layout-margin-active: var(--layout-page-margin);
    --layout-gutter-active: var(--layout-gutter);
  }

  /* the twelve-column grid */
  .srh-grid {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  }

  /* elements sitting directly inside the grid take their width from --span */
  .srh-grid > * {
    grid-column: span var(--span, var(--grid-columns));
  }

  /* fixed collections */
  .srh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================================================================
   STACK
   Vertical rhythm between blocks. The spacing roles already exist; this only
   applies them along the block axis.
   ========================================================================= */

.srh-stack        { display: flex; flex-direction: column; gap: var(--stack-md); }
.srh-stack--sm    { gap: var(--stack-sm); }
.srh-stack--lg    { gap: var(--stack-lg); }
.srh-section      { padding-block: var(--section-md); }
.srh-section--sm  { padding-block: var(--section-sm); }
.srh-section--lg  { padding-block: var(--section-lg); }


/* ============================================================================
   GUARD RAILS
   ----------------------------------------------------------------------------
   · 768px is the only breakpoint, and every desktop rule lives in it. Do not add 1024px, 1440px or any other, and
     do not turn it into a scale.
   · No measurement is declared here. Container, margin, gutter and column
     count all live in spacing.tokens.css — reference them, never restate them.
   · Components read --layout-margin-active and --layout-gutter-active, which
     already carry the correct value for the current viewport.
   · Logical properties only: padding-inline, margin-inline, padding-block.
     Never padding-left, margin-right, left or right.
   · Mobile-first: base rules are the mobile case; the query only raises them.
   · Multi-column grids collapse to one column below the breakpoint. Do not
     add intermediate column counts — there is no tablet breakpoint.
   · No colour, typography, radius, shadow or motion here.
   · This file has no effect on the frozen SRH ALOQOD master logotype.
   ========================================================================= */