/* ===========================================================
   Reminiscence with Love — responsive stylesheet
   Breakpoints: 1100 (desktop-narrow) · 880 (tablet) · 640 (mobile) · 420 (small)
   =========================================================== */

/* ---------- 1100px : NARROW DESKTOP ---------- */
@media (max-width: 1100px) {
  .nav-primary { gap: 1.6rem; }
  .nav-primary a { font-size: 0.9rem; }

  .hero-grid { gap: 50px; }
  .hero-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { padding: 30px 24px 36px; }

  .process-list { grid-template-columns: repeat(2, 1fr); }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
  }
  .footer-contact { grid-column: span 3; }
}

/* ---------- 880px : TABLET ---------- */
@media (max-width: 880px) {
  :root {
    --pad: 24px;
  }

  /* Header */
  .nav-primary { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  /* Hero */
  .sec-hero {
    padding: 110px 0 70px;
    min-height: auto;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hero-text { max-width: 100%; }
  .hero-title {
    font-size: clamp(2.4rem, 9vw, 3.6rem);
  }
  .hero-visual {
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    max-height: none;
  }
  .hero-meta {
    flex-wrap: wrap;
    gap: 24px 36px;
  }
  .scroll-cue { display: none; }

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-image { max-height: 56vh; aspect-ratio: 5/4; }
  .about-text { order: 2; }
  .about-image { order: 1; }

  /* Collections bento — collapse to 2 col */
  .sec-collections-content {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .collection-card.size-lg {
    grid-column: span 2;
    flex-direction: column;
    min-height: auto;
  }
  .collection-card.size-lg .card-image {
    flex: 0 0 auto;
    aspect-ratio: 16/10;
    min-height: 0;
  }
  .collection-card.size-lg .card-body {
    flex: 1 1 auto;
    padding: 28px 26px;
  }
  .collection-card.size-md {
    grid-column: span 1;
    min-height: 460px;
  }
  .collection-card.size-md .card-image { min-height: 230px; }
  .collection-card.size-sm {
    grid-column: span 1;
    min-height: 360px;
  }

  /* Offer */
  .offer-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .offer-text { order: 1; text-align: center; }
  .offer-text .eyebrow { justify-content: center; }
  .offer-text p { margin-left: auto; margin-right: auto; }
  .offer-list {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .offer-cta { justify-content: center; }
  .offer-card { order: 2; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .footer-brand { grid-column: span 2; max-width: 100%; }
  .footer-contact { grid-column: span 2; }
  .mobile-menu a{width: 100%; min-width: 200px;}
  .menu-link-a {color: var(--ink-soft);}
}

/* ---------- 640px : MOBILE ---------- */
@media (max-width: 640px) {
  :root {
    --pad: 20px;
  }

  body { line-height: 1.65; }

  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.85rem, 7vw, 2.6rem); }
  h3 { font-size: 1.35rem; }

  /* Header */
  .site-header { padding: 14px 0; }
  .brand-mark { width: 38px; height: 38px; font-size: 1rem; }
  .brand-name-bn { font-size: 0.95rem; }
  .brand-name-en { font-size: 0.72rem; }

  /* Hero */
  .sec-hero { padding: 100px 0 60px; }
  .hero-title { line-height: 1.1; }
  .hero-sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-meta {
    gap: 18px 24px;
    padding-top: 1.5rem;
  }
  .meta-num { font-size: 1.35rem; }
  .meta-label { font-size: 0.72rem; }

  .hero-frame-secondary {
    width: 55%;
    height: 45%;
    inset: auto -4% -4% auto;
  }
  .hero-frame-tag { font-size: 0.7rem; padding: 5px 10px; }

  /* Marquee */
  .sec-marquee { padding: 16px 0; }
  .marquee-track span { font-size: 0.95rem; }
  .marquee-track { gap: 1.6rem; padding-left: 1.6rem; }

  /* About */
  .about-text h2 { font-size: 2rem; }
  .about-image-caption {
    padding: 24px 20px 20px;
    font-size: 1rem;
  }

  /* Collections — single column */
  .sec-collections-content {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .collection-card.size-lg,
  .collection-card.size-md,
  .collection-card.size-sm {
    grid-column: span 1;
    min-height: auto;
  }
  .collection-card .card-image {
    aspect-ratio: 16/11;
    min-height: 0;
  }
  .collection-card .card-body {
    padding: 24px 22px 26px;
  }
  .collection-card.size-lg .card-body {
    padding: 28px 22px 30px;
  }
  .collection-card.size-lg .card-body h3 { font-size: 1.7rem; }

  /* Offer */
  .offer-text h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .ticket {
    padding: 28px 24px 24px;
    transform: rotate(0deg);
  }
  .ticket-price .big {
    font-size: clamp(3rem, 14vw, 4rem);
  }
  .offer-cta { flex-direction: column; }
  .offer-cta .btn { width: 100%; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature {
    border-left: 1px solid var(--line);
  }

  /* Process */
  .process-list { grid-template-columns: 1fr; }

  /* Testimonials */
  .testimonial { padding: 32px 26px 26px; }
  .testimonial blockquote { font-size: 1rem; }

  /* CTA */
  .sec-cta h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { width: 100%; }
  .cta-meta {
    flex-direction: column;
    gap: 8px;
  }
  .cta-meta .dot { display: none; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-brand,
  .footer-contact { grid-column: span 1; }
  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ---------- 420px : SMALL ---------- */
@media (max-width: 420px) {
  .brand-name-bn { font-size: 0.9rem; }
  .brand-name-en { font-size: 0.68rem; }
  .hero-title { font-size: 2.2rem; }
  .hero-sub { font-size: 0.96rem; }
  .ticket { padding: 24px 20px 22px; }
  .ticket-top { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- LANDSCAPE PHONE ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .sec-hero {
    min-height: auto;
    padding: 100px 0 60px;
  }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual { max-height: 80vh; }
}