/* ===================================
   Alder Wood — Visual Polish Overrides
   =================================== */

/* -----------------------------------
   0. LOGO IMAGE STYLES
   ----------------------------------- */

footer [data-loc="client/src/components/Footer.tsx:40"],
footer [data-loc="client/src/components/Footer.tsx:204"] {
  display: none !important;
}

.header-logo-img {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
  .header-logo-img {
    height: 52px;
  }
}

.footer-logo-img {
  height: 80px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .footer-logo-img {
    height: 64px;
  }
}

/* -----------------------------------
   1. HEADER / NAVBAR FIXES
   ----------------------------------- */

/* Give the navbar a subtle dark gradient background so menu items
   are always legible against the hero image */
header[class*="fixed"],
nav[class*="fixed"] {
  background: linear-gradient(
    180deg,
    rgba(6, 3, 0, 0.65) 0%,
    rgba(6, 3, 0, 0.35) 60%,
    rgba(6, 3, 0, 0) 100%
  ) !important;
  padding-bottom: 12px;
}

/* When scrolled (has shadow-lg class applied), use solid bg */
nav[class*="shadow-lg"] {
  background: oklch(0.18 0.05 140 / 0.97) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  padding-bottom: 0;
}

/* Increase nav link opacity/visibility */
header a[class*="text-white/6"],
nav a[class*="text-white/6"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

header a[class*="text-white/6"]:hover,
nav a[class*="text-white/6"]:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* Increase nav link font size from 0.65rem to 0.72rem for readability */
header a[style*="0.65rem"],
nav a[style*="0.65rem"] {
  font-size: 0.72rem !important;
}

/* Increase language toggle visibility */
header button[class*="text-white/5"],
nav button[class*="text-white/5"] {
  color: rgba(255, 255, 255, 0.8) !important;
}

header button[class*="text-white/5"]:hover,
nav button[class*="text-white/5"]:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* -----------------------------------
   2. HERO BADGE FIX — "Trevignano Romano · Lago di Bracciano"
   ----------------------------------- */

/* The badge is dark green (#14310d) on dark hero backgrounds — fix color */
/* Only target badges inside hero sections (dark backgrounds with bg-cover images) */
section[class*="overflow-hidden"] > div[class*="absolute"][class*="z-10"] .badge-nature {
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  padding: 0.35rem 1rem !important;
}

/* Target the badge container in hero sections — reposition below navbar */
section[class*="overflow-hidden"] > div[class*="absolute"][class*="top-2"][class*="right-"] {
  top: 5.5rem !important;
}

/* On larger screens, position badge better */
@media (min-width: 768px) {
  section[class*="overflow-hidden"] > div[class*="absolute"][class*="top-2"][class*="right-"] {
    top: 6.5rem !important;
    right: 3rem !important;
  }
}

/* -----------------------------------
   3. READABILITY & TYPOGRAPHY IMPROVEMENTS
   ----------------------------------- */

/* Hero title — improve text shadow for better legibility over images */
section[style*="100vh"] h1 {
  text-shadow: 0 2px 30px rgba(6, 3, 0, 0.5), 0 1px 8px rgba(6, 3, 0, 0.3);
}

/* Hero subtitle — slightly increase opacity for readability */
section[style*="100vh"] p[class*="text-white/75"] {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Enhance hero background image quality */
section[style*="100vh"] > div[class*="bg-cover"],
section[class*="min-h-"] > div[class*="bg-cover"] {
  filter: contrast(1.04) saturate(1.1);
  image-rendering: auto;
}

/* Improve hero overlay gradient — slightly stronger for text readability */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(6, 3, 0, 0.18) 0%,
    rgba(6, 3, 0, 0.35) 35%,
    rgba(6, 3, 0, 0.68) 65%,
    rgba(6, 3, 0, 0.93) 100%
  ) !important;
}

/* Body text — ensure good line height and readability for Inter */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Improve contrast for all text-white/50 elements (subtle text) */
*[class*="text-white/50"] {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Slightly boost text-white/55 elements */
*[class*="text-white/55"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* -----------------------------------
   4. CTA BUTTONS POLISH
   ----------------------------------- */

/* Primary CTA — add subtle shadow for depth */
section[style*="100vh"] a[class*="bg-white"][class*="tracking-widest"] {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

section[style*="100vh"] a[class*="bg-white"][class*="tracking-widest"]:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* Secondary CTA — make border a bit more visible */
section[style*="100vh"] a[class*="border"][class*="border-white/50"] {
  border-color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease;
}

section[style*="100vh"] a[class*="border"][class*="border-white/50"]:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-1px);
}

/* -----------------------------------
   5. MOBILE-SPECIFIC IMPROVEMENTS
   ----------------------------------- */

/* Mobile menu panel — improve spacing and readability */
@media (max-width: 1023px) {
  /* Mobile navigation must behave as a real drawer, not as text over the page. */
  nav[data-loc="client/src/components/Navbar.tsx:58"] {
    background: oklch(0.18 0.05 140) !important;
    padding-bottom: 0 !important;
  }

  div[data-loc="client/src/components/Navbar.tsx:140"] {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9998 !important;
    min-height: calc(100svh - 64px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: oklch(0.18 0.05 140) !important;
    background-image:
      linear-gradient(180deg, rgba(6, 3, 0, 0.04), rgba(6, 3, 0, 0.22)),
      radial-gradient(circle at 100% 0%, rgba(92, 125, 87, 0.16), transparent 42%) !important;
  }

  div[data-loc="client/src/components/Navbar.tsx:144"] {
    min-height: calc(100svh - 64px) !important;
    padding-top: 1.25rem !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  nav[data-loc="client/src/components/Navbar.tsx:146"] a,
  div[data-loc="client/src/components/Navbar.tsx:140"] a {
    position: relative;
    z-index: 1;
  }

  nav[data-loc="client/src/components/Navbar.tsx:146"] a {
    min-height: 58px !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    color: rgba(255, 255, 255, 0.76) !important;
  }

  nav[data-loc="client/src/components/Navbar.tsx:146"] a:hover,
  nav[data-loc="client/src/components/Navbar.tsx:146"] a:focus {
    color: #fff !important;
  }

  a[data-loc="client/src/components/Navbar.tsx:168"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: oklch(0.22 0.06 140) !important;
    min-height: 50px !important;
    padding: 0.9rem 1.25rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  p[data-loc="client/src/components/Navbar.tsx:177"] {
    color: rgba(255, 255, 255, 0.52) !important;
  }

  body.mobile-menu-open div[data-loc="client/src/components/FloatingActions.tsx:26"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(2rem) !important;
  }

  .mobile-menu-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .mobile-menu-social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 44px !important;
    padding: 0.65rem 0.9rem !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 2px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-family: Inter, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

  .mobile-menu-social-links a:hover,
  .mobile-menu-social-links a:focus {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .mobile-menu-social-links svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Ensure mobile menu links have good tap targets */
  div[class*="lg:hidden"][class*="fixed"][class*="inset-0"] a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Ensure mobile menu text is legible */
  div[class*="lg:hidden"][class*="fixed"][class*="inset-0"] a[class*="text-white/55"] {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* On mobile, hero title should not be too large */
  section[style*="100vh"] h1 {
    font-size: clamp(2.8rem, 11vw, 4.5rem) !important;
    line-height: 1.05 !important;
  }

  /* Ensure CTA buttons stack nicely on very small screens */
  section[style*="100vh"] div[class*="flex-col"][class*="gap-4"] a {
    text-align: center;
    justify-content: center;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Badge: on mobile, adjust positioning in hero sections */
  section[class*="overflow-hidden"] > div[class*="absolute"][class*="right-"] {
    right: 1rem !important;
    top: 5rem !important;
  }

  section[class*="overflow-hidden"] > div[class*="absolute"][class*="z-10"] .badge-nature {
    font-size: 0.58rem !important;
    padding: 0.3rem 0.75rem !important;
  }

  /* Keep progressive reveal content visible on mobile and in full-page captures. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Small mobile screens */
@media (max-width: 374px) {
  section[style*="100vh"] h1 {
    font-size: clamp(2.2rem, 10vw, 3rem) !important;
  }

  /* Stack badge below nav area */
  section[class*="overflow-hidden"] > div[class*="absolute"][class*="right-"] {
    top: 4.5rem !important;
    right: 0.75rem !important;
  }

  section[class*="overflow-hidden"] > div[class*="absolute"][class*="z-10"] .badge-nature {
    font-size: 0.52rem !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  section[style*="100vh"] h1 {
    font-size: clamp(3.5rem, 8vw, 5.5rem) !important;
  }
}

/* -----------------------------------
   6. GENERAL POLISH
   ----------------------------------- */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Improve focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid oklch(0.48 0.06 170);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Card hover transitions — ensure smooth */
.card-lift {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Line accent elements — ensure crisp on retina */
.line-accent {
  transform: translateZ(0);
}

/* Improve image rendering */
img {
  image-rendering: auto;
}

/* Better selection color matching the brand */
::selection {
  background: oklch(0.35 0.08 140);
  color: white;
}

/* Footer links readability */
footer a[class*="text-white/60"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

footer a[class*="text-white/60"]:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* -----------------------------------
   7. TRE SPAZI SECTION — TITLE & EXPANDABLE AREAS
   ----------------------------------- */

/* Fix "01/02/03" numbers — too light on light backgrounds */
[data-loc="client/src/pages/AlderWoodPage.tsx:177"] {
  color: oklch(0.62 0.03 85) !important;
}

/* Homepage section numbers — also too light */
.section-number {
  color: oklch(0.78 0.02 85) !important;
}

/* Homepage pillar card numbers */
[data-loc="client/src/pages/Home.tsx:282"] {
  color: oklch(0.72 0.02 85) !important;
}

@media (min-width: 768px) {
  [data-loc="client/src/pages/AlderWoodPage.tsx:153"] {
    white-space: normal !important;
  }
}

.area-card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
  padding-bottom: 1.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid oklch(0.90 0.01 85);
  overflow: hidden;
}

.area-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.area-card.is-expanded {
  background: rgba(255, 255, 255, 0.75);
}

.area-card.is-expanded:hover {
  transform: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Card content below the image needs horizontal padding */
.area-card > [data-loc="client/src/pages/AlderWoodPage.tsx:176"] {
  padding: 0 1.5rem;
}

/* Card image — remove bottom margin, let padding handle spacing */
.area-card [data-loc="client/src/pages/AlderWoodPage.tsx:169"] {
  margin-bottom: 1rem;
  border-radius: 0;
}

.area-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              margin 0.4s ease,
              padding 0.4s ease;
  margin-top: 0;
}

.area-details.expanded {
  max-height: 1600px;
  opacity: 1;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem 0.5rem 1.5rem;
  border-top: 1px solid oklch(0.88 0.01 85);
}

.area-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid oklch(0.75 0.02 85);
  color: oklch(0.45 0.02 65);
  font-size: 18px;
  line-height: 1;
  transition: all 0.3s ease;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

.area-card:hover .area-toggle-icon {
  border-color: oklch(0.48 0.06 170);
  color: oklch(0.48 0.06 170);
}

.area-toggle-icon.rotated {
  transform: rotate(45deg);
  border-color: oklch(0.48 0.06 170);
  color: oklch(0.48 0.06 170);
}

/* ---- Photo Gallery Grid ---- */

.area-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 155px;
  gap: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.area-gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.area-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

.area-details.expanded .area-gallery-item {
  animation: galleryReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.area-details.expanded .area-gallery-item:nth-child(1) { animation-delay: 0.06s; }
.area-details.expanded .area-gallery-item:nth-child(2) { animation-delay: 0.12s; }
.area-details.expanded .area-gallery-item:nth-child(3) { animation-delay: 0.18s; }
.area-details.expanded .area-gallery-item:nth-child(4) { animation-delay: 0.24s; }
.area-details.expanded .area-gallery-item:nth-child(5) { animation-delay: 0.30s; }
.area-details.expanded .area-gallery-item:nth-child(6) { animation-delay: 0.36s; }
.area-details.expanded .area-gallery-item:nth-child(7) { animation-delay: 0.42s; }
.area-details.expanded .area-gallery-item:nth-child(8) { animation-delay: 0.48s; }
.area-details.expanded .area-gallery-item:nth-child(9) { animation-delay: 0.54s; }

@keyframes galleryReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.area-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
}

.area-gallery-item:hover img {
  transform: scale(1.08);
}

.area-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.12) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.area-gallery-item:hover::after {
  opacity: 1;
}

/* Placeholder gallery items */
.area-gallery-item.is-placeholder {
  background: linear-gradient(145deg, oklch(0.94 0.015 140), oklch(0.90 0.02 85));
  cursor: default;
}

.area-gallery-item.is-placeholder:hover {
  transform: none;
}

.area-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
}

/* ---- Lightbox ---- */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightboxFadeIn 0.3s ease forwards;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gallery-lightbox.lightbox-closing {
  animation: lightboxFadeOut 0.25s ease forwards;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lightboxFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.lightbox-image-wrap {
  max-width: 90vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  user-select: none;
  -webkit-user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.2rem;
  font-weight: 200;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  z-index: 2;
  font-family: 'Inter', sans-serif;
}

.lightbox-close:hover {
  color: white;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.6rem;
  font-weight: 200;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
  font-family: 'Inter', sans-serif;
}

.lightbox-nav:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

.lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.15em;
}

.area-detail-list {
  list-style: none;
  padding: 0.75rem 0;
  margin: 0;
}

.area-detail-list li {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.75;
  color: oklch(0.40 0.02 65);
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  border-bottom: 1px solid oklch(0.92 0.005 85);
}

.area-detail-list li:last-child {
  border-bottom: none;
}

.area-detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.48 0.06 170);
}

.area-detail-separator {
  width: 2rem;
  height: 1px;
  background: oklch(0.85 0.02 85);
  margin: 0.75rem 0;
}

.area-discover-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.48 0.06 170);
  margin-top: 0.75rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.3s ease;
}

.area-card .area-discover-hint {
  opacity: 0.7;
}

.area-card:hover .area-discover-hint {
  opacity: 1;
}

.area-card.is-expanded .area-discover-hint {
  display: none;
}

/* Mobile: improve area card touch targets and spacing */
@media (max-width: 767px) {
  .area-card {
    padding-bottom: 1.25rem;
  }

  .area-card > [data-loc="client/src/pages/AlderWoodPage.tsx:176"] {
    padding: 0 1.25rem;
  }

  .area-details.expanded {
    padding: 1rem 1.25rem 0.5rem 1.25rem;
  }

  .area-discover-hint {
    padding: 0 1.25rem;
  }

  .area-toggle-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .area-detail-list li {
    font-size: 0.82rem;
    padding: 0.4rem 0;
  }

  .area-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
    gap: 4px;
  }

  .area-gallery-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 180px;
  }

  .lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }

  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }

  .lightbox-image-wrap {
    max-width: 96vw;
  }
}

/* -----------------------------------
   8. STORY CARDS — HOVER PADDING FIX
   ----------------------------------- */

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift {
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  border: 1px solid oklch(0.92 0.005 85);
}

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > [data-loc="client/src/pages/StoriesPage.tsx:139"] {
  margin-bottom: 0;
}

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > [data-loc="client/src/pages/StoriesPage.tsx:146"],
[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > h3,
[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > p,
[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > span {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > [data-loc="client/src/pages/StoriesPage.tsx:146"] {
  padding-top: 1.25rem;
}

[data-loc="client/src/pages/StoriesPage.tsx:136"] .card-lift > span:last-child {
  padding-bottom: 1.25rem;
  display: block;
}

/* Featured story card — make it clickable */
[data-loc="client/src/pages/StoriesPage.tsx:87"] {
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

[data-loc="client/src/pages/StoriesPage.tsx:87"]:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------
   9. INDIVIDUAL STORY PAGE STYLES
   ----------------------------------- */

.story-page-root {
  min-height: 100vh;
  background: oklch(0.97 0.01 85);
}

.story-hero {
  position: relative;
  height: 55vh;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.story-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.04) saturate(1.1);
}

.story-hero-overlay {
  position: absolute;
  inset: 0;
}

.story-hero-content {
  position: relative;
  z-index: 10;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.story-back-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
  margin-bottom: 0.5rem;
}

.story-back-link:hover {
  color: white;
}

.story-category {
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.story-title {
  font-family: 'Cormorant Garamond', serif;
  color: white;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-shadow: 0 2px 30px rgba(6, 3, 0, 0.5), 0 1px 8px rgba(6, 3, 0, 0.3);
}

.story-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
}

.story-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.story-content {
  max-width: 740px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
}

.story-body p {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.85;
  font-weight: 300;
  color: oklch(0.30 0.02 65);
  margin-bottom: 1.5rem;
}

.story-body p:first-child {
  font-size: 1.15rem;
  color: oklch(0.25 0.02 65);
}

.story-body p:first-child::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  float: left;
  line-height: 1;
  margin-right: 0.15rem;
  margin-top: 0.05rem;
  color: oklch(0.28 0.07 140);
  font-weight: 500;
}

/* Related stories */
.story-related {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid oklch(0.88 0.01 85);
}

.story-related h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: oklch(0.18 0.02 65);
  margin-bottom: 2rem;
}

.story-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.story-related-card {
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  border: 1px solid oklch(0.92 0.005 85);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.story-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.story-related-img {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
}

.story-related-info {
  padding: 1rem;
}

.story-related-category {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: oklch(0.48 0.06 170);
  display: block;
  margin-bottom: 0.5rem;
}

.story-related-info h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: oklch(0.18 0.02 65);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.story-related-info time {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  color: oklch(0.52 0.02 65);
}

@media (max-width: 767px) {
  .story-hero {
    height: 45vh;
    min-height: 360px;
  }

  .story-hero-content {
    padding: 0 1.25rem 2rem;
  }

  .story-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }

  .story-content {
    padding: 2.5rem 1.25rem 4rem;
  }

  .story-body p {
    font-size: 0.97rem;
    line-height: 1.8;
  }

  .story-body p:first-child {
    font-size: 1.05rem;
  }

  .story-related-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .story-related-card {
    display: grid;
    grid-template-columns: 100px 1fr;
  }

  .story-related-img {
    height: 100%;
    min-height: 100px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .story-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}