/* =========================================================================
   GETU Shopping - homepage component CSS
   -------------------------------------------------------------------------
   Ported verbatim from the reference's index.html inline <style> block
   (product tiles, category tiles, marquee, scroll-reveal). Loaded after
   getu-chrome.css, which already aliases the reference's --shadow-float /
   --shadow-raised / --ease-out / --ease-spring custom-property names onto
   #brx-header and .getu-vanilla-scope - the homepage <body> carries the
   latter class (see getu-chrome.php's body_class filter), so this file
   does not redeclare those aliases.

   .wish (wishlist heart) rules are intentionally omitted: the heart is not
   part of the ported homepage markup, so those rules would be dead CSS.

   Ports to production unchanged: no URLs, no ids, no environment
   assumptions.
   ========================================================================= */

/* Product card refinements */
.pcard .quick-add { transition: transform .35s var(--ease-spring), background-color .25s; }

/* Promo merchandising card */
.promo { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.promo img { transition: transform .6s var(--ease-out); }
.promo:hover img { transform: scale(1.06); }

/* Category tile */
.tile { position: relative; overflow: hidden; border-radius: 1.25rem; box-shadow: var(--shadow-raised);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.tile img { transition: transform .7s var(--ease-out); }
.tile:hover img { transform: scale(1.07); }
.tile-overlay { background: linear-gradient(to top, rgba(20,6,10,.88) 0%, rgba(20,6,10,.35) 45%, rgba(20,6,10,.05) 100%); }

/* Spotlight tile: for product-on-white shots — wine stage + radial glow, image contained */
.tile-spotlight { background:
    radial-gradient(70% 55% at 50% 38%, rgba(200,164,93,.18) 0%, rgba(42,14,20,0) 60%),
    linear-gradient(160deg, #3A0F18 0%, #2A0E14 60%, #1E0A0F 100%); }
.tile-spotlight img { mix-blend-mode: normal; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.tile-spotlight .tile-overlay { background: linear-gradient(to top, rgba(20,6,10,.92) 0%, rgba(20,6,10,.25) 40%, rgba(20,6,10,0) 70%); }

/* Product card */
.pcard { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.pcard .pcard-cta { transition: transform .4s var(--ease-spring), opacity .3s ease, background-color .25s; }


.rule-gold { display: inline-flex; align-items: center; gap: .75rem; }
.rule-gold::before, .rule-gold::after { content: ""; height: 1px; width: 2.5rem; background: linear-gradient(to right, transparent, var(--gold), transparent); }

/* Marquee for brand strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Scroll / load reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  * { scroll-behavior: auto; }
}

/* Hero headline — fluid display type.
   The prebuilt Tailwind subset (getu-tailwind.css) only ships an `lg:` variant
   up to 62px, so the arbitrary-value route caps out there. Setting the scale
   here keeps the headline fluid between breakpoints instead of stepping. */
.getu-hero-title {
  font-size: clamp(2.75rem, 1.55rem + 3.45vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Full-row tile in the category bento. `lg:col-span-3` is not in the prebuilt
   Tailwind subset, and `1 / -1` spans every column at any breakpoint, so this
   replaces a col-span-2 + lg:col-span-3 pair with one rule. */
.tile-wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Category bento — product tiles (DE).
   The German shop is Fabbri-only, so the section shows the real product lines
   and leads with the packaging itself rather than mismatched lifestyle stock.
   Every shot is a background-removed cut-out, so a product sits correctly on
   any ground and the set reads as one system.
   --------------------------------------------------------------------------- */
.ptile {
  position: relative; display: block; overflow: hidden;
  border-radius: 1.25rem; text-decoration: none; color: inherit;
  min-height: 210px;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%),
    linear-gradient(155deg, #F5ECE0 0%, #EBDECB 58%, #E4D4BD 100%);
  box-shadow: 0 1px 2px rgba(74,20,32,.06), 0 14px 30px -14px rgba(74,20,32,.24);
  transition: transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s cubic-bezier(.2,.8,.25,1);
}
.ptile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(74,20,32,.08), 0 24px 46px -16px rgba(74,20,32,.32); }
.ptile:focus-visible { outline: 2px solid var(--getu-color-gold); outline-offset: 3px; }

.ptile--hero { grid-column: span 2; }
@media (min-width: 1024px) { .ptile--hero { grid-column: span 2; grid-row: span 2; min-height: 440px; } }
.ptile--wide { grid-column: 1 / -1; min-height: 230px; }

/* Deep ground for the lead tile of the set. */
.ptile--deep {
  background:
    radial-gradient(115% 85% at 78% 14%, rgba(200,164,93,.30), rgba(200,164,93,0) 60%),
    linear-gradient(155deg, var(--getu-color-wine-800) 0%, var(--getu-color-wine-900) 58%, var(--getu-color-wine-950) 100%);
}

.ptile-copy { position: relative; z-index: 2; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; max-width: 60%; }
@media (min-width: 1024px) { .ptile-copy { padding: 2rem 2.25rem; } }

.ptile h3 {
  font-family: var(--getu-font-display); font-weight: 600; line-height: 1;
  letter-spacing: -.02em; margin: 0; color: var(--getu-color-wine-900);
  font-size: 1.45rem;
}
.ptile--hero h3 { color: var(--getu-color-cream); font-size: clamp(1.9rem, 1.1rem + 2vw, 2.6rem); }
.ptile--wide h3 { font-size: clamp(1.6rem, 1rem + 1.5vw, 2rem); }

.ptile-blurb { margin: .7rem 0 0; font-size: .875rem; line-height: 1.65; color: rgba(36,16,21,.6); max-width: 26ch; }
.ptile--hero .ptile-blurb { color: rgba(246,241,234,.72); }

.ptile-eyebrow { font-size: .65rem; letter-spacing: var(--getu-tracking-kicker); text-transform: uppercase; font-weight: 600; color: var(--getu-color-gold); margin: 0 0 .55rem; }

.ptile-go {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--getu-color-wine-700);
  font-variant-numeric: tabular-nums;
}
.ptile--hero .ptile-go { color: var(--getu-color-gold); font-size: .85rem; margin-top: 1.25rem; }
.ptile-go svg { transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.ptile:hover .ptile-go svg { transform: translateX(4px); }

.ptile-shots { position: absolute; inset: 0 0 0 auto; display: flex; align-items: flex-end; justify-content: center; gap: .5rem; padding-bottom: 1.2rem; }
.ptile-shots img { width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(74,20,32,.20)); }
.ptile--deep .ptile-shots img { filter: drop-shadow(0 22px 36px rgba(0,0,0,.55)); }

.ptile--hero .ptile-shots { width: 52%; right: 1.5rem; justify-content: flex-end; gap: .35rem; padding-bottom: 1.8rem; }
.ptile--hero .ptile-shots img:nth-child(1) { height: 56%; }
.ptile--hero .ptile-shots img:nth-child(2) { height: 82%; }
.ptile--hero .ptile-shots img:nth-child(3) { height: 63%; }

.ptile--sm .ptile-shots { width: 44%; right: .6rem; justify-content: center; padding-bottom: 0; }
.ptile--sm .ptile-shots img { height: 94%; }

.ptile--wide .ptile-shots { width: 44%; right: 2rem; justify-content: flex-end; gap: 2rem; padding-bottom: 1rem; }
.ptile--wide .ptile-shots img:nth-child(1) { height: 84%; }
.ptile--wide .ptile-shots img:nth-child(2) { height: 96%; }

/* Narrow screens: copy column and shots column must not overlap. */
@media (max-width: 639px) {
  .ptile-copy { max-width: 56%; padding: 1.15rem; }
  .ptile--sm { min-height: 190px; }
  .ptile--sm .ptile-shots { width: 40%; right: 0; }
  .ptile--sm .ptile-shots img { height: 82%; }
  .ptile--hero .ptile-shots { width: 46%; right: .5rem; }
  /* One product only on the wide tile here - two plus copy is cramped. */
  .ptile--wide { min-height: 210px; }
  .ptile--wide .ptile-shots { width: 34%; right: .5rem; gap: 0; }
  .ptile--wide .ptile-shots img:nth-child(1) { display: none; }
  .ptile--wide .ptile-shots img:nth-child(2) { height: 74%; }
  .ptile-blurb { max-width: 22ch; }
}

@media (prefers-reduced-motion: reduce) {
  .ptile, .ptile:hover, .ptile-go svg { transition: none; transform: none; }
}
