/* ========================================================
   12. RESPONSIVE BREAKPOINTS (MOBILE SMALL & DESKTOP WIDE)
   ======================================================== */
@media (max-width: 360px) {
  .hero-section { min-height: 100svh; }
  .hero-names .hero-name-groom,
  .hero-names .hero-name-bride { font-size: 1.95rem; }
  .red-card { padding-inline: 16px; }
  .groom-name, .bride-name { font-size: 1.62rem; }
  .timeline-card { padding-inline: 18px; }
  .envelope-card { height: 450px; min-height: 450px; max-height: 450px; padding: 20px 16px 18px; }
  .envelope-flower-left { left: -58px; bottom: -66px; top: auto; width: 170px; }
  .envelope-flower-right { right: -32px; top: -42px; width: 165px; }
  .envelope-kicker { margin: 0; }
  .envelope-name-line { font-size: 2.6rem; }
  .envelope-invite-text { font-size: 1.15rem; }
}

@media (min-width: 768px) {
  body { background: var(--side-bg, #d4dbd4); }

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

  .reveal-section { max-width: 560px; margin-inline: auto; }
  .hero-section { max-width: 700px; width: 100%; margin-inline: auto; }

  .envelope-box { width: min(520px, 82vw); }
  .envelope-card {
    height: auto;
    min-height: min(600px, calc(100dvh - 34px));
    max-height: none;
    padding: 54px 42px 42px;
    justify-content: center;
  }
  .envelope-card::before {
    inset: 13px;
    border-radius: 15px;
  }
  .envelope-flower-left {
    left: -68px;
    bottom: -82px;
    top: auto;
    width: 245px;
    opacity: 0.34;
  }
  .envelope-flower-right {
    right: -40px;
    top: -52px;
    width: 235px;
    opacity: 0.32;
  }
  .envelope-kicker {
    margin: 0 0 22px;
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
  }
  .envelope-seal {
    width: 62px;
    height: 62px;
    margin: 0 auto 24px;
  }
  .envelope-seal svg {
    width: 26px;
    height: 26px;
  }
  .envelope-names {
    margin: 0 auto 14px;
  }
  .envelope-name-line {
    font-size: clamp(2.7rem, 8vw, 4rem);
    line-height: 1.02;
    letter-spacing: 0.015em;
  }
  .envelope-name-amp {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.15;
    margin: 2px 0 3px;
  }
  .envelope-divider {
    gap: 12px;
    margin: 8px auto 10px;
    max-width: 170px;
  }
  .envelope-divider .ornament {
    font-size: 0.85rem;
  }
  .envelope-date {
    font-size: clamp(0.92rem, 2.3vw, 1.08rem);
    margin: 2px 0 22px;
    letter-spacing: 0.16em;
  }
  .envelope-invite-text {
    font-size: clamp(1.3rem, 1.8vw, 1.5rem);
    font-weight: 600;
    color: #2c4230;
    margin: 0 auto 22px;
  }
  .btn-open {
    padding: 12px 40px;
    font-size: 0.95rem;
  }

  .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 {
    max-width: 780px !important;
    width: 100%;
    min-height: min(100vh, 1022px);
    max-height: 1022px;
    margin-bottom: 38px;
  }
  .hero-gold-frame {
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    border-radius: 24px;
  }
  .hero-inner-stage {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    min-height: min(100vh, 1022px);
    max-height: 1022px;
    padding: 50px 36px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .hero-title-box {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 0 8px;
    padding: 0;
  }
  .hero-kicker-wrap { margin-bottom: 16px; }
  .hero-kicker {
    font-size: 0.88rem;
    letter-spacing: 0.36em;
    margin: 0;
  }
  .hero-names {
    margin: 12px 0 16px;
  }
  .hero-names .hero-name-groom,
  .hero-names .hero-name-bride {
    font-size: 3.65rem;
    line-height: 1.16;
  }
  .hero-names .amp {
    font-size: 2.1rem;
    margin: 3px 0 5px;
  }
  .hero-date-wrap { margin-top: 12px; }
  .hero-date { font-size: 1.25rem; letter-spacing: 0.32em; }
  .hero-date-divider { margin-top: 8px; }
  .hero-photo-arch-wrap {
    width: clamp(340px, 68%, 460px);
    aspect-ratio: 4 / 4.9;
    max-height: 520px;
    border-radius: 225px 225px 0 0;
    margin: 20px auto 14px;
  }
  .hero-couple-photo { border-radius: 223px 223px 0 0; }
  .hero-quote-box {
    margin-top: 10px;
    max-width: 560px;
    text-align: center;
  }
  .hero-quote-text {
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .hero-leaf-tl { left: -22px; top: 130px; width: 240px; }
  .hero-leaf-tr { right: -22px; top: 130px; width: 240px; }

  .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; }

  .block-title,
  .couple-portraits-heading,
  .card-heading,
  .section-header h2,
  .gallery-heading,
  .reception-header h3,
  .reception-heading,
  .venue-heading,
  .guestbook-heading,
  .gift-heading {
    font-size: 1.25rem !important;
    letter-spacing: .13em !important;
  }
  .parents-grid { min-height: 145px; }
  .family-side small { font-size: .84rem; }
  .family-side h4 { font-size: 1.05rem; line-height: 1.5; }
  .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; }
  .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-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-address { font-size: 1.12rem; }
  .venue-direction-btn { font-size: .88rem; padding: 13px 40px; min-width: 185px; }

  #dresscode { min-height: 200px; padding-top: 34px; margin-bottom: 28px; }
  .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: 1.3rem; }
  .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 28px;
    width: 100%;
    max-width: 760px; /* đủ rộng để câu cảm ơn 1 hàng + căn giữa */
  }
  #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: 1.35rem; }
  .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;
  }
}