/* industrial.storks.si — page-specific components layered on css/site.css */
  /* industrial.storks.si - page-specific components layered on css/site.css */

  /* Hero photo legibility veil (drop a real hall photo into .hero-photo img later) */
  .page-hero.has-bg > .hero-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14,15,12,0.55) 0%, rgba(14,15,12,0.20) 34%, rgba(14,15,12,0.35) 60%, rgba(14,15,12,0.82) 100%);
  }
  /* Slow Ken Burns zoom on the hero photo */
  .page-hero.has-bg > .hero-photo img { transform-origin: 62% 45%; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: heroZoom 30s ease-in-out infinite alternate; animation: heroZoom 30s ease-in-out infinite alternate; }
  @media (prefers-reduced-motion: reduce) { .page-hero.has-bg > .hero-photo img { -webkit-animation: none; animation: none; -webkit-transform: none; transform: none; } }
  /* Striped placeholder used until real industrial photography is supplied */
  .ph {
    position: relative; width: 100%; height: 100%;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 14px, rgba(255,255,255,0.015) 14px 28px),
      linear-gradient(180deg, #1a1c17 0%, #0e0f0c 100%);
    display: flex; align-items: flex-end; justify-content: flex-start;
  }
  .ph .ph-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding: 14px 16px; margin: 18px;
    border: 1px dashed rgba(255,255,255,0.22);
    background: rgba(14,15,12,0.35);
  }

  /* Hero CTA buttons on dark hero */
  .hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 48px; }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 15px 26px; border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    transition: opacity .2s ease, background .2s ease, color .2s ease;
  }
  .hero-cta.primary { background: #fafaf8; color: #0e0f0c; }
  .hero-cta.primary:hover { opacity: 0.88; }
  .hero-cta.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
  .hero-cta.ghost:hover { background: rgba(255,255,255,0.1); }

  /* SEO/LLM summary - shared definition list */
  .deflist { border-top: 1px solid var(--line); }
  .deflist > div {
    display: grid; grid-template-columns: 210px 1fr; gap: 28px;
    padding: 22px 0; border-bottom: 1px solid var(--line);
  }
  .deflist dt {
    margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fg-soft); padding-top: 4px;
  }
  .deflist dd { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
  .summary-lead .deflist dd { font-size: 19px; }
  @media (max-width: 680px) {
    .deflist > div { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
    .deflist dt { padding-top: 0; }
    .deflist dd { font-size: 16px; }
  }

  /* Industry (Panoge) card grid, numbered 01-08 */
  .ind-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    counter-reset: ind;
  }
  .ind-grid > article { background: var(--bg); padding: 40px 36px; counter-increment: ind; }
  .ind-grid > article .n {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    letter-spacing: 0.2em; color: var(--fg-softer);
  }
  .ind-grid > article .n::before { content: counter(ind, decimal-leading-zero); }
  .ind-grid > article h4 {
    font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: -0.015em;
    font-size: 22px; margin: 18px 0 14px; line-height: 1.2;
  }
  .ind-grid > article ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
  .ind-grid > article li {
    position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--fg-soft);
  }
  .ind-grid > article li::before {
    content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--fg-softer);
  }
  @media (max-width: 760px) { .ind-grid { grid-template-columns: 1fr; } .ind-grid > article { padding: 32px 24px; } }

  /* Two-column comparison card (stisnjen zrak vs visokotlačno) */
  .vs-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line); border: 1px solid var(--line); margin-top: 8px;
  }
  .vs-card > div { background: var(--bg); padding: 40px 36px; }
  .vs-card > div.win { background: var(--paper); }
  .vs-card .vs-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-softer);
  }
  .vs-card h3 {
    font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: -0.02em;
    font-size: clamp(24px, 2.2vw, 30px); margin: 14px 0 24px; line-height: 1.1;
  }
  .vs-card dl { margin: 0; display: grid; gap: 0; }
  .vs-card dl > div { padding: 16px 0; border-top: 1px solid var(--line); }
  .vs-card dt {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-softer); margin: 0 0 6px;
  }
  .vs-card dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg); }
  @media (max-width: 760px) { .vs-card { grid-template-columns: 1fr; } .vs-card > div { padding: 32px 24px; } }

  /* 3-column energy comparison table */
  .cmp-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  .cmp-table th, .cmp-table td {
    text-align: left; padding: 20px 20px; border-top: 1px solid var(--line); vertical-align: top;
    font-size: 15px; line-height: 1.5;
  }
  .cmp-table thead th {
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 17px; letter-spacing: -0.01em;
    color: var(--fg); border-top: 0;
  }
  .cmp-table thead th .sub {
    display: block; margin-top: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-softer);
  }
  .cmp-table tbody th {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); font-weight: 400; width: 22%;
  }
  .cmp-table td { color: var(--fg-soft); }
  .cmp-table col.win, .cmp-table .win { background: var(--paper); }
  .cmp-table td.win { color: var(--fg); }
  .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); }
  @media (max-width: 720px) { .cmp-table { min-width: 640px; } }

  /* Callout box for the energy math */
  .callout {
    margin-top: 40px; padding: 40px; background: var(--fg); color: #fafaf8;
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  }
  .callout .eyebrow { color: rgba(255,255,255,0.55); display: block; margin-bottom: 16px; }
  .callout .math { font-family: 'Inter', sans-serif; font-weight: 200; letter-spacing: -0.02em; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
  .callout .math strong { font-weight: 400; }
  .callout .math .lo { color: rgba(255,255,255,0.55); }
  .callout p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.8); text-wrap: pretty; }
  @media (max-width: 760px) { .callout { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; } }

  /* Hygiene sub-block inside Tehnologija */
  .hygiene {
    margin-top: 60px; padding: 44px; background: var(--paper); border: 1px solid var(--line);
  }
  .hygiene .eyebrow { display: block; margin-bottom: 18px; }
  .hygiene h3 { font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 38px); margin: 0 0 12px; }
  .hygiene .lead { font-size: clamp(16px, 1.05vw, 17px); line-height: 1.65; color: var(--fg); max-width: 62ch; margin: 0; text-wrap: pretty; }
  .hygiene-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
  .hygiene-specs > div { background: var(--bg); padding: 26px 22px; }
  .hygiene-specs .hs-v { font-family: 'Inter', sans-serif; font-weight: 200; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
  .hygiene-specs .hs-l { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-softer); margin-top: 12px; line-height: 1.4; }
  @media (max-width: 760px) { .hygiene { padding: 32px 24px; } .hygiene-specs { grid-template-columns: 1fr 1fr; } }

  /* Manufacturer trust card highlight */
  .feature-grid .ix.accent { color: var(--accent); }
  @supports not (color: oklch(50% 0 0)) { .feature-grid .ix.accent { color: #8aadbe; } }

  /* Contact promise line */
  .ind-promise { font-size: 14px; line-height: 1.7; color: rgba(244,242,236,0.75); margin-top: 24px; max-width: 46ch; }
  .ind-promise strong { color: #fff; font-weight: 400; }

  /* System chip group — same look as .quote-dark .chip but ignored by shared JS */
  .quote-dark .chip-sys {
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(244,242,236,0.25); background: transparent;
    color: rgba(244,242,236,0.75); font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.02em; cursor: pointer; transition: all .2s ease;
  }
  .quote-dark .chip-sys:hover { border-color: rgba(244,242,236,0.5); }
  .quote-dark .chip-sys[aria-pressed="true"] { background: var(--bg); color: var(--fg); border-color: var(--bg); }

  /* Taller file-drop to match reference */
  #quote-form .qf-drop:not(.has-files) {
    min-height: 300px; display: flex; align-items: center; justify-content: center;
  }
  #quote-form #qf-files[hidden] { display: none !important; }

  /* FAQ "Prikaži več" - hover-expand */
  .why-more--faq-more { max-width: 100%; cursor: pointer; }
  .why-more--faq-more .why-cue {
    margin-top: 0; padding: 24px 0; display: block; max-height: none; overflow: visible; opacity: 1;
    border-top: 1px solid var(--line);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--fg-soft); transition: color .2s ease;
  }
  .why-more--faq-more:hover .why-cue, .why-more--faq-more:focus-visible .why-cue { color: var(--fg); }
  .lang-drop a[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

  /* Hero ken-burns zoom (horeca.storks.si pattern) — slow continuous zoom-in.
     Applied on the base rule above so iOS/iPadOS (which may not match
     prefers-reduced-motion: no-preference) still animates. */

  /* Transparent header over the hero photo (storksarch.com pattern) — see the picture
     through the top menu, then fade to the solid light bar once scrolled past the hero. */
  body:not(.hdr-solid) .site-header {
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body:not(.hdr-solid) .site-header .brand-logo { filter: brightness(0) invert(1); }
  body:not(.hdr-solid) .site-header .nav-link { color: rgba(255,255,255,0.82); }
  body:not(.hdr-solid) .site-header .nav-link:hover { color: #fff; }
  body:not(.hdr-solid) .site-header .lang-toggle { color: #fff; }
  body:not(.hdr-solid) .site-header .lang-toggle svg { color: #fff; }
  body:not(.hdr-solid) .site-header .pill {
    background: #0e0f0c;
    border: 1px solid #0e0f0c;
    color: #fff;
  }
  body:not(.hdr-solid) .site-header .pill:hover { background: #000; }

  /* Hero stat strip: spread the 4 stats full width with divider lines between (like the ref) */
  .page-hero.has-bg .meta-row { gap: 0; justify-content: stretch; }
  .page-hero.has-bg .meta-row > div {
    flex: 1 1 0; min-width: 0; padding: 4px 32px;
    border-left: 1px solid rgba(255,255,255,0.22);
  }
  .page-hero.has-bg .meta-row > div:first-child { padding-left: 0; border-left: 0; }
  .page-hero.has-bg .meta-row > div:last-child { padding-right: 0; }
  @media (max-width: 760px) {
    .page-hero.has-bg .meta-row > div { flex: 1 1 calc(50% - 1px); padding: 4px 18px; }
    .page-hero.has-bg .meta-row > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  }
  .site-header { transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
  /* Scrolled state: whiter but still slightly translucent */
  body.hdr-solid .site-header { background: rgba(250,250,248,0.82); }
  /* Stop the hero ken-burns zoom once the user scrolls past the hero */
  body.hero-passed .page-hero.has-bg > .hero-photo img { -webkit-animation-play-state: paused; animation-play-state: paused; }

  /* Spread the nav across the full width, from the logo to the language menu / CTA */
  @media (min-width: 1025px) {
    .site-header .site-nav { flex: 1 1 auto; justify-content: space-between; margin-left: clamp(40px, 6vw, 96px); gap: 24px; }
  }
  @keyframes heroZoom {
    from { -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); }
    to   { -webkit-transform: translateZ(0) scale(2); transform: translateZ(0) scale(2); }
  }

  /* Full-content topics nested inside the FAQ section */
  .faq-topic { margin-top: 80px; padding-top: 72px; border-top: 1px solid var(--line); }
  .faq-topic .map-eyebrow-row { margin-bottom: 40px; }


/* One system — video embed (padding-top fallback for older iOS/Android WebViews without aspect-ratio) */
.video-embed {
  position: relative; width: 100%; height: 0; padding-top: 56.25%;
  background: #0e0f0c; margin-bottom: 48px; overflow: hidden;
}
@supports (aspect-ratio: 16 / 9) {
  .video-embed { height: auto; padding-top: 0; aspect-ratio: 16 / 9; }
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ===== Cross-device (desktop / Android / iOS, phone + tablet) ===== */

/* Smooth momentum scroll for the horizontally scrollable comparison table (iOS) */
.cmp-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* Hero CTAs: comfortable touch targets, full-width on small phones */
@media (hover: none) and (pointer: coarse) {
  .hero-cta { min-height: 48px; }
}
@media (max-width: 480px) {
  .hero-cta-row { gap: 10px; }
  .hero-cta { width: 100%; justify-content: center; }
}

/* FAQ nested topics: tighter rhythm on phones */
@media (max-width: 640px) {
  .faq-topic { margin-top: 56px; padding-top: 48px; }
  .faq-topic .map-eyebrow-row { margin-bottom: 28px; }
  .video-embed { margin-bottom: 32px; }
}

/* Hygiene spec chips: 2 cols on phones, 1 col on very small screens */
@media (max-width: 380px) {
  .hygiene-specs { grid-template-columns: 1fr; }
}

/* Tablet portrait: industry grid stays 2-up but with tighter padding */
@media (min-width: 761px) and (max-width: 1024px) {
  .ind-grid > article { padding: 32px 28px; }
}

/* iOS: prevent auto-zoom on form focus (inputs must be >=16px) */
@supports (-webkit-touch-callout: none) {
  .quote-dark input, .quote-dark select, .quote-dark textarea { font-size: 16px; }
}

/* Ken-burns zoom: skip on touch devices to save battery/GPU on long mobile sessions */
@media (hover: none) and (pointer: coarse) {
  .page-hero.has-bg > .hero-photo img { -webkit-animation-duration: 30s; animation-duration: 30s; }
}

/* "Področja uporabe" — stack each area link on its own row (like the POVEZAVE list) */
.contact-line--wide .contact-areas { flex-direction: column; flex-wrap: nowrap; gap: 10px; align-items: flex-start; }
@media (max-width: 760px) { .contact-line--wide .contact-areas { gap: 10px; } }