/* premium-home.css — wave 1 (agent B: homepage + StreamField blocks)
   Loads after strama.css → equal specificity wins by source order.
   New classes prefixed "h-". Sharp edges, soft shadows, Roboto. */

:root{
  --h-ease:cubic-bezier(.2,.7,.2,1);
  --h-shadow:0 24px 70px rgba(15,27,35,.10);
  --h-shadow-lift:0 30px 80px rgba(15,27,35,.14);
  --h-navy-grad:linear-gradient(150deg,#0d3155 0%,#0b2540 100%);
}

/* ============================================================
   1. HERO
   ============================================================ */
.home-hero--premium{
  background:linear-gradient(118deg,#faf9f6 0%,#f2efe8 62%,#eae5db 100%);
}
/* thin architectural accent line under the eyebrow */
.h-hero-accent{
  display:block;width:54px;height:2px;background:var(--blue);
  margin:26px 0 30px;transform-origin:left center;
}
.home-hero--premium .hero-index{
  text-transform:uppercase;font-weight:500;
}
.home-hero--premium .hero-copy h1{
  font-weight:200;letter-spacing:-.035em;line-height:.94;
}
.home-hero--premium .hero-text{color:#54574f;}

/* material card — more depth + micro hover */
.hero-material-card{
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 26px 70px rgba(11,20,28,.26),0 4px 14px rgba(11,20,28,.14);
  transition:transform .6s var(--h-ease),box-shadow .6s var(--h-ease);
}
.hero-material-card:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 84px rgba(11,20,28,.34),0 6px 18px rgba(11,20,28,.18);
}
.hero-material-card strong{letter-spacing:-.02em;}
.hero-material-card a{
  display:inline-flex;align-items:center;gap:6px;
  position:relative;transition:gap .35s var(--h-ease);
}
.hero-material-card a:hover{gap:11px;}

/* sculptural signature row */
.hero-signature{
  border-top:1px solid #c6c8c2;gap:0;
}
.hero-signature span{
  position:relative;padding:2px 20px 0;gap:5px;
}
.hero-signature span:first-child{padding-left:0;}
.hero-signature span+span:before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:#c6c8c2;
}
.hero-signature strong{
  font-size:14px;font-weight:400;letter-spacing:-.01em;
  position:relative;padding-bottom:9px;margin-bottom:4px;
}
.hero-signature strong:after{
  content:"";position:absolute;left:0;bottom:0;width:16px;height:2px;
  background:var(--blue);transition:width .5s var(--h-ease);
}
.hero-signature span:hover strong:after{width:34px;}

/* ghost watermark — readable but subtle */
.hero-brand-ghost{
  opacity:.05;width:640px;left:-120px;bottom:-120px;
}

/* ============================================================
   2. PROOF STRIP
   ============================================================ */
.home-proof-strip{background:#fff;}
.home-proof-strip article{
  transition:background .45s var(--h-ease);position:relative;
}
.home-proof-strip article:after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--blue);transition:width .5s var(--h-ease);
}
.home-proof-strip article:hover{background:#faf9f6;}
.home-proof-strip article:hover:after{width:100%;}
/* icon inside a subtle circular frame */
.h-proof-ico{
  flex:0 0 auto;width:52px;height:52px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#f5f3ee;border:1px solid var(--line);
  transition:border-color .45s var(--h-ease),background .45s var(--h-ease);
}
.home-proof-strip article:hover .h-proof-ico{
  border-color:#bcd4ea;background:#fff;
}
.h-proof-ico img{width:24px;height:24px;object-fit:contain;}
.home-proof-strip strong{font-size:12px;letter-spacing:-.01em;}
.home-proof-strip small{font-size:10px;color:#7a7e78;}

/* ============================================================
   3. FEATURE — editorial big number
   ============================================================ */
.feature{position:relative;overflow:hidden;}
/* clip the big figure to the text column so it can never bleed onto the image */
.feature-copy{position:relative;overflow:hidden;}
.h-feature-figure{
  position:absolute;top:0;right:24px;z-index:0;pointer-events:none;
  max-width:calc(100% - 24px);
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(84px,9vw,138px);letter-spacing:-.04em;
  color:var(--ink);opacity:.05;
}
.feature-copy>*:not(.h-feature-figure){position:relative;z-index:1;}
/* keep small kicker number, hide only if the big figure would duplicate it awkwardly — keep both, small one styled */
.feature-copy .feature-number{color:var(--blue);}

/* refined arrow-slide text link (used across blocks) */
.h-text-link{
  display:inline-flex;align-items:center;gap:9px;overflow:hidden;
}
.h-text-link em{
  font-style:normal;color:var(--blue);
  transition:transform .45s var(--h-ease);will-change:transform;
}
.h-text-link:hover em{transform:translateX(6px);}
.h-text-link span{
  position:relative;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0 1px;transition:background-size .5s var(--h-ease);
}
.h-text-link:hover span{background-size:100% 1px;}

/* ============================================================
   4. STATS — navy gradient + watermark + big thin numbers
   ============================================================ */
.stats-section{
  background:var(--h-navy-grad);position:relative;overflow:hidden;
}
.h-stats-watermark{
  position:absolute;right:-70px;bottom:-90px;width:430px;
  filter:brightness(0) invert(1);opacity:.045;pointer-events:none;z-index:0;
}
.stats-section>.shell{position:relative;z-index:1;}
.stats-grid strong{
  font:200 clamp(40px,4.6vw,68px)/1 var(--serif);
  letter-spacing:-.02em;
}
.stats-grid article{
  transition:border-color .45s var(--h-ease);
}
.stats-grid article:hover{border-right-color:rgba(255,255,255,.45);}

/* ============================================================
   5. PROCESS — equal cards, consistent crops, premium lift
   ============================================================ */
.h-process-card{
  transition:transform .5s var(--h-ease),box-shadow .5s var(--h-ease),border-color .5s var(--h-ease);
}
.h-process-card:hover{
  transform:translateY(-6px);box-shadow:var(--h-shadow-lift);
  border-color:#cfd9e3;
}
/* neutralise inherited .process-card>div padding on the media wrapper */
.process-card>.h-process-media{padding:0;}
.h-process-media{
  position:relative;overflow:hidden;margin:0 0 19px;
  height:214px;background:#e9e4da;
}
.h-process-media img{
  width:100%;height:100%;object-fit:cover;display:block;margin:0;
  transition:transform .7s var(--h-ease);
}
.h-process-card:hover .h-process-media img{transform:scale(1.05);}
@media (min-width:721px){
  .h-process-card{display:flex;flex-direction:column;height:100%;}
  .h-process-card>div:last-child{display:flex;flex-direction:column;flex:1 1 auto;}
  .h-process-card .h-text-link{margin-top:auto;padding-top:14px;}
}

/* ============================================================
   6. CARD GRID — framed crop, gradient scrim, premium hover
   ============================================================ */
.h-space-card{
  transition:transform .5s var(--h-ease),box-shadow .5s var(--h-ease),border-color .5s var(--h-ease);
}
.h-space-card:hover{
  transform:translateY(-6px);box-shadow:var(--h-shadow-lift);border-color:#cfd9e3;
}
.space-card>.h-card-media{padding:0;}
.h-card-media{position:relative;overflow:hidden;background:#e9e4da;}
.h-card-media img{
  display:block;width:100%;height:auto;transition:transform .7s var(--h-ease);
}
.h-space-card:hover .h-card-media img{transform:scale(1.06);}
.h-card-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(11,26,40,.42) 100%);
  opacity:.55;transition:opacity .5s var(--h-ease);
}
.h-space-card:hover .h-card-scrim{opacity:.85;}
.h-space-card h3 a:after{transition:margin-left .4s var(--h-ease);position:relative;}
.h-space-card:hover h3 a:after{margin-left:4px;}

/* ============================================================
   7. GALLERY — mosaic + hover zoom + caption overlay
   ============================================================ */
.h-gallery{
  display:grid;grid-template-columns:1.6fr 1fr;grid-auto-rows:230px;gap:14px;
}
.h-gallery-cell{
  position:relative;overflow:hidden;margin:0;height:100%;background:#e9e4da;
}
.h-gallery-cell:first-child{grid-row:1/3;}
.h-gallery-cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--h-ease);will-change:transform;
}
.h-gallery-cell:hover img{transform:scale(1.06);}
/* always-on scrim gives every tile depth; it deepens on hover to seat the caption */
.h-gallery-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(9,22,34,0) 44%,rgba(9,22,34,.42) 100%);
  opacity:.5;transition:opacity .5s var(--h-ease);
}
.h-gallery-cell:hover .h-gallery-scrim{opacity:.92;}
.h-gallery-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:40px 20px 17px;color:#fff;pointer-events:none;
}
.h-gallery-caption span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.35;
  text-shadow:0 1px 12px rgba(6,16,25,.5);
  transform:translateY(10px);opacity:0;
  transition:opacity .55s var(--h-ease),transform .55s var(--h-ease);
}
.h-gallery-caption span:before{
  content:"";display:block;width:22px;height:2px;background:var(--blue);
  margin-bottom:9px;transform:scaleX(.4);transform-origin:left center;
  transition:transform .55s var(--h-ease);
}
.h-gallery-cell:hover .h-gallery-caption span{opacity:1;transform:translateY(0);}
.h-gallery-cell:hover .h-gallery-caption span:before{transform:scaleX(1);}
/* elegant staggered entrance when the gallery block scrolls into view.
   Gated on .reveal-ready (JS only adds it when motion is enabled) so
   reduced-motion users always see the cells. */
.block-gallery.reveal-ready .h-gallery-cell{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--h-ease),transform .7s var(--h-ease);
}
.block-gallery.is-visible .h-gallery-cell{opacity:1;transform:none;}
.block-gallery.is-visible .h-gallery-cell:nth-child(2){transition-delay:.09s;}
.block-gallery.is-visible .h-gallery-cell:nth-child(3){transition-delay:.18s;}
.block-gallery.is-visible .h-gallery-cell:nth-child(4){transition-delay:.27s;}
.block-gallery.is-visible .h-gallery-cell:nth-child(5){transition-delay:.36s;}

/* ============================================================
   8. CTA + DOWNLOAD — brand moments
   ============================================================ */
.h-cta-panel{
  box-shadow:var(--h-shadow);position:relative;
}
.h-cta-panel .cta-panel-media{overflow:hidden;}
.h-cta-panel .cta-panel-media img{transition:transform .9s var(--h-ease);}
.h-cta-panel:hover .cta-panel-media img{transform:scale(1.04);}
.h-cta-panel .cta-panel-copy h2{letter-spacing:-.02em;}
.h-cta-section .button{padding:15px 22px;}

.h-download-card{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#ece7dd 0%,#e3ddd0 100%);
  border:1px solid var(--line);
  transition:box-shadow .5s var(--h-ease);
}
.h-download-card:hover{box-shadow:var(--h-shadow);}
.h-download-mark{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font-size:150px;line-height:1;font-weight:200;color:var(--ink);
  opacity:.05;pointer-events:none;
}
.h-download-card>div,.h-download-card .button{position:relative;z-index:1;}
.h-download-card h2{letter-spacing:-.02em;}

/* ============================================================
   9. SECTION HEADING — rhythm, eyebrow rule, size contrast
   ============================================================ */
.section-heading .eyebrow{
  display:inline-flex;align-items:center;gap:14px;
}
.section-heading .eyebrow:after{
  content:"";width:46px;height:1px;background:var(--line);display:inline-block;
}
.section-heading h2{letter-spacing:-.035em;line-height:1.02;}
.section-heading p{line-height:1.65;}

/* ============================================================
   10. IMAGE_TEXT, FAQ, TECHNICAL — detail polish
   ============================================================ */
.image-text h2{letter-spacing:-.03em;}
.image-text .eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;
}
.image-text .eyebrow:after{
  content:"";width:38px;height:1px;background:var(--line);
}
.image-text>div:last-child{overflow:hidden;}
.image-text img{transition:transform .9s var(--h-ease);}
.image-text:hover img{transform:scale(1.03);}

/* FAQ */
.faq-section details{
  border-bottom:1px solid var(--line);
  transition:background .4s var(--h-ease);
}
.faq-section summary{
  cursor:pointer;list-style:none;padding:22px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-weight:500;letter-spacing:-.01em;
  transition:color .35s var(--h-ease);
}
.faq-section summary::-webkit-details-marker{display:none;}
.faq-section summary:hover{color:var(--blue);}
.faq-section summary span{
  color:var(--blue);font-weight:300;font-size:20px;flex:0 0 auto;
  transition:transform .45s var(--h-ease);
}
.faq-section details[open] summary span{transform:rotate(45deg);}
.faq-section details>div{padding:0 4px 22px;color:var(--muted);line-height:1.7;max-width:70ch;}

/* Technical table */
.technical-table>div{transition:background .35s var(--h-ease);}
.technical-table>div:hover{background:#faf9f6;}
.technical-table dt{color:var(--blue);}
.technical-layout .eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;
}
.technical-layout .eyebrow:after{
  content:"";width:38px;height:1px;background:var(--line);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .h-feature-figure{font-size:clamp(70px,11vw,104px);top:0;}
}
@media (max-width:900px){
  .h-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:190px;}
  .h-gallery-cell:first-child{grid-row:auto;}
}
@media (max-width:720px){
  .h-hero-accent{margin:20px 0 24px;}
  .home-proof-strip .h-proof-ico{width:44px;height:44px;}
  .home-proof-strip .h-proof-ico img{width:20px;height:20px;}
  .h-feature-figure{top:0;right:6px;opacity:.045;}
  .h-download-mark{font-size:110px;right:14px;opacity:.045;}
  .h-process-card{height:auto;}
  .h-process-media{height:100%;margin:0;}
  .process-card>.h-process-media img{height:100%;}
}
@media (max-width:430px){
  .h-gallery{grid-template-columns:1fr;grid-auto-rows:260px;}
  .h-gallery-caption{opacity:1;transform:none;}
  .hero-signature span+span:before{display:none;}
  .hero-signature span{padding:0 8px 0 0;}
  .hero-signature strong{font-size:12px;}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero-material-card,.hero-material-card a,.hero-signature strong:after,
  .home-proof-strip article,.home-proof-strip article:after,.h-proof-ico,
  .h-text-link em,.h-text-link span,.h-process-card,.h-process-media img,
  .h-space-card,.h-card-media img,.h-card-scrim,.h-gallery-cell img,
  .h-gallery-caption,.cta-panel-media img,.h-download-card,.image-text img,
  .faq-section summary,.faq-section summary span,.faq-section details,
  .technical-table>div,.stats-grid article{
    transition:none!important;animation:none!important;
  }
  .h-gallery-cell:hover img,.h-space-card:hover .h-card-media img,
  .h-process-card:hover .h-process-media img,.image-text:hover img,
  .h-cta-panel:hover .cta-panel-media img{transform:none!important;}
  .h-gallery-caption span,.block-gallery.reveal-ready .h-gallery-cell{
    opacity:1!important;transform:none!important;
  }
  .h-gallery-scrim{transition:none!important;}
}

/* Orchestrator fixes (wave 1 verification) */
/* Wagtail wraps every stream block in a full-width div, so inline-block 33% process cards
   could never sit side by side — lay the stream out as a grid and span everything except process steps. */
@media(min-width:721px){
  .stream-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .stream-content>*{grid-column:1/-1;min-width:0}
  .stream-content>.block-process_step{grid-column:auto}
  .stream-content>.block-process_step .process-wrap{display:block;width:100%;height:100%}
}
/* Hero ghost watermark: quieter on small screens where it sits behind the headline */
@media(max-width:720px){.hero-brand-ghost{opacity:.03}}

/* ============================================================
   WAVE 2 POLISH (agent F homepage-polish)
   ============================================================ */

/* 4 · IMAGE_TEXT — give the flat white panel material depth:
   matted hairline frame, eyebrow accent, faint domain-mark watermark,
   a calmer type rhythm on the body copy. */
.h-imgtext-panel{position:relative;overflow:hidden;isolation:isolate;}
.h-imgtext-panel:before{
  content:"";position:absolute;left:24px;top:24px;right:24px;bottom:24px;
  border:1px solid var(--line);pointer-events:none;z-index:0;opacity:.75;
}
.h-imgtext-mark{
  position:absolute;right:-46px;bottom:-40px;width:250px;height:auto;
  opacity:.05;pointer-events:none;z-index:0;
}
.h-imgtext-panel>*{position:relative;z-index:1;}
.h-imgtext-panel .eyebrow{margin-bottom:18px;}
.h-imgtext-panel h2{margin-bottom:20px;}
.h-imgtext-body{
  color:var(--muted);line-height:1.78;max-width:48ch;
}
.h-imgtext-body p{margin-bottom:16px;}
.h-imgtext-body p:last-child{margin-bottom:0;}
.h-imgtext-panel .button{margin-top:30px;}

/* 6 · SECTION HEADING — when a block has no side text, the 1.4/.6 grid
   leaves a dead right column and the heading floats. Collapse to one
   column so the heading fills the row (needs :has, widely supported). */
@media(min-width:721px){
  .section-heading .shell:not(:has(p:not(.eyebrow))){grid-template-columns:1fr;}
  .section-heading .shell:not(:has(p:not(.eyebrow))) h2{grid-column:1/-1;}
}

/* 5 · MOBILE 390 polish */
@media(max-width:430px){
  /* hero signature: keep the three-up legible */
  .hero-signature span{font-size:9px;}
  .hero-signature strong{font-size:13px;}
  /* stats: numbers were dominating the two-up grid */
  .stats-grid strong{font-size:36px;margin-bottom:8px;}
  .stats-grid h3{font-size:11px;}
  /* gallery: tighter, taller single-column crops */
  .h-gallery{gap:10px;grid-auto-rows:242px;}
  .h-gallery-caption{padding:30px 16px 15px;}
  /* image_text panel: pull the matted frame in on small screens */
  .h-imgtext-panel:before{left:16px;top:16px;right:16px;bottom:16px;}
  .h-imgtext-mark{width:190px;right:-34px;bottom:-30px;}
  .h-imgtext-body{max-width:none;line-height:1.72;}
  /* process card (horizontal 120px media) — keep crop clean, not squashed */
  .h-process-media{min-height:118px;}
}

/* ============================================================
   WAVE 7 · BLOCKS-POLISH (agent I) — appended overrides.
   Everything above is untouched; these win by cascade order / specificity.
   ============================================================ */

/* 1 · IMAGE_TEXT WATERMARK — fix the giant cropped "a".
   Root cause: the global reset `img{width:100%;object-fit:cover}` plus
   `.image-text img{height:100%;min-height:500px}` (both out-specify the single-class
   .h-imgtext-mark) forced the very wide ~9.4:1 domain wordmark into a tall 250x500 box;
   object-fit:cover then scaled it to cover and cropped it down to one blown-up glyph.
   Reset the box to the SVG's own aspect ratio: real width, auto height, no cover,
   no inherited min-height, so the full "stramapanels.com" mark shows discreetly. */
.h-imgtext-panel .h-imgtext-mark{
  width:216px;height:auto;min-height:0;max-width:none;
  left:auto;top:auto;right:34px;bottom:28px;
  object-fit:contain;opacity:.05;
}
@media(max-width:720px){
  .h-imgtext-panel .h-imgtext-mark{width:184px;right:26px;bottom:22px;}
}
@media(max-width:430px){
  /* narrowest panels: keep the wordmark tucked in the corner, clear of copy/CTA */
  .h-imgtext-panel .h-imgtext-mark{width:150px;right:20px;bottom:16px;opacity:.045;}
}

/* 2 · CARD_GRID SCRIM — the media scrim darkened the bottom of every image even though
   each card's text lives in a separate div below it (no overlaid caption to protect).
   On the light "Poznaj nasze systemy" architect photos the navy gradient read as a dirty
   grey band across the bottom. Soften it to a faint grounding vignette on the very edge. */
.h-card-scrim{
  background:linear-gradient(180deg,transparent 64%,rgba(11,26,40,.16) 100%);
  opacity:.5;
}
.h-space-card:hover .h-card-scrim{opacity:.8;}