/* =============================================
   Responsive Styles
   ============================================= */

/* --- Mobile First Breakpoints --- */

/* Tablets and below (max-width: 1024px) */
@media (max-width: 1024px) {
  .travel-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .floating-botanicals,
  .scroll-vine,
  .starfield {
    display: none;
  }

  .story-photo {
    display: none;
  }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --space-section: clamp(3rem, 6vw, 5rem);
  }

  /* Navigation - Mobile */
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-xl);
    background-color: rgba(44, 74, 46, 0.98);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .nav__menu.is-mobile-visible {
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    font-size: var(--text-xl);
  }

  /* Hero */
  .hero {
    background-attachment: scroll; /* Disable parallax on mobile for performance */
  }

  .hero__content {
    padding: var(--space-3xl) var(--space-lg);
  }

  .hero__names {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  /* Timeline - Mobile: single column */
  .timeline__line {
    left: 20px;
  }

  .timeline__item--left,
  .timeline__item--right {
    flex-direction: row;
    padding-left: 60px;
    padding-right: 0;
    text-align: left;
  }

  .timeline__node {
    left: 20px;
    width: 36px;
    height: 36px;
  }

  .timeline__icon {
    width: 16px;
    height: 16px;
  }

  .timeline__card {
    padding: var(--space-lg);
  }

  /* Day Timeline */
  .day-timeline {
    padding-left: 50px;
  }

  .day-timeline__node {
    left: -40px;
    width: 30px;
    height: 30px;
  }

  .day-timeline__event {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .day-timeline__time {
    min-width: unset;
  }

  /* Cards Grid */
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .grid--2 {
    grid-template-columns: 1fr;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .gallery-item--wide {
    grid-column: span 2;
  }

  /* RSVP */
  .rsvp-card {
    padding: var(--space-xl);
  }

  .radio-group {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Section Mist Transitions */
  .section-mist svg {
    height: clamp(40px, 8vw, 80px);
  }

  .section-wave svg {
    height: 30px;
  }

  /* Footer */
  .footer__names {
    font-size: var(--text-3xl);
  }
}

/* Countdown scrolls responsive */
@media (max-width: 768px) {
  .countdown__heading {
    font-size: var(--text-xl);
  }

  .countdown-scrolls {
    gap: clamp(10px, 2.5vw, 24px);
  }

  .scroll__viewport {
    width: clamp(58px, 18vw, 92px);
    height: clamp(150px, 28vw, 230px);
  }

  .scroll__number {
    font-size: clamp(1.1rem, 3.2vw, 1.7rem);
    height: clamp(32px, 6.5vw, 50px);
  }

  .scroll__number.is-current {
    font-size: clamp(1.3rem, 3.8vw, 2rem);
  }

  .scroll__dowel {
    height: 13px;
    width: calc(100% + 8px);
  }

  .scroll__rod {
    height: 7px;
    width: calc(100% - 8px); /* dowel is 100% + 8px, so rod = dowel - 8px = viewport */
  }

  .scroll__finial {
    width: 13px;
    height: 13px;
  }

  .scroll__bottom-dowel {
    height: 11px;
    width: calc(100% + 6px);
  }

  .scroll__bottom-rod {
    height: 6px;
    width: calc(100% - 6px);
  }

  .scroll__bottom-finial {
    width: 11px;
    height: 11px;
  }

}

@media (max-width: 480px) {
  .countdown-scrolls {
    gap: 8px;
  }

  .scroll__viewport {
    width: clamp(54px, 20vw, 74px);
    height: clamp(120px, 30vw, 180px);
  }

  .scroll__number {
    font-size: clamp(1rem, 3.6vw, 1.35rem);
    height: clamp(28px, 7vw, 40px);
  }

  .scroll__number.is-current {
    font-size: clamp(1.15rem, 4.2vw, 1.6rem);
  }

  .scroll__label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
  }

  .scroll__dowel {
    height: 11px;
    width: calc(100% + 6px);
  }

  .scroll__rod {
    height: 6px;
    width: calc(100% - 6px); /* dowel is 100% + 6px, so rod = dowel - 6px = viewport */
  }

  .scroll__finial {
    width: 11px;
    height: 11px;
  }

  .scroll__bottom-dowel {
    height: 9px;
    width: calc(100% + 4px);
  }

  .scroll__bottom-rod {
    height: 5px;
    width: calc(100% - 4px);
  }

  .scroll__bottom-finial {
    width: 9px;
    height: 9px;
  }

}

/* Small phones (max-width: 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .hero__names {
    font-size: clamp(2rem, 14vw, 3rem);
  }

  .hero__prelude {
    font-size: var(--text-base);
  }

  .section__title {
    font-size: var(--text-3xl);
  }

  /* Gallery: single column on very small screens */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  .gallery-item--wide,
  .gallery-item--tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Card padding */
  .card {
    padding: var(--space-lg);
  }

  .rsvp-card {
    padding: var(--space-lg);
  }

  /* Timeline adjustments */
  .timeline {
    padding: var(--space-md) 0;
  }

  .timeline__item {
    margin-bottom: var(--space-2xl);
  }

  .timeline__card {
    padding: var(--space-md);
  }

  /* Registry */
  .registry-card {
    padding: var(--space-xl);
  }

  /* Footer */
  .footer__names {
    font-size: var(--text-2xl);
  }
}

/* Large screens (min-width: 1440px) */
@media (min-width: 1440px) {
  :root {
    font-size: 18px;
  }
}

/* Touch device improvements */
@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .card::before {
    display: none;
  }

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

/* Print styles */
@media print {
  .nav,
  .hero__scroll,
  .loading-overlay,
  .section-wave,
  .section-mist,
  #rsvp,
  #gallery {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    background: #fff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }

  .section::before,
  .section::after {
    display: none !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}