/* ── Home Values block ───────────────────────────────────────────── */
/* A heart-shaped (3 / 2 / 1) arrangement of diamond tiles holding
   value icons, paired with a side heading on a colored background.

   The diamond shape is achieved with clip-path (no rotation needed),
   so icons remain upright. Tiles are placed on a 6-column × 4-row
   grid where each tile spans 2 × 2 cells; offset rows produce the
   half-step shift that gives the cluster its heart silhouette. */

.home-values {
  position: relative;
  color: #fff;
  font-family: var(--wp--preset--font-family--core-rhino);
  font-weight: 700;
  --hv-tile: 100px;
  --hv-gap: 8px;
  /* Base "gap" scale precomputed as a unitless ratio (1 - 2*gap/tile).
     Avoids dividing length-by-length in calc(), which Firefox rejects
     and would invalidate the whole transform (no gaps, tiny popup). */
  --tile-base-scale: 0.84;
}

/* Edge-to-edge colored background via pseudo-element so the block
   itself stays inside the constrained layout (no horizontal scroll). */
.home-values::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: var(--wp--preset--color--primary, #d96231);
  z-index: -1;
}

@media (min-width: 480px) {
  .home-values { --hv-tile: 130px; --tile-base-scale: 0.877; }
}

@media (min-width: 768px) {
  .home-values { --hv-tile: 160px; --tile-base-scale: 0.9; }
}

@media (min-width: 1280px) {
  .home-values { --hv-tile: 190px; --tile-base-scale: 0.916; }
}

/* ── Section layout (CSS-owned; not Tailwind-dependent) ──────────── */

.home-values__inner {
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

@media (min-width: 768px) {
  .home-values__inner {
    flex-direction: row;
    gap: 3rem;
  }
}

@media (min-width: 1536px) {
  .home-values__inner { padding-inline: 5rem; }
}

/* ── Grid layout for the 6 diamond tiles ─────────────────────────── */

.home-values__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, calc(var(--hv-tile) / 2));
  grid-template-rows:    repeat(4, calc(var(--hv-tile) / 2));
  width: calc(var(--hv-tile) * 3);
  height: calc(var(--hv-tile) * 2);
  flex-shrink: 0;
  /* Keep the grid (and the active card that overflows it to the right on
     large screens) above the desktop heading, so the card covers it. */
  z-index: 1;
}

.home-values__tile {
  /* Reset native button look */
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;

  position: relative;
  width: var(--hv-tile);
  height: var(--hv-tile);
  background-color: #fff;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

  /* font-size is compensated against the active scale so descriptions
     read at a normal size when the tile is enlarged. */
  font-size: calc(var(--hv-tile) * 0.035);

  /* Interaction transforms layered on top of the base "gap" scale */
  --tile-rotate: 0deg;
  --tile-translate-x: 0px;
  --tile-translate-y: 0px;
  /* --tile-base-scale is set on .home-values per breakpoint (see top). */
  --tile-hover-scale: 1;
  transform-origin: center;
  transform:
    translate(var(--tile-translate-x), var(--tile-translate-y))
    rotate(var(--tile-rotate))
    scale(calc(var(--tile-base-scale) * var(--tile-hover-scale)));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-values__tile:focus-visible {
  outline: 2px dashed #fff;
  outline-offset: 4px;
}

.home-values__tile--1 { grid-area: 1 / 1 / span 2 / span 2; }
.home-values__tile--2 { grid-area: 1 / 3 / span 2 / span 2; }
.home-values__tile--3 { grid-area: 1 / 5 / span 2 / span 2; }
.home-values__tile--4 { grid-area: 2 / 2 / span 2 / span 2; }
.home-values__tile--5 { grid-area: 2 / 4 / span 2 / span 2; }
.home-values__tile--6 { grid-area: 3 / 3 / span 2 / span 2; }

/* ── Icon glyphs inside each diamond ─────────────────────────────── */

/* Row holding the icon and (on the open card) the label to its right.
   Collapsed: shrinks to the icon and is centred in the diamond by the
   tile. Active: stretches full width so the icon sits left and the label
   sits immediately to its right. */
.home-values__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-values__icon {
  display: block;
  /* Length-based (not %) so the icon keeps its size when wrapped in the
     shrink-to-fit head row. Scales with the tile size per breakpoint. */
  width: calc(var(--hv-tile) * 0.45);
  height: calc(var(--hv-tile) * 0.45);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.home-values__icon {
  flex-shrink: 0;
  transition: width 0.4s ease, height 0.4s ease;
}

.home-values__icon.icon-value-1 { background-image: url('../../assets/home/values/1.svg?v=2'); }
.home-values__icon.icon-value-2 { background-image: url('../../assets/home/values/2.svg?v=2'); }
.home-values__icon.icon-value-3 { background-image: url('../../assets/home/values/3.svg?v=2'); }
.home-values__icon.icon-value-4 { background-image: url('../../assets/home/values/4.svg?v=2'); }
.home-values__icon.icon-value-5 { background-image: url('../../assets/home/values/5.svg?v=2'); }
.home-values__icon.icon-value-6 { background-image: url('../../assets/home/values/6.svg?v=2'); }

.home-values__icon.icon-value-2,
.home-values__icon.icon-value-3,
.home-values__icon.icon-value-6 { background-size: 70%; }

/* ── Inline popup content (lives inside the tile) ────────────────── */
/* Hidden by default; revealed when the tile becomes .is-active.    */

.home-values__label {
  /* Taken out of flow while collapsed so it never shifts the centred icon
     inside the diamond; returned to normal flow on .is-active so it sits
     in the head row to the right of the icon. */
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-align: left;
  cursor: help;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.home-values__desc {
  margin: 0.6em 0 0;
  font-size: 1em;
  width: 100%;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.home-values__close-mark {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 1.6em;
  height: 1.6em;
  color: #1a1a1a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.2s ease;
}

.home-values__close-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Heading (overrides theme h2 color/weight, owns its own size) ── */

.home-values .home-values__heading {
  margin: 0;
  color: #fff;
  font-family: var(--wp--preset--font-family--core-rhino);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-size: 1.875rem;
}

@media (min-width: 768px) {
  .home-values .home-values__heading { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .home-values .home-values__heading { font-size: 3rem; }
}

/* Mobile heading: top-left; Desktop heading: bottom-right */

.home-values__heading--mobile {
  align-self: flex-start;
  display: block;
}

.home-values__heading--desktop {
  display: none;
}

@media (min-width: 768px) {
  .home-values__heading--mobile { display: none; }

  .home-values__heading--desktop {
    display: block;
    align-self: flex-end;
    max-width: 16rem;
  }
}

/* ── Scroll-triggered entrance animation ─────────────────────────── */

.home-values__tile {
  opacity: 0;
  transition:
    opacity   1.55s ease,
    transform 1.6s  cubic-bezier(.4, 1.4, .5, 1),
    filter    1.4s  ease,
    clip-path 1.55s ease;
  transition-delay: calc(var(--item-index, 0) * 0.1s), 0s, 0s, 0s;
}

.home-values.is-visible .home-values__tile {
  opacity: 1;
}

/* ── Hover / active "pop-out" interaction ────────────────────────── */
/* clip-path masks box-shadow, so use drop-shadow filter instead. */

@media (hover: hover) {
  .home-values__tile:hover {
    --tile-hover-scale: 1.04;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
    z-index: 2;
  }
}

/* ── Active state: tile spins, grows, morphs into a card ──────────── */
/* The active tile IS the popup — the description, icon, and close
   mark all live inside the same <button> element. The transition
   combines a full 360° spin, a big scale-up, and a clip-path morph
   from diamond → rectangle so the card emerges from the diamond. */

.home-values__tile.is-active {
  --tile-rotate: 360deg;
  --tile-hover-scale: 2.4;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 5;

  /* Re-flow inner content as a card: icon top-left, description below. */
  align-items: flex-start;
  justify-content: flex-start;
  padding: 9% 10%;

  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}

.home-values__tile.is-active .home-values__head {
  width: 100%;
  justify-content: flex-start;
  gap: 0.6em;
  margin: 6% 0;
}

.home-values__tile.is-active .home-values__icon {
  width: calc(var(--hv-tile) * 0.22);
  height: calc(var(--hv-tile) * 0.22);
  margin: 0;
  flex-shrink: 0;
}

.home-values__tile.is-active .home-values__label,
.home-values__tile.is-active .home-values__desc,
.home-values__tile.is-active .home-values__close-mark {
  opacity: 1;
  /* Mobile-first: smaller on phones so the longer descriptions fit the
     small card; bumped back up at the Tailwind `md` breakpoint below. */
  font-size: 7px;
  pointer-events: auto;
  /* fade the content in only after the spin has mostly settled */
  transition-delay: 0.35s;
}

/* On the open card the label re-enters normal flow (icon → label → desc).
   Font size matches the description via the shared rule above. */
.home-values__tile.is-active .home-values__label {
  position: static;
}

.home-values__tile.is-active:hover .home-values__close-mark,
.home-values__tile.is-active:focus-visible .home-values__close-mark {
  color: var(--wp--preset--color--primary, #d96231);
}

/* From the Tailwind `md` breakpoint up the card is large enough, so restore
   the bigger active font-size. md = 48rem (768px). */
@media (min-width: 48rem) {
  .home-values__tile.is-active .home-values__label,
  .home-values__tile.is-active .home-values__desc,
  .home-values__tile.is-active .home-values__close-mark {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-values__tile,
  .home-values__icon,
  .home-values__desc,
  .home-values__close-mark {
    transition: none;
  }
  .home-values__tile { opacity: 1; }
}

/* ── Editor-only tweaks ──────────────────────────────────────────── */

.home-values--editor .home-values__tile {
  opacity: 1;        /* always visible in the editor */
  cursor: default;
}

.home-values--editor .home-values__desc,
.home-values--editor .home-values__close-mark {
  display: none;
}