/* Saudi National Day header.
   Every rule is scoped under .snd-band, so it cannot reach the rest of the page.

   Built to the supplied key-visual composition: the official photograph runs
   full bleed; the National Day lockup pins to the top outer corner; and the
   type block -- AUTHENTICITY tag, display headline, two lines of copy, day
   pass and start button -- hangs off the bottom of the opposite side, over the
   darkest part of the frame.

   Everything is expressed against the inline axis (inset-inline, flex-start,
   logical padding), so the whole arrangement mirrors with the document
   direction: in Arabic the lockup sits left and the type right, in English the
   reverse. Only the photograph's scrim needs a hand-written mirror, since a
   gradient has no logical direction.

   Readex Pro and Silkscreen arrive with design-system/tokens.css, so this file
   imports nothing. The copy is Arabic, so it uses the platform Arabic face
   rather than Tektur, which has no Arabic glyphs. */

.snd-band{
  --snd-green:#3BE87A;
  --snd-yellow:#F2E205;
  --snd-deep:#050B08;
  --snd-ink:#F4F1E8;
  position:relative; display:block; width:100%; overflow:hidden; text-decoration:none;
  color:var(--snd-ink); background:var(--snd-deep); cursor:pointer;
  font-family:"Readex Pro",system-ui,sans-serif;
  /* A compact header band: about two fifths of the fold, so the section below
     it comes into view straight away.

     Sized by height, deliberately NOT by aspect-ratio. An aspect-ratio here
     needs a max-height to stay sane on tall screens, and the two together make
     the band narrower than the page: once the height is clamped the ratio
     drives the width back down, leaving a gap at the side (under RTL, on the
     left). Height plus width:100% cannot do that -- the band is edge to edge at
     every viewport, and the photograph's crop absorbs the difference. */
  height:clamp(300px,40vh,440px);
  transition:box-shadow 160ms ease;
}
.snd-band:hover{ box-shadow:inset 0 0 0 1px rgba(59,232,122,.4); }
.snd-band:hover .snd-cta{ box-shadow:0 0 34px rgba(59,232,122,.55); }
.snd-band:active .snd-cta{ transform:scale(.98); }
.snd-band:focus-visible{ outline:2px solid var(--snd-green); outline-offset:-3px; }

/* The photograph, filling the band edge to edge.

   The source key visual is square (1500x1500) and this band is around 4:1, so
   only a shallow horizontal slice of it can show. object-position picks which
   slice, and 49% is the value that lands it on the group: the standing adults'
   heads enter at the top, the seated men and the children keep their faces at
   the bottom, and the hanging rugs and the عزّنا بطبعنا banner fill in behind.
   The floor and the upper wall fall outside it. The exact percentage that
   frames the group drifts between 46 and 51 across viewport widths, since the
   overflow it is measured against grows with the width; 49 is the middle of
   that range and holds the group at every size.

   cover, so the picture is never stretched -- it is scaled to fill and the
   overflow is cropped. */
.snd-photo-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 49%; pointer-events:none;
  filter:brightness(.72) saturate(1.08);
}
/* Arabic is the design's own direction: the type sits over the right, so the
   right goes deep and the photograph keeps the middle and left. English
   mirrors the whole arrangement, so the ramp mirrors with it. A second, gentle
   pass darkens the top and bottom edges into the frame. */
.snd-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,11,8,.96) 0%, rgba(5,11,8,.74) 24%, rgba(5,11,8,.3) 58%, rgba(5,11,8,.6) 100%),
    linear-gradient(0deg, rgba(5,11,8,.72) 0%, transparent 34%, transparent 78%, rgba(5,11,8,.5) 100%);
}
html[dir="rtl"] .snd-band .snd-scrim{
  background:
    linear-gradient(270deg, rgba(5,11,8,.96) 0%, rgba(5,11,8,.74) 24%, rgba(5,11,8,.3) 58%, rgba(5,11,8,.6) 100%),
    linear-gradient(0deg, rgba(5,11,8,.72) 0%, transparent 34%, transparent 78%, rgba(5,11,8,.5) 100%);
}
/* The fine horizontal weave the design lays over the whole frame. */
.snd-scan{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
}

/* The lockup is pinned to the corner rather than placed in the flow, so it
   holds that corner regardless of how tall the type block below grows. */
.snd-lockup{
  position:absolute; top:clamp(12px,1.5vw,22px); inset-inline-end:clamp(16px,2.6vw,40px);
  height:clamp(30px,3.1vw,48px); width:auto; display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));
}

/* Everything else hangs off the bottom of the frame on the inline-start side. */
.snd-inner{
  position:relative; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  text-align:start; gap:clamp(7px,.75vw,11px);
  padding:clamp(14px,1.6vw,24px) clamp(16px,2.6vw,40px) clamp(24px,2.6vw,38px);
}

.snd-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--snd-yellow); color:#0B0B14;
  padding:4px clamp(9px,.9vw,13px); border-radius:2px;
}
.snd-tag-ar{ font-weight:700; font-size:clamp(10.5px,.85vw,13px); line-height:1.25; }
.snd-tag-en{
  font-family:Silkscreen,"Readex Pro",monospace; direction:ltr;
  font-size:clamp(6px,.55vw,8.5px); letter-spacing:.22em;
}

.snd-h1{
  margin:0; color:#fff; font-weight:800;
  font-size:clamp(24px,2.9vw,44px); line-height:1.12; letter-spacing:-.01em;
  text-shadow:0 5px 34px rgba(0,0,0,.68);
}
.snd-sub{
  /* Two lines in both languages at the design's width -- the English string is
     the longer of the two, so the cap is sized to it. */
  margin:0; max-width:min(58ch,38%);
  font-size:clamp(11.5px,1.05vw,16px); line-height:1.55;
  color:rgba(244,241,232,.9); text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.snd-actions{
  display:flex; align-items:stretch; gap:clamp(8px,1vw,14px);
  margin-top:clamp(2px,.4vw,6px); flex-wrap:wrap;
}
/* The day pass reads as a ticket beside the button, not as a button itself. */
.snd-pass{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:clamp(7px,.7vw,11px) clamp(10px,1vw,16px);
  border:1px solid rgba(244,241,232,.32); border-radius:8px;
  background:rgba(5,11,8,.42); backdrop-filter:blur(2px);
  font-size:clamp(10.5px,.9vw,14px); color:rgba(244,241,232,.84);
}
.snd-pass-amount{ font-weight:800; font-size:clamp(12px,1.1vw,17px); color:#fff; direction:ltr; }
.snd-pass-label{ direction:ltr; }
.snd-cta{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:clamp(7px,.7vw,11px) clamp(16px,1.8vw,28px);
  border-radius:8px; background:var(--snd-green); color:#04140A;
  font-weight:800; font-size:clamp(12.5px,1.1vw,17px);
  box-shadow:0 0 24px rgba(59,232,122,.3);
  transition:box-shadow 160ms ease, transform 160ms cubic-bezier(.34,1.56,.64,1);
}

/* The dashed tape along the very bottom edge. */
.snd-tape{
  position:absolute; inset-inline:0; bottom:0; height:clamp(7px,.65vw,10px);
  background:repeating-linear-gradient(90deg, var(--snd-green) 0 18px, transparent 18px 30px);
}

/* Tablet: a narrower band needs a little more height for the same type, and
   the copy can take more of the width now that the photograph has less of it. */
@media (max-width:1100px){
  .snd-band{ height:clamp(280px,42vh,380px); }
  .snd-sub{ max-width:min(58ch,52%); }
}

/* Phone: a fixed vh height would either crush the type or leave the band
   taller than the content needs, so it grows with its content instead and the
   copy takes the full width rather than a third of it. */
@media (max-width:820px){
  .snd-band{ height:auto; min-height:0; }
  .snd-photo-bg{ object-position:50% 42%; }
  /* Still pinned, so it keeps the corner; .snd-inner's top padding is what
     clears it rather than a margin on the mark itself. */
  .snd-lockup{ top:16px; inset-inline-end:16px; height:42px; }
  .snd-inner{ padding:70px 16px 28px; gap:11px; }
  .snd-sub{ max-width:none; }
  .snd-actions{ width:100%; }
  .snd-cta{ flex:1; padding-block:11px; }
}