/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/home.css — index.html ONLY.
   --------------------------------------------------------------------------
   Everything reusable lives in components.css. This file holds only what is
   genuinely unique to the home page: the full-bleed hero slider, the category
   sub-structure strip, and the editorial capability split.
   ========================================================================== */


/* ==========================================================================
   HERO — full-bleed PHOTOGRAPHIC PLATE + spec strip
   --------------------------------------------------------------------------
   text_pos in the DB is 'L' | 'R'. We read it LOGICALLY: 'L' = inline-start,
   'R' = inline-end. So in Arabic the composition mirrors, which is correct —
   the copy block always sits on the side the reader starts from (or the far
   side), never on a hard-coded left/right.

   THEME MODE — read this before changing a colour here.
   The hero is a PHOTOGRAPH under an ink wash. A photograph is dark in BOTH
   modes: on paper it is a plate PRINTED on the sheet, on graphite it is the
   canvas itself. This is exactly the call components.css already makes for
   .ccard (dark scrim + white type in both modes), so the hero follows it.

   Everything that lands ON that plate therefore lives in an ISLAND
   (.hero__slider) where the semantic tokens are re-pointed to the graphite
   set — see below. That single block is what keeps the buttons, the rules,
   the dots and the red legible in LIGHT mode, where the page-level --fg is
   near-black and would otherwise vanish into the plate.

   Everything OUTSIDE the island (the spec strip, the ticker) resolves through
   the ordinary zone tokens and flips with the mode like the rest of the page.
   ========================================================================== */
.hero {
  position: relative;
  /* The plate. Mode-CONSTANT by design (see the note above). */
  --hero-plate:  var(--ink-1000);
  --hero-ink-1:  rgba(5, 6, 7, 0.92);
  --hero-ink-2:  rgba(5, 6, 7, 0.62);
  --hero-ink-3:  rgba(5, 6, 7, 0.30);
  --hero-glass:  rgba(5, 6, 7, 0.55);
  --hero-grid-major: rgba(255, 255, 255, 0.055);
  --hero-grid-fine:  rgba(255, 255, 255, 0.028);

  background-color: var(--hero-plate);
  border-block-end: var(--bw-hair) solid var(--line);
}

/* -- THE ISLAND -----------------------------------------------------------
   Re-point the semantic tokens to the graphite set for everything sitting on
   the plate. Downstream components (.btn, .slider__*) need to know nothing:
   they read --fg / --line / --accent as always and come out right in BOTH
   modes. --accent becomes the LIT red (#FF2A32, 5.2:1 on graphite) because
   the paper red (#C6151C) only manages 3.2:1 against the wash.             */
.hero__slider {
  position: relative;

  --fg:            var(--paper-100);
  --fg-strong:     var(--paper-000);
  --fg-muted:      var(--steel-200);
  --fg-subtle:     var(--steel-300);
  --line:          var(--alpha-w-16);
  --line-strong:   rgba(255, 255, 255, 0.34);
  --line-contrast: rgba(255, 255, 255, 0.55);
  --surface:       var(--hero-glass);
  --surface-3:     var(--alpha-w-06);
  --accent:        var(--red-lit);
  --accent-hover:  var(--red-300);
  --accent-fg:     #FFFFFF;
}

/* A red FILL under WHITE text must be the plate red (5.4:1); the lit red is a
   TEXT colour and only reaches 3.0:1 behind white. Re-point the two wipes that
   would otherwise fill with --accent. */
.hero__slider .btn--secondary::before,
.hero__chrome .slider__btn:hover,
.hero__chrome .slider__btn:focus-visible {
  background-color: var(--accent-solid);
}
.hero__slider .btn--secondary:hover,
.hero__slider .btn--secondary:focus-visible { border-color: var(--accent-solid); }
.hero__chrome .slider__btn:hover,
.hero__chrome .slider__btn:focus-visible { color: var(--accent-fg); }

.hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: clamp(30rem, 76svh, 48rem);
  overflow: hidden;
  background-color: var(--hero-plate);
}

/* -- Media ---------------------------------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Pull the photography toward the graphite palette instead of letting the
     packaging colours run the page. The red is ours to spend, not theirs. */
  filter: grayscale(0.35) contrast(1.1) brightness(0.62);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--hero-ink-1) 0%, var(--hero-ink-3) 52%, var(--hero-ink-2) 100%);
}
/* The copy side gets a heavier, direction-aware wash so text always holds
   4.5:1 no matter what photograph sits behind it. */
.hero__slide[data-pos="L"] .hero__scrim {
  background-image:
    linear-gradient(to top, var(--hero-ink-1) 0%, var(--hero-ink-3) 52%, var(--hero-ink-2) 100%),
    linear-gradient(to var(--wash-dir, right), var(--hero-ink-1) 0%, var(--hero-ink-2) 42%, transparent 78%);
}
.hero__slide[data-pos="R"] .hero__scrim {
  background-image:
    linear-gradient(to top, var(--hero-ink-1) 0%, var(--hero-ink-3) 52%, var(--hero-ink-2) 100%),
    linear-gradient(to var(--wash-dir-rev, left), var(--hero-ink-1) 0%, var(--hero-ink-2) 42%, transparent 78%);
}
[dir="rtl"] .hero__slide { --wash-dir: left; --wash-dir-rev: right; }
[dir="ltr"] .hero__slide { --wash-dir: right; --wash-dir-rev: left; }

/* Blueprint grid over the photograph — this is the device that turns a stock
   packaging shot into a technical drawing. It is drawn on the PLATE, not on
   the page, so it stays white-on-ink in both modes (it is not --grid-line). */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--hero-grid-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to bottom, var(--hero-grid-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to right,  var(--hero-grid-fine) 0 1px, transparent 1px var(--grid-unit)),
    repeating-linear-gradient(to bottom, var(--hero-grid-fine) 0 1px, transparent 1px var(--grid-unit));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}

/* -- Copy block ----------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  inline-size: 100%;
  padding-block: var(--s-11) var(--s-13);
}
.hero__slide[data-pos="L"] .hero__inner { justify-content: flex-start; }
.hero__slide[data-pos="R"] .hero__inner { justify-content: flex-end; }

.hero__block {
  max-inline-size: 42rem;
  padding-inline-start: var(--s-6);
  border-inline-start: var(--bw-hair) solid var(--alpha-w-16);
}
@media (max-width: 767px) {
  .hero__slide[data-pos="R"] .hero__inner { justify-content: flex-start; }
  .hero__block { max-inline-size: 100%; }
}

/* A big red shape on the plate — the LOGO red, not the text red. */
.hero__slab {
  inline-size: 44px;
  block-size: var(--bw-slab);
  background-color: var(--accent-brand);
  margin-block-end: var(--s-5);
}
.hero__eyebrow {
  display: block;
  margin-block-end: var(--s-5);
  color: var(--fg-muted);   /* island: steel-200 on the plate, both modes */
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--fg-strong);
  text-wrap: balance;
  margin-block-end: var(--s-6);
}
[dir="rtl"] .hero__title { text-transform: none; letter-spacing: 0; }

.hero__desc {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: 36rem;
  margin-block-end: var(--s-7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* -- Chrome (over the slide, above the progress hairline) ------------------ */
.hero__chrome {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--s-6);
  z-index: 4;
  pointer-events: none;
}
.hero__chrome .slider__chrome {
  pointer-events: auto;
  justify-content: space-between;
  inline-size: 100%;
}
.hero__chrome-left {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.hero__chrome-right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* The chrome sits on the plate: it reads the ISLAND tokens, so no colour is
   spelled out here beyond the smoked-glass bed. */
.hero__chrome .slider__btns {
  background-color: var(--hero-glass);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.hero__chrome .slider__pause {
  background-color: var(--hero-glass);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--fg-muted);
}
.hero__chrome .slider__count { color: var(--fg-muted); }

.hero__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 4;
  background-color: var(--alpha-w-10);   /* the unfilled rail, on the plate */
}

@media (max-width: 639px) {
  .hero__chrome { inset-block-end: var(--s-4); }
  .hero__chrome .slider__dots { display: none; }
  .hero__inner { padding-block: var(--s-10) var(--s-12); }
}

/* -- Spec strip beneath the hero ------------------------------------------
   OUTSIDE the island: this is the title block of the drawing, so it flips with
   the mode — a white spec plate on paper, a graphite plate on ink. It carries
   NO colour of its own: .specstrip already reads --surface / --line / --fg.  */
.hero__specs {
  position: relative;
  z-index: 5;
  background-color: var(--surface);
  border-block-start: var(--bw-hair) solid var(--line);
}
.hero__specs .specstrip {
  border-block-start: 0;
  background-color: transparent;
}


/* ==========================================================================
   CATEGORY TICKER — the marquee that separates the hero from the catalogue.
   It inherits .ticker's --bg-deep bed; overriding the bed here would break the
   edge-fade gradients, which are painted from that same token.
   ========================================================================== */
.home-ticker {
  border-block-start: 0;
}


/* ==========================================================================
   01 — WHAT WE MAKE
   ========================================================================== */
.lines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-5);
}
@media (min-width: 1280px) {
  .lines__grid { grid-template-columns: repeat(4, 1fr); }
}

/* The 7 real bag structures, as a hairline plate strip under the 4 lines.
   This is the "sub-category" level of the tree made visible. */
.substrip {
  margin-block-start: var(--s-6);
}
.substrip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
}
/* The hairlines are drawn by the CELLS (the .marks technique), not by a 1px
   gap over a --line-coloured bed: the sub-category count is data-driven, so a
   bed would paint the empty tail of the last row as a solid grey slab — which
   in LIGHT mode reads as a broken, half-printed plate. Cell borders leave the
   tail as bare paper/graphite, correctly. */
.substrip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
.substrip__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background-color: var(--surface);
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
  transition: background-color var(--dur-2) var(--ease);
}
.substrip__item:hover { background-color: var(--surface-3); }
.substrip__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: var(--bw-rule);
  background-color: var(--accent);
  transition: inline-size var(--dur-2) var(--ease);
}
.substrip__item:hover::before { inline-size: 36px; }
.substrip__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.substrip__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .substrip__name { text-transform: none; font-size: var(--fs-base); }
.substrip__meta {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}


/* ==========================================================================
   02 — SELECTED WORK (paper zone)
   ========================================================================== */
.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-5);
}
@media (min-width: 1280px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); }
}
.work__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}
.work__note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  max-inline-size: 44ch;
  line-height: 1.7;
}


/* ==========================================================================
   03 — PRODUCTION ROUTE
   ========================================================================== */
.route__steps {
  /* 8 steps: 4 × 2 on desktop, 2 × 4 on tablet, 1 × 8 on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
@media (min-width: 1280px) {
  .route__steps { grid-template-columns: repeat(4, 1fr); }
}
.route__foot {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-7);
}


/* ==========================================================================
   04 — WHAT WE CAN DO (paper zone) — editorial split
   ========================================================================== */
.editorial {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 1023px) {
  .editorial { grid-template-columns: 1fr; }
}

.editorial__aside { position: relative; }

/* RTL REVEAL TRAP — do not delete.
   base.css declares, in this order:
     [data-reveal].is-revealed      { transform: none; clip-path: inset(0) }   (0,2,0)
     [dir="rtl"] [data-reveal="x"]  { transform: translateX(12px);
                                      clip-path: inset(0 12px 0 0) }           (0,2,0)
   Equal specificity, and the RTL rule comes LAST — so in Arabic it BEATS the
   settled state and the block keeps its 12px offset and its inset clip for
   ever: the story copy is sliced off down its inline-start edge. (In LTR the
   plain [data-reveal="x"] is only (0,1,0), loses, and the bug never shows —
   which is exactly why it survives an English-only read.)
   Re-assert the settled state at (0,3,0) for THIS page's block. Scoped to
   .editorial__aside so it cannot reach any other page's reveals.            */
.editorial__aside[data-reveal="x"].is-revealed,
[dir="rtl"] .editorial__aside[data-reveal="x"].is-revealed {
  transform: none;
  clip-path: inset(0 0 0 0);
}

@media (min-width: 1024px) {
  .editorial__aside {
    position: sticky;
    inset-block-start: calc(var(--masthead-h-sm) + var(--s-7));
  }
}
.editorial__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block: var(--s-4) var(--s-5);
}
[dir="rtl"] .editorial__title { text-transform: none; line-height: 1.3; }
.editorial__body p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  margin-block-end: var(--s-4);
}
.editorial__body p:first-child::first-letter {
  float: inline-start;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.78;
  font-weight: var(--fw-bold);
  color: var(--accent);
  padding-inline-end: var(--s-3);
  padding-block-start: 0.06em;
}
/* Arabic has no drop-cap tradition and Cairo's shaping breaks on ::first-letter.
   Turn it off. */
[dir="rtl"] .editorial__body p:first-child::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}
.editorial__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}

/* Same hairline technique as .substrip__grid, and for the same two reasons.
   A 1px gap over a --line-coloured BED paints every cell that is not currently
   opaque as a solid grey slab — and .cap is a [data-reveal] element, so until
   it scrolls into view it sits at opacity 0 and the bed shows straight through
   it. The result was a grey plate that flashed in under the capability grid on
   every scroll, in BOTH modes (bone-300 on paper, ink-700 on graphite). The
   same bed would also paint the empty tail of the last row if the capability
   count ever stopped being a multiple of the column count.
   Cells draw their own hairlines: an un-revealed cell is simply bare page. */
.caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
.caps__grid > .cap {
  border: 0;
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
}


/* ==========================================================================
   05 — WHERE TO FIND US
   ========================================================================== */
.network__marks { margin-block-end: var(--s-10); }
/* flex, NOT block: .micro--tick draws its red rule with a ::before that only
   takes an inline-size inside a flex container. `display: block` silently
   killed the tick — the one piece of red in this label. */
.network__marks-label {
  display: flex;
  inline-size: fit-content;
  margin-block-end: var(--s-4);
}
.network__agents { margin-block-start: var(--s-8); }
.network__agents .slider__chrome {
  margin-block-start: var(--s-6);
  justify-content: space-between;
}
.network__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}


/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.home-cta { padding-block: var(--section-y); }
/* The band is a PLATE laid on the deepest zone: --surface inside zone--void is
   the sheet on paper (bone) and the raised graphite on ink, so the plate stays
   one step off the ground in both modes. */
.home-cta .cta-band {
  background-color: var(--surface);
}
.home-cta__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-5);
}
.home-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.home-cta__mail:hover { color: var(--accent-hover); }
.home-cta__mail svg { inline-size: 13px; block-size: 13px; }