/* Mobile-first global styles for consistent layout and spacing */
:root {
  --container-max: 80rem; /* ~1280px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --nav-height: 5rem; /* matches navbar h-20 */
}

/* Dynamic viewport units for mobile devices */
/* Estos valores garantizan que el contenido se adapte correctamente */
/* al viewport dinámico en dispositivos móviles, especialmente iOS */
@supports (height: 100dvh) {
  @media (max-width: 1023px) {
    :root {
      --viewport-height: 100dvh;
      --viewport-width: 100dvw;
      --viewport-inline: 100dvi;
      --viewport-block: 100dvb;
      --viewport-min: 100dvmin;
      --viewport-max: 100dvmax;
    }
  }
}

/* Fallback para navegadores sin soporte de dynamic viewport */
@supports not (height: 100dvh) {
  @media (max-width: 1023px) {
    :root {
      --viewport-height: 100vh;
      --viewport-width: 100vw;
      --viewport-inline: 100vi;
      --viewport-block: 100vb;
      --viewport-min: 100vmin;
      --viewport-max: 100vmax;
    }
  }
}

/* Desktop usa viewport estático */
@media (min-width: 1024px) {
  :root {
    --viewport-height: 100vh;
    --viewport-width: 100vw;
    --viewport-inline: 100vi;
    --viewport-block: 100vb;
    --viewport-min: 100vmin;
    --viewport-max: 100vmax;
  }
}

/* Clases de utilidad para viewport dinámico */
/* Uso: Agregar estas clases a elementos que necesiten ajustarse al viewport */
.h-screen { 
  height: 100vh; /* fallback */
  height: var(--viewport-height, 100vh);
}

.min-h-screen { 
  min-height: 100vh; /* fallback */
  min-height: var(--viewport-height, 100vh);
}

.w-screen { 
  width: 100vw; /* fallback */
  width: var(--viewport-width, 100vw);
}

.max-h-screen { 
  max-height: 100vh; /* fallback */
  max-height: var(--viewport-height, 100vh);
}

/* Container utility to standardize horizontal padding */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  max-width: var(--container-max);
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }
}

/* Section spacing baseline */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* Ensure first content sits below fixed navbar on non-hero pages */
main > section:first-of-type { margin-top: var(--nav-height); }
main > article:first-of-type { margin-top: var(--nav-height); }

/* Homogeneous media and image behavior */
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Restored helpers */
.font-display-italic { font-family: 'Newsreader', serif; font-style: italic; }
.hero-gradient { background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.6) 100%); }

/* Mobile menu transitions */
.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}
.menu-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.hamburger-line {
  transition: all 0.3s ease;
}
.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Navbar glass state */
.glass-nav {
  background: rgba(28, 33, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Masonry Grid Styles - Mobile-first */
.masonry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
  }
}

/* Layout adaptativo según orientación */
@media (min-width: 768px) and (max-width: 1023px) {
  .masonry-card.orientation-horizontal { grid-column: span 1; grid-row: span 1; }
  .masonry-card.orientation-vertical { grid-column: span 1; grid-row: span 2; }
}

/* Desktop: tarjetas ocupan 2 columnas */
@media (min-width: 1024px) {
  .masonry-card.orientation-horizontal { grid-column: span 2; grid-row: span 1; }
  .masonry-card.orientation-vertical { grid-column: span 2; grid-row: span 2; }
}

/* Masonry card */
.masonry-card { display: flex; flex-direction: column; position: relative; }
.masonry-card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
}

/* Aspect ratios según orientación */
.masonry-card.orientation-horizontal .masonry-card-image-wrapper { aspect-ratio: 3 / 2; }
.masonry-card.orientation-vertical .masonry-card-image-wrapper { aspect-ratio: 2 / 3; }

.masonry-card:hover .masonry-card-image-wrapper { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.masonry-card-image { width: 100%; height: 100%; display: block; transition: transform 0.6s ease; object-fit: cover; }

/* Mobile ratios */
@media (max-width: 767px) {
  .masonry-card.orientation-horizontal .masonry-card-image-wrapper { aspect-ratio: 4 / 3; }
  .masonry-card.orientation-vertical .masonry-card-image-wrapper { aspect-ratio: 3 / 4; }
}

/* Tablet ratios */
@media (min-width: 768px) and (max-width: 1023px) {
  .masonry-card.orientation-horizontal .masonry-card-image-wrapper { aspect-ratio: 3 / 2; }
  .masonry-card.orientation-vertical .masonry-card-image-wrapper { aspect-ratio: 2 / 3; }
}

/* Desktop wrapper fills cell */
@media (min-width: 1024px) {
  .masonry-card-image-wrapper { height: 100%; }
  .masonry-card-image { object-position: center; }
}

.masonry-card:hover .masonry-card-image { transform: scale(1.05); }

.masonry-card-title {
  font-family: 'Newsreader', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: #f0f2f0;
  text-align: left;
  margin: 0;
  padding: 0.5rem;
  transition: color 0.3s ease;
  letter-spacing: 0.02em;
}

.masonry-card:hover .masonry-card-title { color: #dce0db; }

/* Photo Gallery - 12-column grid */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

@media (max-width: 1023px) {
  .photo-gallery { grid-template-columns: 1fr; }
}

.gallery-item { position: relative; overflow: hidden; border-radius: 0.5rem; }

/* Mobile: all full width */
@media (max-width: 1023px) {
  .gallery-item-full,
  .gallery-item-three-fourths,
  .gallery-item-two-thirds,
  .gallery-item-half,
  .gallery-item-one-third,
  .gallery-item-one-fourth { grid-column: span 1; }
}

/* Desktop widths */
@media (min-width: 1024px) {
  .gallery-item-full { grid-column: span 12; }
  .gallery-item-three-fourths { grid-column: span 9; }
  .gallery-item-two-thirds { grid-column: span 8; }
  .gallery-item-half { grid-column: span 6; }
  .gallery-item-one-third { grid-column: span 4; }
  .gallery-item-one-fourth { grid-column: span 3; }
}

.gallery-image { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.gallery-item:hover .gallery-image { transform: scale(1.02); }

/* Logo filter utilities */
.logo-white { filter: brightness(0) saturate(100%) invert(100%); }
.wedding-rose-logo { width: 80px; height: auto; opacity: 0.9; filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(248%) hue-rotate(52deg) brightness(103%) contrast(93%); }
@media (min-width: 768px) { .wedding-rose-logo { width: 100px; } }

/* Typography: mobile-first homogeneous scale */
.type-h1 { font-size: 2.5rem; line-height: 1.2; }
.type-h2 { font-size: 2rem; line-height: 1.3; }
.type-h3 { font-size: 1.8rem; line-height: 1.35; }
.type-body { font-size: 1rem; line-height: 1.7; } /* 16px base */
.type-label { font-size: 0.75rem; line-height: 1.5; } /* 12px for navbar links, CTAs, and form labels */
.type-button { font-size: 0.8rem; line-height: 1.5; } /* 12.8px for buttons */

/* Hero title - extra large */
.hero-title { font-size: 1.75rem; line-height: 1.15; }

@media (min-width: 768px) {
  .type-h1 { font-size: 1.875rem; }
  .type-h2 { font-size: 1.5rem; }
  .type-h3 { font-size: 1.25rem; }
  .hero-title { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
  .type-h1 { font-size: 2rem; }
  .type-h2 { font-size: 1.625rem; }
  .type-h3 { font-size: 1.375rem; }
  .type-body { font-size: 0.9375rem; } /* 15px for desktop */
  .hero-title { font-size: 2.75rem; }
}

/* Interactive elements normalization - all must use standard body size (1rem/16px) */
input,
textarea,
select,
button {
  font-size: 1rem; /* 16px - standard body size */
  line-height: 1.5;
  font-family: 'Leto', sans-serif;
}

/* Ensure links use body size by default */
a {
  font-size: inherit; /* Inherit from parent, typically type-body */
}

/* Labels should also use body size */
label {
  font-size: 1rem;
  font-family: 'Leto', sans-serif;
}

/* Rich text defaults for Markdown content */
.richtext { font-family: 'Leto', sans-serif; }
.richtext p,
.richtext li { font-size: 0.9375rem; line-height: 1.7; }
.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6 { font-family: 'Newsreader', serif; font-weight: 400; margin: 1.25em 0 0.5em; color: inherit; }
.richtext h1 { font-size: 1.5rem; line-height: 1.2; }
.richtext h2 { font-size: 1.25rem; line-height: 1.3; }
.richtext h3 { font-size: 1.125rem; line-height: 1.35; }
@media (min-width: 768px) {
  .richtext h1 { font-size: 1.875rem; }
  .richtext h2 { font-size: 1.5rem; }
  .richtext h3 { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .richtext h1 { font-size: 2rem; }
  .richtext h2 { font-size: 1.625rem; }
  .richtext h3 { font-size: 1.375rem; }
}
.richtext a { text-decoration: underline; }
.richtext blockquote { font-family: 'Newsreader', serif; font-style: italic; margin: 1.5em 0; }
.richtext ul { list-style: disc; padding-left: 1.25rem; }
.richtext ol { list-style: decimal; padding-left: 1.25rem; }