/*
  Mindset section — matches references/home/4, mindset/mindset.png, a full
  export of slide 12 of the Brunnbauer intro deck ("Gyártási szemléletünk").
  Like capabilities, this is Brunnbauer's own slide (not a sibling-company
  reskin), so its copy is kept verbatim.

  Background photo + navy overlay (originally photo-valve-handwheels-
  reflection, matching capabilities' own background — confirmed via pptx
  extraction, slide12.xml.rels rId3 -> ../media/image18.jpeg) were removed
  per explicit user instruction, then the flat navy fallback that briefly
  replaced them was itself swapped to white per an immediate follow-up.
  Eyebrow/title flipped from white/slate-200 to navy-900/slate-600 to stay
  readable on the new light background (same colors about.css's headline
  block uses on its own white section).

  Icon circles are solid red (not the translucent red used in capabilities'
  tags/photo-rings) — this reference's circles read as opaque, a deliberate
  difference from capabilities' own deviation.
*/

.mindset {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9);
  background: var(--color-white);
}

/* Small red rounded quarter-circle hugging the top-left corner, per the
   reference — decorative slide chrome that IS part of the visible design
   (unlike the slide's logo lockup, which is excluded as duplicate header
   chrome), so it's reproduced literally as a plain CSS shape. */
.mindset__corner-accent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-base);
  width: clamp(48px, 6vw, 88px);
  height: clamp(48px, 6vw, 88px);
  /* Opacity tuned 65% -> 75% -> 100% across three explicit follow-ups;
     at full opacity there's no alpha to carry, so this is back to the
     plain token rather than an rgba() literal. */
  background: var(--color-red-600);
  border-radius: 0 0 100% 0;
}

.mindset__inner {
  position: relative;
  z-index: var(--z-elevated);
}

.mindset__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;
}

.mindset__title {
  margin-top: var(--space-3);
  max-width: 720px;
  margin-inline: auto;
  color: var(--color-navy-900);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

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

/* ---- 2-column x 4-row item grid ---- */
.mindset__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-8);
}

.mindset__item {
  --icon-size: clamp(64px, 7vw, 88px);
  display: flex;
  align-items: center;
}

.mindset__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  width: var(--icon-size);
  height: var(--icon-size);
  background: #a02117; /* one-off darker red per explicit user color pick, not var(--color-red-600) */
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  /* Card's left edge lands exactly on the circle's horizontal center, per
     explicit user instruction — half the icon's own width, not a fixed
     spacing value, so the overlap scales with --icon-size at every
     breakpoint. */
  margin-right: calc(-1 * var(--icon-size) / 2);
}

.mindset__icon img {
  width: 44%;
  height: 44%;
  object-fit: contain;
}

/* The only double-chevron glyph in the shape library points left (rewind);
   the reference shows it pointing right (fast-forward), so it's mirrored. */
.mindset__icon--mirrored img {
  transform: scaleX(-1);
}

.mindset__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Matches the icon circle's height, per explicit user instruction — a
     min-height (not a hard height) so a card whose two-line description
     needs more room can still grow instead of clipping text. */
  min-height: var(--icon-size);
  padding-block: var(--space-3);
  padding-right: var(--space-5);
  /* Left padding grows with the icon overlap (half the icon's width) so
     the title/text keep the same visual x-position they had before the
     card was extended left to the circle's center — only the card's own
     background/edge moved, not its text, per explicit user instruction. */
  padding-left: calc(var(--icon-size) / 2 + var(--space-2));
  background: #b4c7e7; /* one-off light blue, same literal already used for the capabilities cert box */
  /* Rounded on bottom-right only, per explicit user instruction (order:
     top-left, top-right, bottom-right, bottom-left — top-left was dropped
     in a follow-up). Literal 24px, not var(--radius-lg) (32px, shared with
     capabilities__card) — tuned down specifically for this section. */
  border-radius: 0 0 24px 0;
  box-shadow: var(--shadow-md);
}

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

.mindset__card-text {
  margin-top: var(--space-1);
  color: var(--color-navy-900);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: 1.4;
}

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

  .mindset__grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    gap: var(--space-5);
  }
}

/* ---- Mobile (<= 480px) ---- */
@media (max-width: 480px) {
  .mindset__item {
    align-items: flex-start;
    --icon-size: 56px;
  }
}