/* ============================================
   MARIALVA — Responsive & Accessibility
   ============================================ */

/* ---------- Tablet (768px) ---------- */
@media (max-width: 768px) {
  .nav__links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero__title {
    letter-spacing: 0.08em;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .about__text-col {
    padding-right: 0;
    order: 2;
  }

  .about__img-col {
    order: 1;
  }

  .about__img-col::after {
    display: none;
  }

  .about__img {
    height: 300px;
  }

  /* Countdown — keep horizontal, just smaller */
  .countdown {
    padding: var(--space-md) 0;
  }

  .countdown__unit {
    padding: 0 clamp(0.75rem, 3vw, 1.5rem);
  }

  .countdown__number {
    font-size: clamp(3rem, 10vw, 5rem);
  }

  /* Events — stack to 3-column, hide description */
  .event-row__inner {
    grid-template-columns: 3rem 1fr 1fr;
    gap: var(--space-sm);
  }

  .event-row__desc {
    display: none;
  }

  .event-row__index {
    font-size: 2rem;
  }

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

  .location__map-placeholder {
    min-height: 200px;
  }

  .atmosphere__overlay-text span {
    font-size: clamp(1.5rem, 8vw, 3rem);
  }
}

/* ---------- Small Mobile (480px) ---------- */
@media (max-width: 480px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
  }

  .section {
    min-height: 100svh;
  }

  .hero__tagline {
    letter-spacing: 0.1em;
    font-size: 0.8rem;
  }

  /* Countdown — still horizontal, compact */
  .countdown {
    flex-wrap: nowrap;
    padding: var(--space-sm) 0;
  }

  .countdown__unit {
    padding: 0 0.5rem;
  }

  .countdown__number {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .countdown__dot {
    width: 2px;
    height: 2px;
  }

  .countdown__label {
    font-size: 0.5rem;
    letter-spacing: 0.2em;
  }

  /* Events — single column stack */
  .event-row__inner {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: var(--space-sm) 0;
  }

  .event-row__index {
    font-size: 1.5rem;
  }

  .event-row__name {
    font-size: 1.3rem;
  }

  .event-row__desc {
    display: none;
  }

  .mobile-menu__link {
    font-size: 1.5rem;
  }

  .footer__watermark {
    font-size: 4rem;
  }
}

/* ---------- Large Desktop (1440px+) ---------- */
@media (min-width: 1440px) {
  .section__container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .about__img {
    height: 600px;
  }

}

/* ---------- Touch Devices ---------- */
@media (pointer: coarse) {
  body {
    cursor: auto;
  }

  button {
    cursor: pointer;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  .nav__link:hover::after {
    transform: scaleX(0);
  }

  .nav__link.is-active::after {
    transform: scaleX(1);
  }
}

/* ---------- Hover-capable devices only ---------- */
@media (hover: hover) {
  .event-row:hover .event-row__name {
    color: var(--color-accent);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .loader {
    display: none !important;
  }

  body::before {
    display: none;
  }

  .hero__tagline,
  .hero__date,
  .hero__scroll-cue {
    opacity: 1 !important;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .curtain-reveal {
    clip-path: inset(0 0 0 0) !important;
  }

  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* ---------- High Contrast ---------- */
@media (prefers-contrast: high) {
  :root {
    --color-text-secondary: #d4c8b0;
    --color-text-muted: #a09880;
  }
}

/* ---------- Print ---------- */
@media print {
  body::before,
  .loader,
  .cursor-dot,
  .cursor-ring,
  .nav,
  .mobile-menu,
  .hero__scroll-cue {
    display: none !important;
  }

  .section {
    min-height: auto;
    page-break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }

  .hero__title,
  .section__title {
    color: black;
  }
}