/* Girl's Boutique — Homepage sections
   Hero, brand split, featured grid. Homepage only. */

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: min(70vh, 608px); /* 20% shorter than original 88vh/760px */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    oklch(0.18 0.03 358 / 0.78) 0%,
    oklch(0.18 0.03 358 / 0.35) 42%,
    transparent 72%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  max-width: min(64rem, 100%);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--c-white);
}

.hero__title span { color: var(--c-pink); }

.hero__tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  color: oklch(0.92 0.01 358);
  max-width: 30ch;
}

.hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* Outline button reads on the dark hero — override the (now pink) base
   border/text to white, since .btn--outline's default is tuned for light canvas */
.hero .btn--outline { border-color: var(--c-white); color: var(--c-white); }
.hero .btn--outline:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }

/* Staggered entrance */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: reveal 800ms var(--ease-out-expo) forwards;
}

.reveal-1 { animation-delay: 80ms; }
.reveal-2 { animation-delay: 200ms; }
.reveal-3 { animation-delay: 320ms; }

@keyframes reveal {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ============ Section scaffolding ============ */
/* overflow-x: clip contains the decorative flowers' negative offsets so they
   never cause horizontal scroll on narrow screens, while leaving vertical
   overflow (the band waves) visible. */
.section {
  padding-block: var(--section-pad);
  overflow-x: clip;
}

/* Organic colored band: distinct soft-pink section.
   Top edge: cream wave (stores -> pink). Bottom edge: the pink itself waves
   DOWN over the footer (single wave, no cream gap). */
.section--blush {
  position: relative;
  background: var(--c-band);
  padding-block: clamp(5rem, 7vw, 8rem);
}

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(56px, 6vw, 110px);
  display: block;
  pointer-events: none;
}

/* Cream wave carving into the top of the band */
.wave--top { top: -1px; fill: var(--c-bg); z-index: 1; }

/* Pink wave hanging below the band, painted on top of the footer */
.wave--bottom {
  top: 100%;
  height: clamp(48px, 5vw, 84px);
  fill: var(--c-band);
  z-index: 2;
}

.section--blush .container { position: relative; z-index: 2; }

/* Footer sits directly under the band; the pink wave overlaps its top */
.footer { position: relative; margin-top: 0; }

/* Push footer content clear of the overlapping pink wave */
.footer__inner { padding-top: clamp(5.5rem, 7vw, 7.5rem); }

.section__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

/* Decorative flower behind the heading text */
.section__head-text { position: relative; z-index: 1; }

.section-flower {
  position: absolute;
  left: -125px;
  top: -142px;
  width: clamp(180px, 17vw, 300px);
  height: auto;
  z-index: 0;
  fill: var(--c-band);
  opacity: 0.25;
  pointer-events: none;
}

/* On the deeper-pink featured band, a band-colored flower would vanish — use the
   lighter canvas tone so it reads as a soft accent behind the title. */
.section--blush .section-flower {
  fill: var(--c-bg);
  opacity: 0.3;
  left: auto;        /* mirror to the right, near the "Ver todo" button */
  right: -125px;
  top: -142px;
}

.section--blush .section__head .section__title,
.section--blush .section__head .section__link {
  position: relative;
  z-index: 1; /* title + "Ver todo" button sit above the decorative flower */
}

.section__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-black); /* +200 from --fw-bold (600 → 800) */
  letter-spacing: -0.025em;
}

/* Second section heading (featured) is a touch smaller than the first */
.section--blush .section__title {
  font-size: var(--fs-title-sm);
}

.section__sub {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  margin-top: var(--space-2);
  max-width: 52ch;
}

.section__link {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  white-space: nowrap;
  color: var(--c-ink);
  border-color: currentColor; /* ink outline — visible on the pink band (bg-color rule would vanish here) */
}

/* fase 6a: on the pink band (--c-band) the inherited .btn--primary:hover fill
   (pink) barely showed against the pink backdrop. Fill ink instead — same
   outline→fill idea, just the ink variant, which pops on pink. */
.section__link:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

/* ============ Brand split ============ */
.brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.brand-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 20 / 9; /* store pills — 25% shorter than the previous 5:3 */
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--c-white);
}

.brand-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out-expo);
}

.brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, oklch(0.16 0.02 358 / 0.72));
}

.brand-card:hover img { transform: scale(1.04); }

.brand-card__body {
  position: relative;
  z-index: 1;
}

.brand-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-store);
  letter-spacing: -0.03em;
}

.brand-card__desc {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 14px;
  color: oklch(0.92 0.01 358);
  max-width: 32ch;
}

.brand-card .btn { font-size: 14px; }

/* Mid-range fix (2-col brand grid, ~769–1200px): the 20/9 box is too short for
   title + desc + button at these widths, so the store name was clipped at the top
   (overflow:hidden + flex-end). Drop the fixed ratio and let the card grow to fit
   its content; the grid stretches both cards to equal height, so they stay even.
   --fs-store (title size) is intentionally left untouched. */
@media (min-width: 769px) and (max-width: 1200px) {
  .brand-card {
    aspect-ratio: auto;
    min-height: clamp(200px, 24vw, 260px);
  }
}

/* ============ Featured grid ============ */
/* Base .product-grid + card structure live in components.css.
   Homepage cards hide the shop name (hierarchy = title > price). */
.product-grid .card__brand { display: none; }

/* Same wavy frame on the whole card container (viewBox matches the card's
   ~0.69 aspect so bumps stay uniform; reveals the band behind at the dips) */
.product-grid .card {
  -webkit-mask: none;
  mask: none;
}

/* Single-bump wavy cut on the bottom of the product photo; corners stay rounded.
   3 variations (w1/w2/w3) cycle across the cards for variety. */
.product-grid .card__media {
  border-radius: 0; /* the mask defines the rounded corners + wavy bottom */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
}

/* w1 — centered dip */
.product-grid .card:nth-child(3n+1) .card__media {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
}

/* w2 — left-of-center dip, deeper */
.product-grid .card:nth-child(3n+2) .card__media {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
}

/* w3 — right-of-center dip, shallower */
.product-grid .card:nth-child(3n) .card__media {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20125'%20preserveAspectRatio='none'%3E%3Cpath%20d='M5,0%20H95%20A5,5%200%200%201%20100,5%20V117.33%20A5,5%200%200%201%2095,122.33%20L93.04,122.88%20L91.09,123.40%20L89.13,123.87%20L87.17,124.28%20L85.22,124.61%20L83.26,124.85%20L81.30,124.98%20L79.35,124.99%20L77.39,124.90%20L75.43,124.70%20L73.48,124.40%20L71.52,124.02%20L69.57,123.56%20L67.61,123.05%20L65.65,122.51%20L63.70,121.97%20L61.74,121.44%20L59.78,120.95%20L57.83,120.51%20L55.87,120.15%20L53.91,119.89%20L51.96,119.72%20L50.00,119.67%20L48.04,119.72%20L46.09,119.89%20L44.13,120.15%20L42.17,120.51%20L40.22,120.95%20L38.26,121.44%20L36.30,121.97%20L34.35,122.51%20L32.39,123.05%20L30.43,123.56%20L28.48,124.02%20L26.52,124.40%20L24.57,124.70%20L22.61,124.90%20L20.65,124.99%20L18.70,124.98%20L16.74,124.85%20L14.78,124.61%20L12.83,124.28%20L10.87,123.87%20L8.91,123.40%20L6.96,122.88%20L5.00,122.33%20A5,5%200%200%201%200,117.33%20V5%20A5,5%200%200%201%205,0%20Z'%20fill='%23fff'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .brands { grid-template-columns: 1fr; }
  .brand-card { aspect-ratio: 16 / 10; }
  .section__head { flex-direction: column; align-items: flex-start; }
  /* Shorter hero on mobile — a further 10% down from the −35% pass */
  .hero { min-height: min(41vh, 355px); }
}