/* -------------------------------------------------
   LOVENUDE SECTION
   Local color tokens, layout, interactions, and responsive rules
-------------------------------------------------- */

/* -------------------------------------------------
   SECTION TOKENS
   Hex values are the baseline fallback for older browsers.
   OKLCH overrides are applied only when supported.
-------------------------------------------------- */
section.lovenude-section {
  --lovenude-bg: #000000;
  --lovenude-accent: #d7a39b;
  --lovenude-text: #ffffff;
  --lovenude-button-text: #000000;
  --lovenude-fade-opacity: 0.8;
  background-color: var(--lovenude-bg);
  text-align: center;
  padding: 4rem 0;
  -webkit-font-smoothing: antialiased;
}

@supports (color: oklch(0 0 0)) {
  section.lovenude-section {
    --lovenude-bg: oklch(0 0 0);
    --lovenude-accent: oklch(0.76 0.06 35);
    --lovenude-text: oklch(1 0 0);
    --lovenude-button-text: oklch(0 0 0);
  }
}

/* -------------------------------------------------
   TYPOGRAPHY
   Fluid type uses clamp() instead of breakpoint-only sizing.
-------------------------------------------------- */
section.lovenude-section h2 {
  color: var(--lovenude-accent);
  font-size: clamp(2rem, 1.1rem + 4.5vw, 4.5rem);
  line-height: 1.1;
  margin: 0 0 4rem;
  letter-spacing: 0.1;
  font-weight: 400;
  font-family: var(--accent-font-family);
}

section.lovenude-section p {
  color: var(--lovenude-text);
  font-size: clamp(1rem, 0.86rem + 0.7vw, 1.4rem);
  line-height: 1.1;
  max-width: 50ch;
  margin: 4rem auto 0.5rem;
}

/* -------------------------------------------------
   ACTIONS AND BRANDING
-------------------------------------------------- */
section.lovenude-section .lovenude-btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 2rem auto 3rem;
  padding: 0.5rem 1.5rem;
  border: 2px solid var(--lovenude-accent);
  background-color: var(--lovenude-accent);
  color: var(--lovenude-button-text);
  font-size: clamp(0.9rem, 0.83rem + 0.35vw, 1.1rem);
  font-weight: 700;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

section.lovenude-section .lovenude-logo {
  width: min(260px, 42vw);
  margin: 0 auto;
}

section.lovenude-section .lovenude-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------
   IMAGE ROW
   Desktop keeps the editorial strip. Mobile switches to 3 top / 2 bottom.
-------------------------------------------------- */
section.lovenude-section .lovenude-images {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  overflow: visible;
  isolation: isolate;
}

section.lovenude-section .lovenude-image {
  display: block;
  position: relative;
  overflow: visible;
  opacity: 1;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
}

section.lovenude-section .lovenude-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* -------------------------------------------------
   IMAGE COMPOSITION
   Per-image scaling creates the staggered editorial look.
-------------------------------------------------- */
section.lovenude-section .lovenude-image:nth-child(1) img {
  transform: scale(1.02);
}

section.lovenude-section .lovenude-image:nth-child(2) img {
  transform: scale(1.15);
}

section.lovenude-section .lovenude-image:nth-child(3) img {
  transform: scale(0.95);
}

section.lovenude-section .lovenude-image:nth-child(4) img {
  transform: scale(1.15);
}

section.lovenude-section .lovenude-image:nth-child(5) img {
  transform: scale(1.08);
}

/* -------------------------------------------------
   HOVER STATES
   Uses a broad browser-safe selector instead of :has().
-------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  section.lovenude-section .lovenude-images:hover .lovenude-image {
    opacity: var(--lovenude-fade-opacity);
  }

  section.lovenude-section .lovenude-images:hover .lovenude-image:hover {
    opacity: 1;
    mix-blend-mode: normal;
  }

  section.lovenude-section .lovenude-btn:hover {
    background-color: var(--lovenude-bg);
    color: var(--lovenude-accent);
  }
}

/* -------------------------------------------------
   MOBILE / TABLET LAYOUT
   Keeps the editorial overlap while arranging the images
   into 3 items on the first row and 2 on the second row.
-------------------------------------------------- */
@media screen and (max-width: 770px) {
  section.lovenude-section {
    padding: 2rem 0;
  }

  section.lovenude-section h2 {
    margin-bottom: 2rem;
  }

  section.lovenude-section .lovenude-images {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  section.lovenude-section .lovenude-image {
    flex: 0 0 33%;
    margin: 0;
  }

  section.lovenude-section .lovenude-image img {
    width: 100%;
  }

  section.lovenude-section p {
    margin: 2rem auto 0.5rem;
  }
}

/* -------------------------------------------------
   ACCESSIBILITY
   Respects reduced-motion preferences.
-------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  section.lovenude-section .lovenude-image,
  section.lovenude-section .lovenude-image img,
  section.lovenude-section .lovenude-btn {
    transition: none !important;
  }

  section.lovenude-section .lovenude-image img {
    transform: none !important;
  }
}