/* premium-category.css — wave 15: editorial category page (prefix c-)
   ------------------------------------------------------------------
   Loads AFTER premium-pages/refine/article, so equal-specificity rules
   win by order; the .c-editorial scope (3 classes) also out-specifies the
   .p-stream card/cta rules it replaces — no !important needed.

   ACTIVATION / PORTABILITY
   The whole pattern is keyed on two hooks set in content_page.html:
     • body.c-editorial            → turns the editorial layout ON
     • body.page-slug-<slug>       → per-page tweaks (always present)
   To enable this pattern on another ContentPage, add its slug to the
   {% if page.slug == 'panele-scienne' %} test in content_page.html
   (e.g. ... or page.slug == 'panele-lazienkowe'). No CSS changes needed:
   every rule below is scoped to .c-editorial and re-used as-is.
   ------------------------------------------------------------------ */

.c-editorial{
  --c-ink:#1f2224; --c-muted:#63665f; --c-line:#d8d3c9;
  --c-blue:#0876bd; --c-navy:#11375f; --c-navy-deep:#0b2540;
  --c-ease:cubic-bezier(.2,.7,.2,1);
}

/* Split numeral parts are hidden everywhere by default; grid-mode card
   grids (home / contact / architects) keep showing only .c-num-full, so
   they render byte-identical to before. The editorial scope re-shows the
   folio + code and hides the full string. */
.c-num-folio,.c-num-code{display:none;}

/* full-bleed sections below break past .shell with width:100vw; clip the
   stray sub-pixel on the content wrapper so no horizontal scrollbar
   appears (mirrors the .page-home .stream-content{overflow:hidden} pattern
   already shipped, and never touches the sticky header outside it). */
.c-editorial .stream-content{overflow-x:clip;}

/* ==================================================================
   1. EDITORIAL SYSTEM INDEX  (was: 6 identical tiles)
   Variant (a): a grand row index — big faint folio 01–06 in a gutter,
   the family name in large light type, one-line description, and an
   image that reveals from a right-hand sliver on hover. Hairlines
   between rows. Chosen because it scales cleanly to six items and turns
   a monotonous grid into a piece of typographic architecture.
   ================================================================== */

/* section head */
.c-editorial .block-card_grid .c-index-section{padding-top:clamp(60px,8vh,104px);}
.c-editorial .block-card_grid h2.c-index-h{
  position:relative;padding-top:30px;margin:0 0 6px;max-width:16em;
  font-size:clamp(30px,3.5vw,50px);font-weight:300;letter-spacing:-.04em;line-height:1.02;
  color:var(--c-ink);
}
.c-editorial .block-card_grid h2.c-index-h::before{
  content:"";position:absolute;top:0;left:0;width:54px;height:2px;background:var(--c-blue);
}

/* grid → single-column row list */
.c-editorial .block-card_grid .card-grid.c-index{
  display:block;margin-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--c-line);
}

/* each family = a full-width row (overrides .p-stream .space-card box) */
.c-editorial .block-card_grid .c-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(240px,32%,430px);
  align-items:stretch;gap:clamp(28px,4vw,66px);
  background:transparent;border:0;border-bottom:1px solid var(--c-line);
  overflow:hidden;box-shadow:none;
  min-height:clamp(158px,20vh,214px);padding:clamp(24px,3.2vh,42px) 0;
  transition:background .55s var(--c-ease);
}
.c-editorial .block-card_grid .c-row:hover{
  transform:none;box-shadow:none;
  background:linear-gradient(90deg,rgba(8,118,189,.045),rgba(8,118,189,0) 58%);
}
.c-editorial .block-card_grid .c-row.c-row--clickable{cursor:pointer;}
/* kill the .p-stream pseudo arrow + pill that belonged to the tile look */
.c-editorial .block-card_grid .space-card::after{content:none;}

/* body: folio gutter | (title over description) */
.c-editorial .block-card_grid .c-row-body{
  grid-column:1;order:1;padding:0;background:transparent;
  display:grid;grid-template-columns:clamp(66px,8vw,124px) minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:clamp(18px,2.6vw,40px);
  align-content:center;gap:0;
}

/* big folio numeral (decorative) */
.c-editorial .block-card_grid .c-num{
  grid-column:1;grid-row:1/3;align-self:center;
  position:static;margin:0;padding:0;background:transparent;border:0;border-radius:0;
  backdrop-filter:none;color:inherit;font:inherit;letter-spacing:0;text-transform:none;
}
.c-editorial .block-card_grid .c-num::after{content:none;}
.c-editorial .block-card_grid .c-num-full{display:none;}
.c-editorial .block-card_grid .c-num-folio{
  display:block;font-weight:200;font-size:clamp(46px,6vw,104px);line-height:.86;
  letter-spacing:-.045em;color:var(--c-ink);opacity:.15;
  transition:opacity .6s var(--c-ease),color .6s var(--c-ease),transform .6s var(--c-ease);
}
.c-editorial .block-card_grid .c-num-code{
  display:block;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);
}
.c-editorial .block-card_grid .c-row:hover .c-num-folio{opacity:.4;color:var(--c-navy);}

/* title */
.c-editorial .block-card_grid .c-row-title{
  grid-column:2;grid-row:1;align-self:end;margin:0;
  font-size:clamp(27px,3.3vw,50px);font-weight:300;letter-spacing:-.035em;line-height:1.02;
  color:var(--c-ink);
}
.c-editorial .block-card_grid .c-row-title a{color:inherit;position:relative;transition:color .4s var(--c-ease);}
.c-editorial .block-card_grid .c-row:hover .c-row-title a{color:var(--c-navy);}
.c-editorial .block-card_grid .c-row-title a::after{
  content:"→";display:inline-block;margin-left:.42em;font-size:.52em;color:var(--c-blue);
  vertical-align:middle;opacity:0;transform:translateX(-6px);
  transition:opacity .45s var(--c-ease),transform .5s var(--c-ease);
}
.c-editorial .block-card_grid .c-row:hover .c-row-title a::after{opacity:1;transform:translateX(0);}

/* description */
.c-editorial .block-card_grid .c-row-text{
  grid-column:2;grid-row:2;align-self:start;margin:14px 0 0;
  color:var(--c-muted);font-size:clamp(13.5px,1.1vw,16px);line-height:1.6;max-width:44ch;
}

/* media: a vertical sliver that reveals on hover (clip-path + tone only — no layout animation) */
.c-editorial .block-card_grid .c-row-media{
  grid-column:2;order:2;position:relative;align-self:stretch;overflow:hidden;
  min-height:150px;background:#e9e4da;
  clip-path:inset(0 0 0 60%);
  transition:clip-path .8s var(--c-ease);
}
.c-editorial .block-card_grid .c-row-media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.02);transform:scale(1.06);
  transition:filter .8s var(--c-ease),transform 1.1s var(--c-ease);
}
.c-editorial .block-card_grid .c-row-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,243,238,.5),rgba(245,243,238,0) 40%);
  opacity:1;transition:opacity .7s var(--c-ease);
}
.c-editorial .block-card_grid .c-row:hover .c-row-media{clip-path:inset(0);}
.c-editorial .block-card_grid .c-row:hover .c-row-media img{filter:none;transform:scale(1);}
.c-editorial .block-card_grid .c-row:hover .c-row-scrim{opacity:0;}

/* staggered reveal — reuse strama.js .reveal-ready/.is-visible on the block
   (added only when motion is enabled, so reduced-motion / no-JS shows all rows). */
.c-editorial .block-card_grid.reveal-ready .c-row{
  opacity:0;transform:translateY(26px);
}
.c-editorial .block-card_grid.is-visible .c-row{
  opacity:1;transform:none;
  transition:opacity .8s var(--c-ease),transform .8s var(--c-ease);
  transition-delay:calc(var(--c-i,0) * 90ms);
}

/* ==================================================================
   2. GALLERY — full-bleed dominant-frame mosaic
   ================================================================== */
.c-editorial .block-gallery .gallery-section{padding-top:clamp(60px,8vh,100px);}
.c-editorial .block-gallery h2{
  position:relative;padding-top:30px;margin:0 0 6px;max-width:15em;
  font-size:clamp(28px,3.3vw,48px);font-weight:300;letter-spacing:-.04em;line-height:1.03;
  color:var(--c-ink);
}
.c-editorial .block-gallery h2::before{
  content:"";position:absolute;top:0;left:0;width:54px;height:2px;background:var(--c-blue);
}
.c-editorial .block-gallery .h-gallery{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(30px,5vh,50px);
  grid-template-columns:1.65fr 1fr;grid-auto-rows:1fr;gap:12px;
  height:clamp(440px,64vh,660px);
}
.c-editorial .block-gallery .h-gallery-cell:first-child{grid-row:1/3;}
/* keep captions legible in the larger frame */
.c-editorial .block-gallery .h-gallery-caption{padding:52px 26px 22px;}
.c-editorial .block-gallery .h-gallery-caption span{font-size:12px;}

/* ==================================================================
   3. CTA — wide, breathing brand-moment (was: small navy box)
   ================================================================== */
.c-editorial .block-cta .cta-section{padding-top:clamp(56px,7vh,92px);}
.c-editorial .block-cta .cta-panel{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(360px,54vh,540px);border:0;overflow:hidden;position:relative;
  display:flex;align-items:center;
  padding:clamp(56px,8vw,112px) clamp(26px,7vw,130px);
  background:linear-gradient(150deg,var(--c-navy) 0%,var(--c-navy-deep) 100%);
  color:#fff;
}
/* stacked logo watermark (inverted to white) */
.c-editorial .block-cta .cta-panel::before{
  content:"";position:absolute;z-index:1;right:-40px;bottom:-70px;
  width:min(46vw,520px);height:min(46vw,520px);
  background:url("../img/strama-panels-logo-stacked.3e942d32d75e.svg") right bottom/contain no-repeat;
  filter:brightness(0) invert(1);opacity:.05;pointer-events:none;
}
/* readability veil over the photo */
.c-editorial .block-cta .cta-panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--c-navy-deep) 20%,rgba(11,37,64,.62) 58%,rgba(11,37,64,.32) 100%);
}
.c-editorial .block-cta .cta-panel-media{position:absolute;inset:0;z-index:0;margin:0;}
.c-editorial .block-cta .cta-panel-media img{
  width:100%;height:100%;object-fit:cover;opacity:.28;filter:grayscale(.3);
}
.c-editorial .block-cta .cta-panel-copy{position:relative;z-index:2;max-width:940px;padding:0;}
.c-editorial .block-cta .cta-panel-copy .eyebrow{color:#8fc8ed;margin-bottom:22px;}
.c-editorial .block-cta .cta-panel h2{
  font-size:clamp(38px,5.2vw,68px);font-weight:300;letter-spacing:-.04em;line-height:1.02;margin:0 0 20px;
}
.c-editorial .block-cta .cta-panel p:not(.eyebrow){
  font-size:clamp(15px,1.4vw,19px);line-height:1.65;color:#cfdae7;max-width:52ch;margin:0 0 32px;
}
.c-editorial .block-cta .cta-panel .button{padding:16px 26px;}

/* ==================================================================
   4. HERO — subtle lift for the category (scoped by slug, not editorial,
   so it also works if the family index is toggled off later)
   ================================================================== */
body.page-slug-panele-scienne .p-subpage-top::after{
  content:"";position:absolute;z-index:0;right:-90px;top:-70px;
  width:min(38vw,460px);height:min(38vw,460px);
  background:url("../img/strama-domain-mark.cd70779f2880.svg") right top/contain no-repeat;
  opacity:.04;pointer-events:none;
}
body.page-slug-panele-scienne .p-hero-copy{padding-top:8px;}
body.page-slug-panele-scienne .p-hero-media img{min-height:480px;}

/* ==================================================================
   Responsive
   ================================================================== */
@media(max-width:1024px){
  .c-editorial .block-card_grid .c-row{
    grid-template-columns:minmax(0,1fr) clamp(180px,28%,300px);gap:clamp(22px,3vw,44px);
    min-height:0;
  }
  /* touch-likely: reveal the image fully (no hover), keep it toned back a touch */
  .c-editorial .block-card_grid .c-row-media{clip-path:inset(0);}
  .c-editorial .block-card_grid .c-row-media img{filter:grayscale(.25);transform:none;}
  .c-editorial .block-card_grid .c-row-scrim{opacity:0;}
  .c-editorial .block-card_grid .c-num-folio{opacity:.22;}
  .c-editorial .block-gallery .h-gallery{height:clamp(400px,56vh,560px);}
}

@media(max-width:720px){
  /* rows stack: small folio kicker + title + text, image as a band on top */
  .c-editorial .block-card_grid .c-row{
    grid-template-columns:1fr;gap:16px;padding:26px 0;
  }
  .c-editorial .block-card_grid .c-row-media{
    grid-column:1;order:0;min-height:0;height:150px;clip-path:none;
  }
  .c-editorial .block-card_grid .c-row-body{
    grid-column:1;order:1;grid-template-columns:1fr;grid-template-rows:auto auto auto;
    row-gap:8px;
  }
  .c-editorial .block-card_grid .c-num{grid-column:1;grid-row:1;align-self:start;}
  .c-editorial .block-card_grid .c-num-folio{
    display:inline;font-size:34px;opacity:.3;vertical-align:baseline;
  }
  .c-editorial .block-card_grid .c-num-code{
    display:inline;margin-top:0;margin-left:12px;
  }
  .c-editorial .block-card_grid .c-row-title{grid-column:1;grid-row:2;align-self:auto;font-size:clamp(26px,7.5vw,34px);}
  .c-editorial .block-card_grid .c-row-text{grid-column:1;grid-row:3;margin-top:4px;max-width:none;}
  .c-editorial .block-card_grid .c-row-title a::after{opacity:1;transform:none;}

  /* gallery: single column, dominant frame first */
  .c-editorial .block-gallery .h-gallery{
    grid-template-columns:1fr;grid-auto-rows:auto;height:auto;
  }
  .c-editorial .block-gallery .h-gallery-cell{height:230px;}
  .c-editorial .block-gallery .h-gallery-cell:first-child{grid-row:auto;height:300px;}
  .c-editorial .block-gallery .h-gallery-caption span{opacity:1;transform:none;}

  .c-editorial .block-cta .cta-panel{min-height:0;padding:clamp(44px,10vw,64px) 26px;}
  .c-editorial .block-cta .cta-panel::before{width:300px;height:300px;right:-70px;}

  body.page-slug-panele-scienne .p-hero-media img{min-height:300px;}
  body.page-slug-panele-scienne .p-subpage-top::after{width:280px;height:280px;right:-60px;}
}

/* Respect reduced motion. These selectors match the base rules exactly and
   sit later in the file, so they win by order without !important. The reveal
   from-state (.reveal-ready) is only ever added by strama.js when motion is
   enabled, so rows are already visible here — no opacity reset needed. */
@media(prefers-reduced-motion:reduce){
  .c-editorial .block-card_grid .c-row{transition:none;}
  .c-editorial .block-card_grid .c-num-folio{transition:none;}
  .c-editorial .block-card_grid .c-row-title a{transition:none;}
  .c-editorial .block-card_grid .c-row-title a::after{transition:none;opacity:1;transform:none;}
  .c-editorial .block-card_grid .c-row-media{transition:none;clip-path:inset(0);}
  .c-editorial .block-card_grid .c-row-media img{transition:none;transform:none;filter:grayscale(.2);}
  .c-editorial .block-card_grid .c-row-scrim{transition:none;opacity:0;}
}

/* Orchestrator fix (mobile): base .space-card>div padding leaks onto the media
   wrapper and letterboxes the photo — flatten it and let the image fill the frame. */
.c-editorial .block-card_grid .c-row .c-row-media{padding:0;display:block;overflow:hidden}
.c-editorial .block-card_grid .c-row .c-row-media img{width:100%;height:100%;object-fit:cover;margin:0}
@media(max-width:720px){
  .c-editorial .block-card_grid .c-row .c-row-media{aspect-ratio:16/9;height:auto}
}