/* Card stack (template-parts/home/card-stack.php): copy at the start, a deck of photo cards at the
   end, over a photo shaded behind the copy. The cards overlap tightly, the first on top; each one
   sits a slice (--hg-stack-s) further along than the card in front of it. The slices are worked
   out from the deck column's width (container units), so the deck fills the column at any
   width. Only one card shows sharp, the first at rest; the others sit behind frosted glass.
   assets/js/home-card-stack.js raises a card (.is-lifted): it comes to the front, sharp, and rises
   with its caption, while the others stay put. A card going back keeps .is-settling until it has
   dropped, so it slides back behind its neighbours instead of snapping under them. home.js marks
   the deck .hg-reveal-pending, which hides the cards until .hg-revealed slides them out from
   under the first one. Per-instance values arrive as inline custom properties (--hg-stack-*). */

.hg-stack {
  --hg-stack-overlay: 0.6;
  --hg-stack-lift: 18px;
  --hg-stack-frame: 5px;
  --hg-stack-dir: 1;
  --hg-stack-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
  --hg-stack-time: 0.5s;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--hg-stack-pad-top, 40px) var(--hg-stack-pad-bottom, 48px);
  background: #2a2522;
  color: #fff;
}
.hg-stack:dir(rtl) { --hg-stack-dir: -1; }

/* Background: the photo itself, shaded behind the copy so the white text reads, and clearer
   towards the deck. */
.hg-stack__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hg-stack__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.hg-stack__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(20 17 15 / calc(var(--hg-stack-overlay) + 0.3)),
    rgb(20 17 15 / var(--hg-stack-overlay)) 45%,
    rgb(20 17 15 / calc(var(--hg-stack-overlay) - 0.25))
  );
}
.hg-stack:dir(rtl) .hg-stack__bg::after {
  background: linear-gradient(
    to left,
    rgb(20 17 15 / calc(var(--hg-stack-overlay) + 0.3)),
    rgb(20 17 15 / var(--hg-stack-overlay)) 45%,
    rgb(20 17 15 / calc(var(--hg-stack-overlay) - 0.25))
  );
}

.hg-stack__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 56px;
  box-sizing: border-box;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Copy. */
.hg-stack__copy {
  min-width: 0;
  text-shadow: 0 1px 14px rgb(20 17 15 / 0.45);
}
.hg-stack .hg-stack__kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 2px 12px;
  border-radius: 30px;
  background: var(--hg-stack-accent, var(--hg-accent));
  color: #fff;
  font-family: var(--hg-font-body);
  font-size: 15px;
  line-height: 1.6;
}
.hg-stack .hg-stack__title { color: inherit; }
.hg-stack__text {
  max-width: 42ch;
  margin-block-start: 16px;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.hg-stack__text > * { margin: 0; }
.hg-stack__text > * + * { margin-block-start: 0.8em; }
.hg-stack .hg-stack__btn {
  --hg-accent: var(--hg-stack-accent, #b42026);
  --hg-btn-focus: #fff;
  margin-block-start: 28px;
  text-shadow: none;
}

/* Deck: the first card in the flow sets the height; the rest are laid over it, a slice apart.
   The padding above leaves room for a raised card. Vertical swipes still scroll the page;
   sideways ones run along the deck. */
.hg-stack__side {
  min-width: 0;
  container-type: inline-size;
}
.hg-stack .hg-stack__deck {
  --hg-stack-w: min(340px, 50cqi);
  --hg-stack-s: min((100cqi - var(--hg-stack-w)) / (var(--hg-stack-n, 7) - 1), var(--hg-stack-w) * 0.42);
  position: relative;
  margin: 0;
  padding: var(--hg-stack-lift) 0 0;
  list-style: none;
  touch-action: pan-y pinch-zoom;
}
.hg-stack__card {
  position: absolute;
  inset-block-start: var(--hg-stack-lift);
  inset-inline-start: calc(var(--i) * var(--hg-stack-s));
  z-index: calc(var(--hg-stack-n, 7) - var(--i));
  width: var(--hg-stack-w);
  min-width: 0;
  transform: translate3d(0, calc(var(--hg-stack-up, 0px) * -1), 0) scale(var(--hg-stack-pop, 1));
  transform-origin: 50% 100%;
  transition: transform var(--hg-stack-time) var(--hg-stack-ease);
}
.hg-stack__card:first-child { position: relative; inset-block-start: 0; }
/* Promoted only while the deck is in use, not at rest. */
.hg-stack__deck:is(.is-active, :focus-within) .hg-stack__card,
.hg-stack__card:is(.is-lifted, .is-settling) { will-change: transform; }

/* Opened out from under the first card when the deck scrolls into view. */
.hg-stack__deck.hg-reveal-pending:not(.hg-revealed) .hg-stack__card:not(:first-child) { opacity: 0; }
.hg-stack__deck.hg-revealed .hg-stack__card:not(:first-child) {
  animation: hg-stack-open 0.8s var(--hg-stack-ease) backwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes hg-stack-open {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--i) * var(--hg-stack-s) * var(--hg-stack-dir) * -1), 0, 0);
  }
}

/* The raised card: in front of the deck and a little larger. Without the script, keyboard focus
   still raises a card. */
.hg-stack__card.is-lifted,
.hg-stack__card:has(.hg-stack__link:focus-visible) {
  --hg-stack-up: var(--hg-stack-lift);
  --hg-stack-pop: 1.03;
  z-index: 30;
}
.hg-stack__card.is-settling { z-index: 20; }

/* Card face: a photo in a thin cream frame, its edge shadowed onto the card behind it. */
.hg-stack .hg-stack__link {
  position: relative;
  display: block;
  padding: var(--hg-stack-frame);
  border-radius: 10px;
  background: var(--hg-bg);
  color: #fff;
  text-decoration: none;
  box-shadow: calc(10px * var(--hg-stack-dir)) 0 22px -10px rgb(0 0 0 / 0.55);
  backface-visibility: hidden;
}
.hg-stack .hg-stack__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 28px 44px -18px rgb(0 0 0 / 0.7);
  opacity: 0;
  transition: opacity var(--hg-stack-time) ease;
  pointer-events: none;
}
.hg-stack .hg-stack__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.hg-stack__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: var(--hg-card-media-bg);
}
.hg-stack .hg-stack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Frosted glass over every card but the sharp one: the raised card, or the first while none is
   raised. Fading the glass rather than animating a filter keeps the change on the compositor. */
.hg-stack__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(20 17 15 / 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity var(--hg-stack-time) ease;
}
.hg-stack__card.is-lifted .hg-stack__media::after,
.hg-stack__card:has(.hg-stack__link:focus-visible) .hg-stack__media::after,
.hg-stack__deck:not(.is-active) .hg-stack__card:first-child .hg-stack__media::after { opacity: 0; }

/* Caption: on the raised card, or on the first card while none is raised. */
.hg-stack__caption {
  position: absolute;
  inset: auto var(--hg-stack-frame) var(--hg-stack-frame);
  display: grid;
  gap: 4px;
  padding: 44px 14px 14px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to top, rgb(20 17 15 / 0.82), rgb(20 17 15 / 0.5) 60%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hg-stack__card.is-lifted .hg-stack__caption,
.hg-stack__card:has(.hg-stack__link:focus-visible) .hg-stack__caption,
.hg-stack__card.is-lifted .hg-stack__link::after,
.hg-stack__card:has(.hg-stack__link:focus-visible) .hg-stack__link::after,
.hg-stack__deck:not(.is-active) .hg-stack__card:first-child .hg-stack__caption { opacity: 1; }
.hg-stack__name {
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.hg-stack__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.hg-stack__price ins {
  order: -1;
  text-decoration: none;
}
.hg-stack__price del {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

/* One column below 900px: copy above, the deck across the width. */
@media (max-width: 899px) {
  .hg-stack__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* The copy runs the full width at the top, so the shade does too. */
  .hg-stack .hg-stack__bg::after {
    background: linear-gradient(
      to bottom,
      rgb(20 17 15 / calc(var(--hg-stack-overlay) + 0.3)),
      rgb(20 17 15 / calc(var(--hg-stack-overlay) + 0.15)) 45%,
      rgb(20 17 15 / calc(var(--hg-stack-overlay) - 0.15))
    );
  }
}

/* Phones: five cards, a bigger first card. */
@media (max-width: 749px) {
  .hg-stack {
    --hg-stack-lift: 14px;
    --hg-stack-frame: 4px;
    padding-block: var(--hg-stack-pad-top-m, 32px) var(--hg-stack-pad-bottom-m, 40px);
  }
  .hg-stack .hg-stack__deck {
    --hg-stack-n-m: min(var(--hg-stack-n, 7), 5);
    --hg-stack-w: 56cqi;
    --hg-stack-s: min((100cqi - var(--hg-stack-w)) / (var(--hg-stack-n-m) - 1), var(--hg-stack-w) * 0.42);
  }
  .hg-stack__card { z-index: calc(var(--hg-stack-n-m) - var(--i)); }
  .hg-stack__card:nth-child(n + 6) { display: none; }
  .hg-stack__text { font-size: 15px; }
  .hg-stack .hg-stack__btn { margin-block-start: 22px; }
  .hg-stack__caption { padding: 36px 10px 10px; }
  .hg-stack__name { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-stack__card,
  .hg-stack .hg-stack__link::after,
  .hg-stack__media::after,
  .hg-stack__caption { transition: none; }
  .hg-stack__deck.hg-revealed .hg-stack__card:not(:first-child) { animation: none; }
}

/* Lite devices (html.hg-lite): no backdrop blur; a slightly deeper veil of the text colour dims
   the cards behind the sharp one instead (no text sits on a veiled card), and the deck shows open
   without the opening slide. */
.hg-lite .hg-stack__media::after {
  background: rgb(26 24 22 / 0.3);
  background: color-mix(in srgb, var(--hg-text, #1a1816) 30%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hg-lite .hg-stack__deck.hg-revealed .hg-stack__card:not(:first-child) { animation: none; }