/* ========================================================
   12. RESPONSIVE BREAKPOINTS (MOBILE SMALL & DESKTOP WIDE)
   ======================================================== */
@media (max-width: 360px) {
  .hero-section { min-height: 690px; }
  .envelope-stage { width: 285px; height: 330px; }
  .red-card { padding-inline: 16px; }
  .groom-name, .bride-name { font-size: 1.62rem; }
  .timeline-card { padding-inline: 18px; }
  .envelope-flower-left { left: -72px; width: 150px; top: 12px; }
  .family-side h4 { font-size: 0.72rem; letter-spacing: -0.01em; }
}

@media (min-width: 768px) {
  body { background: #ffffff; }

  .app-container {
    width: 100%;
    max-width: 900px;
    border-inline: 1px solid rgba(81, 20, 25, .13);
  }

  .reveal-section { max-width: 560px; }

  .envelope-box { width: min(680px, 85vw); }
  .envelope-card {
    padding: 48px 46px 42px;
  }
  .envelope-flower-left {
    left: -110px;
    width: 245px;
    top: 15px;
  }
  .envelope-name-line { font-size: 2.75rem; }
  .envelope-name-amp { font-size: 1.95rem; }
  .envelope-date { font-size: 1.5rem; margin-bottom: 7px; }
  .envelope-invite-text { font-size: 1.5rem; margin-bottom: 24px; }

  .app-container::before {
    display: none !important;
  }

  .lotus-bg-top-left {
    top: 20px;
    left: -35px;
    width: 330px;
  }

  .lotus-bg-bottom-left {
    top: 600px;
    left: -45px;
    width: 300px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 95%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 95%);
  }

  .lotus-bg-right {
    top: 340px;
    right: -90px;
    width: 310px;
  }

  .hero-section {
    min-height: auto;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .hero-kicker { margin-top: -18px; margin-bottom: 93px; font-size: 1.35rem; }
  .envelope-stage {
    width: 420px;
    height: 485px;
    margin-bottom: 0;
  }
  .hero-title-box {
    margin: 48px auto 52px;
  }
  .hero-names { font-size: 3.25rem; font-weight: 400; line-height: 1.18; }
  .hero-names .amp { font-size: 2.15rem; font-weight: 400; }

  .red-card { min-height: 848px; padding: 42px 34px 36px; overflow: visible; position: relative; }
  .card-flower-lotus-wrap { top: 26%; right: -65px; width: 235px; max-width: 380px; }

  .card-heading { font-size: 18px; letter-spacing: .08em; }
  .parents-grid { min-height: auto; }
  .family-side small { font-size: .84rem; }
  .family-side h4 { font-size: 1.05rem; line-height: 1.5; white-space: normal; }
  .family-side p { font-size: .86rem; line-height: 1.4; }
  .announcement-text { font-size: 1.05rem; max-width: 360px; line-height: 1.6; font-weight: 600; }
  .couple-highlight-names { min-height: 255px; }
  .groom-name, .bride-name { font-size: 2.35rem; }
  .role-badge { font-size: .82rem; }
  .ceremony-note { font-size: 1.05rem; max-width: 360px; line-height: 1.55; font-weight: 600; }
  .ceremony-time-badge .time { font-size: 1.05rem; font-weight: 600; }
  .ceremony-time-badge .date-big { font-size: 2rem; }
  .ceremony-time-badge .lunar { font-size: .94rem; }

  #gallery { min-height: 638px; padding-top: 48px; }
  #gallery .section-header { margin-bottom: 38px; }
  .section-header h2 { font-size: 18px; letter-spacing: .08em; }
  .gallery-carousel { height: 460px; }
  .carousel-slide { width: 280px; }
  .carousel-track { transform: none; gap: 0; }
  .carousel-btn.prev { left: 16px; }
  .carousel-btn.next { right: 16px; }

  .reception-card { min-height: auto; padding: 42px 34px 36px; overflow: visible; }
  .reception-header h3 { font-size: 18px; letter-spacing: .08em; }
  .reception-lead { font-size: 1.05rem; font-weight: 600; }
  .reception-day-time { font-size: 1.02rem; font-weight: 600; }
  .reception-date-num { font-size: 3.4rem; }
  .reception-date-month-year span { font-size: .88rem; }
  .reception-date-month-year strong { font-size: 1.45rem; }
  .reception-lunar { font-size: .94rem; }
  .reception-time-col small { font-size: .85rem; }
  .reception-time-col strong { font-size: 1.45rem; }
  .calendar-paper { max-width: 330px; min-height: auto; padding: 19px 18px; }
  .calendar-paper-title { font-size: 1.45rem; }
  .calendar-grid-header { font-size: .74rem; }
  .calendar-grid-days span { font-size: .82rem; padding: 6px 0; }
  .btn-gold-outline { font-size: .92rem; }
  .btn-cream-solid { font-size: .88rem; padding: 12px 36px; }

  #reception::before {
    right: -135px;
    width: 360px;
    height: 600px;
  }

  #countdown::before {
    left: -60px;
    width: 320px;
    height: 680px;
    top: 50px;
  }

  #venue { min-height: auto; width: 88%; max-width: 560px; padding: 52px 0 34px; margin: 0 auto 24px; }
  .venue-heading { font-size: 18px; letter-spacing: .08em; }
  .venue-address { font-size: 1.05rem; font-family: var(--font-body); }
  .venue-direction-btn { font-size: .82rem; padding: 11px 32px; }

  #dresscode { min-height: 200px; padding-top: 34px; margin-bottom: 28px; }
  #dresscode .section-header h2 { font-size: 18px; letter-spacing: .08em; }
  #dresscode .section-header p { font-size: 1.05rem; }
  .swatch-circle { width: 42px; height: 42px; }

  .timeline-card { min-height: auto; padding: 46px 40px 42px; overflow: visible; }
  .timeline-list { max-width: 420px; gap: 22px; }
  .timeline-time { font-size: 1.15rem; }
  .timeline-text { font-size: 1.18rem; }

  #guestbook { min-height: auto; width: 88%; max-width: 560px; padding-top: 36px; margin-bottom: 36px; }
  .guestbook-card { max-width: 380px; padding: 30px 24px 22px; }
  .guestbook-heading { font-size: 18px; letter-spacing: .08em; }
  .guestbook-form .form-input, .guestbook-form .form-textarea { font-size: 16px; padding: 10px 14px; }
  .wishes-list { max-width: 560px; }
  .wish-author { font-size: 1.02rem; }
  .wish-time { font-size: .82rem; }
  .wish-message { font-size: 1.05rem; }

  #gift {
    min-height: auto;
    padding: 46px 20px 16px;
    width: 100%;
    max-width: 760px;
  }
  #gift .gift-flower-right {
    top: 30px;
    right: -250px;
    width: 250px;
  }
  .gift-wrapper {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gift-heading { font-size: 18px; letter-spacing: .08em; }
  .gift-envelope-box { width: 230px; }
  .gift-hint-text { font-size: 1.18rem; font-weight: 700; }
  footer .gift-thankyou-text {
    font-size: 1.18rem;
    font-weight: 600;
    max-width: 640px;
    text-align: center;
  }
}