/* ============================================================
   Merke Category — Stationery & Workspace
   Extends homepage.css (which sets tokens via container queries).
   ============================================================ */

/* ---------- Breadcrumb ---------- */
/* Default styling — used when breadcrumb sits on the page (cream).
   When nested inside the hero, .category-hero-breadcrumb overrides background +
   color so it reads as overlaid on the photograph. */
.category-breadcrumb {
  padding: 28px var(--page-px) 28px;
  font-family: "Epilogue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.category-breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 160ms ease;
}
.category-breadcrumb a:hover { color: var(--merke-blue); }
.category-breadcrumb .sep { color: var(--fg-subtle); }
.category-breadcrumb .current { color: var(--fg-primary); }

/* ---------- Category Hero — full-bleed banner ---------- */
.category-hero {
  position: relative;
  padding: 0;
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
  min-height: min(680px, 84cqh);
  overflow: hidden;
  isolation: isolate;
}
/* When breadcrumb is nested inside the hero, it sits over the image at the
   top — so the lit, textured wall continues right up to the page edge and
   there's no flat seam between a page band and the photo. */
.category-hero-breadcrumb {
  position: relative;
  z-index: 2;
}
.category-hero-breadcrumb .category-breadcrumb {
  background: transparent;
  padding-top: 24px;
  padding-bottom: 0;
}
.category-hero-breadcrumb .category-breadcrumb a { color: rgba(42, 36, 29, 0.72); }
.category-hero-breadcrumb .category-breadcrumb a:hover { color: var(--merke-blue); }
.category-hero-breadcrumb .category-breadcrumb .sep { color: rgba(42, 36, 29, 0.42); }
.category-hero-breadcrumb .category-breadcrumb .current { color: #2A241D; }
.category-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.category-hero-bg > * {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.category-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
.category-hero-flat {
  width: 100%;
  height: 100%;
  display: block;
}
@container page (max-width: 900px) {
  /* Mobile: pull the crop so the cluster of folded apparel + framed print
     stays in frame below the headline. */
  .category-hero-img {
    object-position: 72% bottom;
  }
}
.category-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(11, 22, 31, 0.12) 0%,
      rgba(11, 22, 31, 0.38) 45%,
      rgba(11, 22, 31, 0.80) 100%
    );
  pointer-events: none;
}
.category-hero-content {
  position: relative;
  z-index: 2;
  /* Desktop/tablet: vertically center text in the hero so it sits on the
     wall (the upper portion of the photograph) — not floating against the
     breadcrumb up top, not crashing into the dark wood at the bottom. */
  padding: 24px var(--page-px) 72px;
  min-height: min(620px, 78cqh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  max-width: 920px;
  color: #2A241D;
}
.category-hero-cta { margin-top: 22px; }
@container page (max-width: 900px) {
  .category-hero { min-height: min(560px, 82cqh); }
  .category-hero-content {
    /* Mobile: text feels right anchored just below the breadcrumb — the
       narrower viewport means the text cluster already fills the wall
       portion comfortably without needing to be vertically centered. */
    justify-content: flex-start;
    padding: 64px var(--page-px) 48px;
    min-height: min(560px, 82cqh);
  }
}
.category-hero-headline {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: var(--h1-fs);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: #2A241D;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.category-hero-sub {
  font-family: "Epilogue", sans-serif;
  font-size: var(--body-lg-fs);
  line-height: 1.5;
  color: rgba(42, 36, 29, 0.78);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ----- Dark hero theme -----
   Applied when the hero photograph (or flat colour) is dark enough that the
   default ink-on-cream text reads poorly. Flips headline, subline, and
   breadcrumb to off-white. */
.category-hero[data-hero-theme="dark"] .category-hero-headline { color: #F4EFE3; }
.category-hero[data-hero-theme="dark"] .category-hero-sub      { color: rgba(244, 239, 227, 0.82); }
.category-hero[data-hero-theme="dark"] .category-hero-breadcrumb .category-breadcrumb a       { color: rgba(244, 239, 227, 0.72); }
.category-hero[data-hero-theme="dark"] .category-hero-breadcrumb .category-breadcrumb a:hover { color: #F4EFE3; }
.category-hero[data-hero-theme="dark"] .category-hero-breadcrumb .category-breadcrumb .sep     { color: rgba(244, 239, 227, 0.42); }
.category-hero[data-hero-theme="dark"] .category-hero-breadcrumb .category-breadcrumb .current { color: #F4EFE3; }
/* Inline-on-desktop / new-line-on-mobile second clause. Forces the break at
   the period without changing the subhead's font size — used when the
   second sentence would otherwise wrap mid-phrase on a narrow screen. */
@container page (max-width: 900px) {
  .hero-sub-mobile-break { display: block; }
}
/* ---------- Gallery ---------- */
.category-gallery-section { background: var(--bg-elevated); }
.category-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 4), 1fr);
  column-gap: 32px;
  row-gap: 56px;
}
@container page (max-width: 1100px) {
  .category-gallery { grid-template-columns: repeat(min(var(--gallery-cols, 4), 3), 1fr); row-gap: 44px; column-gap: 24px; }
}
@container page (max-width: 760px) {
  .category-gallery { grid-template-columns: repeat(2, 1fr); row-gap: 32px; column-gap: 16px; }
}
@container page (max-width: 380px) {
  .category-gallery { grid-template-columns: 1fr; row-gap: 28px; }
}

/* Tile card — curated solid backdrop for product cutouts.
   Frame is fixed; the product (placeholder here, real PNG cutout later)
   scales 1.04 on hover inside an overflow:hidden crop. Contact shadow
   stays put so the product appears to lift a little off its ground. */
.category-gallery-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--tile-bg, #ECE6D8);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
.category-gallery-card-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  height: 6%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(11, 22, 31, 0.22), rgba(11, 22, 31, 0) 70%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 1;
}
.category-gallery-card-product {
  position: absolute;
  inset: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  transform-origin: 50% 60%;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.category-gallery-card-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 22, 31, 0.45);
}
.category-gallery-card-direction {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(11, 22, 31, 0.78);
  max-width: 44ch;
  white-space: pre-wrap;
}
/* Light-text variant for darker tile backgrounds */
.category-gallery-card.is-light .category-gallery-card-label { color: rgba(248, 244, 232, 0.55); }
.category-gallery-card.is-light .category-gallery-card-direction { color: rgba(248, 244, 232, 0.88); }
.category-gallery-card.is-light .category-gallery-card-shadow {
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 70%);
}
/* Real product cutout (PNG with transparency) — sits inside the tile frame
   with the same scale/hover behavior the placeholder text used. The contact
   shadow underneath is drawn by .category-gallery-card-shadow. The image is
   absolutely positioned with insets matching the placeholder's; object-fit
   contain so any aspect-ratio inside the 880×1100 export works. */
.category-gallery-card-img {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  object-fit: contain;
  object-position: center bottom;
  z-index: 2;
  transform-origin: 50% 60%;
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
@media (hover: hover) {
  .category-gallery-card:hover .category-gallery-card-img {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-gallery-card-img { transition: none; }
  .category-gallery-card:hover .category-gallery-card-img { transform: none; }
}

/* Subtle hover zoom — only on hover-capable devices, never on touch. */
@media (hover: hover) {
  .category-gallery-card:hover .category-gallery-card-product {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .category-gallery-card-product { transition: none; }
  .category-gallery-card:hover .category-gallery-card-product { transform: none; }
}

/* Soft CTA after the gallery */
.category-gallery-cta {
  padding-top: 32px;
  display: flex;
  justify-content: flex-end;
}
@container page (max-width: 760px) {
  .category-gallery-cta {
    justify-content: flex-start;
    padding-top: 24px;
  }
}
.category-gallery-link {
  font-family: "Epilogue", sans-serif;
  font-size: 15px;
  color: var(--merke-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* Keep the underline clear of the next line when the label wraps on
     narrow viewports — at the default line-height the 5px-offset
     underline collides with the descender row above it. */
  line-height: 1.65;
}
.category-gallery-link-label {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* Mobile gallery sits as a 2-col vertical grid (cleared above).
   The horizontal-scroll variant was removed for ad-driven traffic:
   cold visitors are more likely to see the full range when it's
   visible by scroll, not gated behind a swipe gesture. */

.category-gallery-tile {
  position: relative;
}

/* Product caption — sits below the tile card. Two-line format:
   primary = product type + key spec (reads as "category we cover"),
   secondary = brand/SKU in mono (reads as the specific reference shown).
   This deliberately avoids implying the catalogue is limited to the
   six exact SKUs pictured. */
.category-gallery-tile-caption {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}
.category-gallery-tile-product {
  font-family: "Epilogue", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--merke-ink, #0B161F);
  line-height: 1.3;
}
.category-gallery-tile-ref {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(11, 22, 31, 0.5);
  line-height: 1.4;
}
@container page (max-width: 760px) {
  .category-gallery-tile-caption { margin-top: 14px; }
  .category-gallery-tile-product { font-size: 15px; }
  .category-gallery-tile-ref { font-size: 10px; }
}

/* ---------- What you can customise — compact card list ---------- */
.category-customise {
  padding: 80px var(--page-px);
  border-bottom: 1px solid rgba(11, 22, 31, 0.04);
}
@container page (max-width: 760px) {
  .category-customise { padding: 56px var(--page-px); }
}

.category-customise-grid {
  display: grid;
  grid-template-columns: var(--left-rail) 1fr;
  column-gap: var(--left-rail-gap);
  align-items: start;
}
@container page (max-width: 760px) {
  .category-customise-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

.category-customise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 40px;
}
@container page (max-width: 1100px) {
  .category-customise-list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 36px;
  }
}
@container page (max-width: 520px) {
  .category-customise-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 28px;
  }
}
.category-customise-list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  padding: 0;
  border: none;
}
.category-customise-icon {
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid rgba(11, 22, 31, 0.10);
  border-radius: 999px;
  color: var(--merke-blue);
}
.category-customise-label {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--fg-primary);
  text-wrap: balance;
  max-width: 18ch;
}

/* ---------- Good to know — vertical stack of statements ---------- */
.category-good {
  padding: 80px var(--page-px);
  border-bottom: 1px solid rgba(11, 22, 31, 0.08);
}
@container page (max-width: 760px) {
  .category-good { padding: 56px var(--page-px); }
}
.category-good-grid {
  display: grid;
  grid-template-columns: var(--left-rail) 1fr;
  column-gap: var(--left-rail-gap);
  align-items: start;
}
@container page (max-width: 760px) {
  .category-good-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

.category-good-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
}
@container page (max-width: 760px) {
  .category-good-row {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}
.category-good-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.category-good-topic {
  font-family: "Epilogue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--merke-blue);
}
.category-good-statement {
  font-family: "Epilogue", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}
@container page (max-width: 1100px) {
  .category-good-statement { font-size: 20px; }
}
@container page (max-width: 760px) {
  .category-good-statement { font-size: 19px; }
}

/* ---------- Mid CTA band — removed ---------- */