/*
  Products — szerelvenygyartas.html only. Intro block (eyebrow/title/
  divider/paragraph, matching .about's text-block pattern) plus a
  certification badge + feature-pill row, a 4-card product grid, and a
  closing CTA band. Copy throughout is sourced verbatim/near-verbatim from
  slides 11-27 of assets/design/BRUNNBAUER-Budapest_intro_HU.pptx (the
  Brunnbauer-specific manufacturing slides), condensed rather than
  duplicating the homepage mindset section's full 8-card breakdown.
*/

.product-intro {
  background: var(--color-white);
  padding-block: var(--space-9);
}

.product-intro__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  gap: var(--space-8);
}

.product-intro__eyebrow {
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-intro__title {
  margin-top: var(--space-3);
  max-width: 760px;
}

.product-intro__divider {
  width: 56px;
  height: 3px;
  margin-top: var(--space-5);
  background: var(--color-red-600);
  border-radius: 2px;
}

.product-intro__lead {
  max-width: 760px;
  margin-top: var(--space-5);
}

.product-intro__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.product-intro__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* 3-per-row variant — for pages with a pill count that reads better as
   3+2 than 4+1 (szerviz.html's 5 pills). Opt-in only, the default stays
   4-per-row for every other page reusing .product-intro__features. Uses
   the same flex-wrap + justify-content: center technique as
   certifications.css's .cert-card grid (not a plain grid) so an uneven
   last row centers under the row above it instead of sitting left-aligned
   with a dangling empty column. */
.product-intro__features--thirds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-intro__features--thirds .product-intro__feature {
  flex: 0 1 calc(33.333% - var(--space-4) * 2 / 3);
}

.product-intro__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: #b4c7e7; /* one-off light navy blue, same literal used for .products__card-body */
  /* Diagonal pair, same convention as .products__card
     / .product-intro__gallery-item, not the generic uniform radius. */
  border-radius: 24px 0 24px 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  color: var(--color-navy-900);
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);
}

/* Lift-only hover, no deepened shadow — per explicit user instruction,
   unlike .capabilities__cert:hover / .cert-card:hover elsewhere on the
   site, which also darken the shadow. */
.product-intro__feature:hover {
  transform: translateY(-4px);
}

.product-intro__feature:active {
  transform: translateY(-1px);
}

.product-intro__feature-icon {
  flex-shrink: 0;
  /* border-box (site-wide reset): 44px box, 12px padding on each side
     leaves a 20px icon centered in the circle — padding alone (with a
     22px box) would leave zero content area for the image. */
  width: 44px;
  height: 44px;
  padding: var(--space-3);
  background: var(--color-white);
  border-radius: 50%;
  object-fit: contain;
}

/* Glyph spin on hover, same technique as .mindset__icon--spinning
   (mindset.css): JS (main.js) adds this class on mouseenter rather than a
   plain :hover selector, so pulling the cursor away mid-spin doesn't cut
   the animation short — it always plays to completion, then main.js
   removes the class on `animationend`. Animates the standalone `rotate`
   property so the white circle background (baked into this same element,
   unlike mindset's separate icon/glyph split) never visibly "un-rounds" —
   a circle rotating around its own center reads as static. */
.product-intro__feature-icon--spinning {
  animation: product-intro-feature-icon-spin 1.4s var(--ease-spring);
}

@keyframes product-intro-feature-icon-spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

/* ---- Gallery (bento: one tall tile + two stacked) ---- */
.product-intro__gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-3);
}

.product-intro__gallery-item {
  position: relative;
  overflow: hidden;
  /* Reset <button> chrome — these tiles are buttons (lightbox trigger),
     not divs, so they need appearance stripped back to the plain tile
     look the gallery already had. */
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  /* Same diagonal pair as .about__media, applied to every tile rather
     than just the tall one so the gallery reads as one consistent shape
     language. */
  border-radius: 24px 0 24px 0;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);
}

.product-intro__gallery-item--tall {
  grid-row: 1 / 3;
}

.product-intro__gallery-item:hover,
.product-intro__gallery-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.product-intro__gallery-item:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}

.product-intro__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-spring);
}

.product-intro__gallery-item:hover img,
.product-intro__gallery-item:focus-visible img {
  transform: scale(1.08);
}

.product-intro__gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy-900);
  opacity: 0.15;
  mix-blend-mode: multiply;
}

.product-intro__gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29, 47, 66, 0.5), rgba(29, 47, 66, 0) 55%);
}

/*
  Bento variant — one wide tile on top, two square tiles stacked below
  (matches rolunk.css's .company-group__gallery), instead of the default
  tall-left/stacked-right arrangement above. Added 2026-09-05 for
  referenciaink.html (originally scoped to that page's own
  references-page.css), moved here 2026-09-06 once szerviz.html adopted
  it too — apply both modifier classes together so the shared default
  layout stays untouched for every page that doesn't opt in
  (szerelvenygyartas.html, leser-termekek.html). Tiles keep every bit of
  .product-intro__gallery-item's own behavior (lightbox trigger,
  hover-zoom, overlay) — only the grid arrangement/sizing changes.
*/
.product-intro__inner--bento {
  align-items: center;
}

.product-intro__gallery--bento {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.product-intro__gallery--bento .product-intro__gallery-item {
  aspect-ratio: 4 / 3;
}

.product-intro__gallery--bento .product-intro__gallery-item--wide {
  grid-column: 1 / 3;
  grid-row: 1;
  aspect-ratio: 2 / 1;
}

@media (max-width: 768px) {
  .product-intro__gallery--bento {
    min-height: 0;
  }
}

/* ---- Product grid ---- */
.products {
  background: var(--color-surface);
  padding-block: var(--space-9);
}

.products__eyebrow {
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.products__title {
  margin-top: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.products__divider {
  width: 56px;
  height: 3px;
  margin-top: var(--space-5);
  margin-inline: auto;
  background: var(--color-red-600);
  border-radius: 2px;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.products__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  /* Diagonal pair (top-left/bottom-right), matching .about__media
     rather than the site's default uniform radius. */
  border-radius: 24px 0 24px 0;
  box-shadow: var(--shadow-md);
  /* Cards link to a product detail subpage — reset anchor chrome so the
     link reads as the same card it always was. */
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);
}

.products__card:hover,
.products__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.products__card:focus-visible {
  outline: 2px solid var(--color-red-600);
  outline-offset: 2px;
}

.products__card:active {
  transform: translateY(-1px);
}

.products__card-media {
  position: relative;
  /* Square, not 16:9 — most of this grid's photos are portrait studio
     product shots (individual valves), not wide field/workshop shots, so
     a square crop keeps more of each valve in frame than a wide box would. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.products__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-spring);
}

.products__card:hover .products__card-media img {
  transform: scale(1.08);
}

.products__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29, 47, 66, 0.55), rgba(29, 47, 66, 0) 55%);
}

.products__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-6);
  background: #b4c7e7; /* one-off light blue, same literal used for .product-intro__feature */
  border: none;
}

.products__card-title {
  color: var(--color-navy-900);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.35;
}

.products__card-lead {
  margin-top: var(--space-3);
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.products__card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.products__card-specs li {
  padding: var(--space-1) var(--space-3);
  background: var(--color-slate-100);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-navy-900);
}

/* ---- Small desktop / large tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-intro__features {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-intro__features--thirds .product-intro__feature {
    flex: 0 1 calc(50% - var(--space-4) / 2);
  }
}

/* ---- Tablet / mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .product-intro,
  .products {
    padding-block: var(--space-8);
  }

  .product-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .product-intro__gallery {
    min-height: 320px;
  }

  .product-intro__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-intro__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile (<= 560px) ---- */
@media (max-width: 560px) {
  .products__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .product-intro__features {
    grid-template-columns: 1fr;
  }

  .product-intro__features--thirds .product-intro__feature {
    flex: 1 1 100%;
  }
}