/* ==========================================================================
   BAKKAR PRINTING — THEME "MOMENTUM"
   pages/home.css — index.html only.
   --------------------------------------------------------------------------
   The signature device: a BENTO-GRID hero. The slider is ONE TILE inside an
   asymmetric grid that also holds the quote-CTA tile, the count-up stats tile
   and the four category tiles. Not a full-bleed banner.
   ========================================================================== */

/* ==========================================================================
   1. HERO — the bento grid
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem) var(--sp-section-s);
  background:
    radial-gradient(60rem 34rem at 88% -8%, rgba(249, 115, 22, .10), transparent 62%),
    radial-gradient(46rem 30rem at 4% 6%, rgba(237, 28, 36, .07), transparent 60%),
    var(--grad-paper);
  overflow: hidden;
}

.bento {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(232px, auto) minmax(232px, auto) minmax(206px, auto);
  grid-template-areas:
    "sl sl sl sl sl sl sl sl ct ct ct ct"
    "sl sl sl sl sl sl sl sl st st st st"
    "c1 c1 c1 c2 c2 c2 c3 c3 c3 c4 c4 c4";
}

@media (max-width: 1080px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(380px, auto) auto auto auto;
    grid-template-areas:
      "sl sl"
      "ct st"
      "c1 c2"
      "c3 c4";
  }
}
@media (max-width: 640px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-template-areas:
      "sl"
      "ct"
      "st"
      "c1"
      "c2"
      "c3"
      "c4";
  }
}

/* ---- TILE 1: the slider ---- */
.bento__slider {
  grid-area: sl;
  position: relative;
  border-radius: var(--tile-r);
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: var(--sh-4);
  min-block-size: 340px;
}
.bento__slider .slider__viewport,
.bento__slider .slider__track { block-size: 100%; }

.hero-slide {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 340px;
  overflow: hidden;
  isolation: isolate;
}
.hero-slide__img {
  position: absolute;
  inset: -4%;
  z-index: -2;
  inline-size: 108%;
  block-size: 108%;
  object-fit: cover;
  transform: scale(1.04);
  will-change: transform;
}
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-b);
}
.hero-slide__scrim::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 74%;
  background: linear-gradient(90deg, rgba(11, 12, 18, .90) 0%, rgba(11, 12, 18, .58) 46%, rgba(11, 12, 18, 0) 100%);
}
/* text_pos 'L' = inline-start, 'R' = inline-end. Both mirror correctly in RTL. */
[dir="rtl"] .hero-slide__scrim::before { transform: scaleX(-1); }
.hero-slide[data-pos="R"] .hero-slide__scrim::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: scaleX(-1);
}
[dir="rtl"] .hero-slide[data-pos="R"] .hero-slide__scrim::before { transform: none; }

.hero-slide__body {
  position: relative;
  z-index: 2;
  max-inline-size: min(46ch, 74%);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-block-end: clamp(4.75rem, 4rem + 2vw, 6rem);
}
.hero-slide[data-pos="R"] .hero-slide__body { margin-inline-start: auto; }

.hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #fff;
}
[dir="rtl"] .hero-slide__eyebrow { text-transform: none; font-size: var(--fs-xs); }
.hero-slide__eyebrow::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-circle);
  background: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .3);
  flex: none;
}

.hero-slide__title {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-slide__desc {
  margin-block-start: var(--sp-3);
  max-inline-size: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}
.hero-slide__cta { margin-block-start: var(--sp-5); }

@media (max-width: 640px) {
  .hero-slide__body { max-inline-size: 100%; }
  .hero-slide__desc { display: none; }
}

/* ---- TILE 2: the quote CTA ---- */
.bento__cta {
  grid-area: ct;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--tile-r);
  background: var(--grad-cta);
  color: var(--text-on-brand);
  box-shadow: var(--glow-brand-lg), var(--sh-3);
  overflow: hidden;
  isolation: isolate;
}
.bento__cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -55%;
  inset-inline-end: -25%;
  inline-size: 22rem;
  block-size: 22rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(255, 220, 170, .30) 0%, rgba(255, 220, 170, 0) 66%);
  pointer-events: none;
}
.bento__cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: fit-content;
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #fff;
}
[dir="rtl"] .bento__cta-eyebrow { text-transform: none; font-size: var(--fs-xs); }
.bento__cta-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: #fff;
  text-wrap: balance;
}
.bento__cta-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: auto; }

/* ---- TILE 3: count-up stats ---- */
.bento__stats {
  grid-area: st;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--tile-r);
  background: var(--grad-ink);
  color: var(--text-on-ink);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.bento__stats-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--amber-400);
}
[dir="rtl"] .bento__stats-title { text-transform: none; font-size: var(--fs-xs); }
.bento__stats-title svg { inline-size: 14px; block-size: 14px; }

.bento__stats .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  margin-block-start: auto;
}
.bento__stats .stat__num { font-size: var(--fs-2xl); }
.bento__stats .stat__label { color: var(--text-on-ink-2); }

/* ---- TILES 4–7: the four root categories ---- */
.bento__cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 206px;
  padding: var(--sp-5);
  border-radius: var(--tile-r);
  background: var(--ink-800);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-2);
  transition:
    transform var(--d-base) var(--e-spring),
    box-shadow var(--d-base) var(--e-out);
}
.bento__cat:nth-of-type(1) { grid-area: c1; }
.bento__cat:nth-of-type(2) { grid-area: c2; }
.bento__cat:nth-of-type(3) { grid-area: c3; }
.bento__cat:nth-of-type(4) { grid-area: c4; }

.bento__cat:hover { transform: var(--lift-lg); box-shadow: var(--sh-5); }

.bento__cat-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-slower) var(--e-out);
}
.bento__cat:hover .bento__cat-img { transform: scale(1.08); }
.bento__cat::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 12, 18, .90) 0%, rgba(11, 12, 18, .40) 48%, rgba(11, 12, 18, .10) 100%);
  transition: opacity var(--d-base) var(--e-soft);
}
.bento__cat:hover::after { opacity: .94; }

.bento__cat-icon {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  inline-size: 46px;
  block-size: 46px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  object-fit: contain;
  transition: transform var(--d-base) var(--e-spring);
}
.bento__cat:hover .bento__cat-icon { transform: rotate(-6deg) scale(1.08); }

.bento__cat-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
  color: #fff;
}
.bento__cat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.bento__cat-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: #fff;
  white-space: nowrap;
}
[dir="rtl"] .bento__cat-count { font-size: var(--fs-xs); }
.bento__cat-go {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-900);
  flex: none;
  transition: background var(--d-quick) var(--e-soft), color var(--d-quick) var(--e-soft), transform var(--d-base) var(--e-spring);
}
.bento__cat-go svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .bento__cat-go svg { transform: scaleX(-1); }
.bento__cat:hover .bento__cat-go { background: var(--grad-cta); color: #fff; transform: scale(1.12); }

/* ==========================================================================
   2. BRANDS MARQUEE — the customer names printed on our own packs
   ========================================================================== */
.brands {
  padding-block: var(--sp-10);
  background: var(--bg);
  border-block-end: var(--border);
}
.brands__label {
  margin-block-end: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-3);
  max-inline-size: 54ch;
  margin-inline: auto;
}

/* ==========================================================================
   3. CAPABILITIES — the "why Bakkar" band
   ========================================================================== */
.caps { background: var(--bg-warm); }
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 1023px) { .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .caps__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   4. PRODUCTS PREVIEW
   ========================================================================== */
.preview__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-end: var(--sp-8);
}
.preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: var(--grid-gap);
}
.preview__more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sp-10);
}

/* ==========================================================================
   5. PROCESS RAIL
   ========================================================================== */
.process { background: var(--bg); }
.process__rail {
  /* Bleed the rail to the viewport edge so the last card is clearly cut off —
     it reads as "there is more", which a boxed row never does. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.process__hint {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.process__hint svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .process__hint svg { transform: scaleX(-1); }

/* ==========================================================================
   6. AGENTS PROOF BAND
   ========================================================================== */
.agents-band { background: var(--bg-ink); color: var(--text-on-ink); }
.agents-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 1023px) { .agents-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .agents-band__grid { grid-template-columns: minmax(0, 1fr); } }
.agents-band__foot {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sp-10);
}

/* ==========================================================================
   7. CLOSING CTA
   ========================================================================== */
.home-cta { padding-block: var(--sp-section) 0; }