/* ==========================================================================
   Birthday Greeting Page - Responsive Styles
   Media queries and breakpoints for all screen sizes (320px – 2560px)
   ========================================================================== */

/* ==========================================================================
   Base / Mobile-First Styles (< 768px)
   Single-column layout, full width, 16px horizontal padding
   ========================================================================== */

/* Prevent horizontal scrolling on all viewports */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Sections: single-column, full width with padding */
.section {
  width: 100%;
  max-width: 100%;
  padding: 60px var(--mobile-padding);
  margin: 0 auto;
}

/* Hero section: full viewport, proportional text */
.hero {
  padding: 40px var(--mobile-padding);
}

.hero__title {
  font-size: clamp(2rem, 8vw, var(--font-size-hero));
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero__subtitle {
  font-size: clamp(1rem, 3.5vw, var(--font-size-lg));
}

.hero__name {
  font-size: clamp(1.5rem, 6vw, var(--font-size-name));
}

.hero__date {
  font-size: clamp(1rem, 3.5vw, var(--font-size-lg));
}

/* Section titles: responsive sizing */
.section__title,
.gallery__heading,
.wishes__heading {
  font-size: clamp(1.5rem, 5vw, var(--font-size-2xl));
}

/* Flip card: min-width 280px on mobile, full width within padding */
.flipcard {
  min-width: 280px;
  max-width: 100%;
  width: 100%;
}

/* Wishes section message: full width on mobile */
.wishes-section__message,
.wishes__content {
  padding: 1.5rem;
  font-size: var(--font-size-base);
  line-height: 1.8;
}

/* Gallery grid: single column on small mobile, 2 columns on larger mobile */
.gallery__grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

/* Footer: proportional text */
.footer__message {
  font-size: clamp(1.25rem, 4vw, var(--font-size-xl));
}

/* ==========================================================================
   Touch Targets – Mobile (< 768px)
   All interactive elements minimum 44x44px
   ========================================================================== */

/* Buttons and interactive elements */
.music-btn,
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: var(--touch-target-min);
  height: var(--touch-target-min);
}

/* Flip card interactive area: already large enough, but ensure tap area */
.flipcard__inner {
  min-height: var(--touch-target-min);
}

/* Gallery items: ensure tap target */
.gallery__image-wrapper {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* Links and inline interactive elements */
a,
button,
[role="button"],
[tabindex="0"] {
  min-height: var(--touch-target-min);
  /* Use inline-flex to respect min-height without breaking inline flow */
}

/* Intro overlay: full tap area to skip */
.intro-overlay {
  min-height: var(--touch-target-min);
}

/* ==========================================================================
   Small Mobile (320px – 480px)
   Extra tight layout constraints
   ========================================================================== */
@media screen and (max-width: 480px) {
  .section {
    padding: 48px 12px;
  }

  .hero {
    padding: 32px 12px;
  }

  .hero__title {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }

  .hero__name {
    font-size: clamp(1.25rem, 7vw, 1.75rem);
  }

  .flipcard {
    min-width: 280px;
    width: calc(100% - 24px);
    margin: 0 auto;
  }

  .flipcard__message {
    font-size: var(--font-size-base);
    padding: 1rem;
  }

  .gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
  }

  .wishes-section__message,
  .wishes__content {
    padding: 1rem;
    font-size: var(--font-size-base);
  }

  .lightbox__image {
    max-width: 95vw;
    max-height: 75vh;
  }

  .lightbox__prev {
    left: 0.5rem;
  }

  .lightbox__next {
    right: 0.5rem;
  }

  .lightbox__close {
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* ==========================================================================
   Tablet & Desktop (≥ 768px)
   Multi-column/wider layout, max-width 1200px centered
   ========================================================================== */
@media screen and (min-width: 768px) {
  /* Sections: centered with max-width */
  .section {
    max-width: var(--content-max-width);
    padding: 80px 32px;
    margin: 0 auto;
  }

  /* Hero: larger spacing */
  .hero {
    max-width: none;
    padding: 80px 48px;
  }

  .hero__title {
    font-size: var(--font-size-hero);
  }

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

  .hero__name {
    font-size: var(--font-size-name);
  }

  .hero__date {
    font-size: var(--font-size-lg);
  }

  /* Section titles */
  .section__title,
  .gallery__heading,
  .wishes__heading {
    font-size: var(--font-size-2xl);
  }

  /* Flip card: constrained max-width */
  .flipcard {
    max-width: 500px;
    min-width: 280px;
    width: 100%;
  }

  .flipcard__message {
    font-size: var(--font-size-lg);
    padding: 2rem;
  }

  /* Wishes section: wider, more breathing room */
  .wishes-section__message,
  .wishes__content {
    padding: 2.5rem;
    font-size: var(--font-size-lg);
    max-width: 800px;
    margin: 0 auto;
  }

  /* Gallery grid: multi-column layout */
  .gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }

  /* Lightbox: more room for image display */
  .lightbox__image {
    max-width: 85vw;
    max-height: 85vh;
  }

  .lightbox__prev {
    left: 2rem;
  }

  .lightbox__next {
    right: 2rem;
  }

  .lightbox__close {
    top: 1.5rem;
    right: 1.5rem;
  }

  /* Footer */
  .footer__message {
    font-size: var(--font-size-xl);
  }
}

/* ==========================================================================
   Large Desktop (≥ 1200px)
   More generous spacing, larger gallery grid
   ========================================================================== */
@media screen and (min-width: 1200px) {
  .section {
    max-width: var(--content-max-width);
    padding: 100px 48px;
  }

  .hero {
    padding: 100px 64px;
  }

  .gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
  }

  .wishes-section__message,
  .wishes__content {
    padding: 3rem;
  }
}

/* ==========================================================================
   Extra Large / Ultra-Wide (≥ 1920px)
   Prevent content from stretching too wide
   ========================================================================== */
@media screen and (min-width: 1920px) {
  .section {
    max-width: var(--content-max-width);
  }

  .hero {
    max-width: none;
  }

  /* Ensure gallery doesn't get too spread out */
  .gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    max-width: var(--content-max-width);
    margin: 0 auto;
  }
}

/* ==========================================================================
   Typography Scaling
   Proportional scaling using clamp() across all breakpoints
   Ensures minimum 16px body text on all screen widths (Requirement 4.6)
   ========================================================================== */

/* Body text: minimum 16px always */
body {
  font-size: clamp(16px, 1rem + 0.2vw, 18px);
}

/* Paragraphs inherit body sizing */
p {
  font-size: inherit;
  line-height: 1.6;
}

/* Ensure flip card hint is readable */
.flipcard__hint {
  font-size: clamp(0.8rem, 2.5vw, var(--font-size-sm));
}

/* ==========================================================================
   Spacing Scaling
   Proportional spacing adjustments
   ========================================================================== */

/* Section container within sections */
.section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .section__container {
    max-width: var(--content-max-width);
  }
}

/* ==========================================================================
   Landscape Mobile Orientation
   Prevent layout issues on rotated phones
   ========================================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: 100vh;
    padding: 32px var(--mobile-padding);
  }

  .flipcard {
    max-height: 80vh;
  }

  .flipcard__inner {
    max-height: 80vh;
  }
}

/* ==========================================================================
   High-DPI / Retina Adjustments
   Ensure crisp rendering on high-density displays
   ========================================================================== */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .flipcard__inner {
    border-radius: 16px;
  }

  .gallery__image-wrapper {
    border-width: 2px;
  }
}

/* ==========================================================================
   Print Styles (basic)
   Ensure content prints cleanly if needed
   ========================================================================== */
@media print {
  .particles-canvas,
  .cursor-follower,
  .music-btn,
  .intro-overlay,
  .lightbox {
    display: none !important;
  }

  .hero {
    height: auto;
    background: none;
    animation: none;
  }

  .section {
    padding: 2rem 1rem;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   New Sections - Mobile Responsive (added for polish)
   ========================================================================== */

/* Countdown birthday top - compact on mobile */
.section--countdown-top {
  padding: 16px var(--mobile-padding);
}

.countdown-birthday {
  padding: 1.25rem;
}

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

.countdown-birthday__timer {
  gap: 1rem;
}

/* Avatar stories - scrollable on mobile */
.section--avatar-stories {
  padding: 16px 0;
}

.avatar-stories__row {
  justify-content: flex-start;
  padding: 0 var(--mobile-padding);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.avatar-stories__row::-webkit-scrollbar {
  display: none;
}

/* Stories viewer - full width on mobile */
.stories__viewer {
  max-width: 100%;
  border-radius: 12px;
}

/* Timeline - already handled in main.css mobile rules */

/* Love meter - compact */
.love-meter__bar-wrap {
  max-width: 100%;
  padding: 0 var(--mobile-padding);
}

/* LED marquee - smaller on mobile */
.led-marquee__text {
  font-size: clamp(0.65rem, 2.2vw, 1.1rem);
  letter-spacing: 0.15em;
}

/* Candle section */
.candle__scene {
  height: 160px;
}

/* Scratch/Gift box */
.scratch__gift-box {
  min-width: 160px;
  padding: 1.5rem;
}

/* Wishes quote SVG */
.handwritten-svg {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .section--countdown-top {
    padding: 24px 32px;
  }

  .avatar-stories__row {
    justify-content: center;
    overflow-x: visible;
  }

  .stories__viewer {
    max-width: 360px;
  }

  .countdown-birthday__value {
    font-size: 2.5rem;
  }

  .countdown-birthday__timer {
    gap: 1.5rem;
  }
}

/* Tablet landscape */
@media screen and (min-width: 1024px) {
  .stories__viewer {
    max-width: 380px;
  }
}