/* ============================================================
   responsive.css — breakpoints (mobile-first add-ons)
   480 / 640 / 768 / 1024 / 1280 / 1440 / 1920 / 2560
   ============================================================ */

/* small phones safety: tighten container at 320px */
@media (max-width: 359px) {
  :root { --container-pad: 16px; }
  .hero__title { font-size: clamp(1.85rem, 9vw, 2.4rem); }
  .brand__name { font-size: 0.95rem; }
  .brand__sub { font-size: 0.55rem; }
  .pill--solid span { display: none; }
  .pill--solid { padding: 9px 11px; }
}

/* iOS / mobile fallback: background-attachment:fixed is buggy on iOS Safari
   and most mobile browsers. Use scroll instead — still looks fine. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .story { background-attachment: scroll; }
}

/* === sm: 480px === */
@media (min-width: 480px) {
  :root { --container-pad: 24px; }
  body { font-size: 15px; }
  .section { padding: 72px 0; }
  .hero__inner { padding-bottom: 110px; }
  .hero__title { font-size: clamp(2.2rem, 7.5vw, 4rem); }
  .hero__ctas { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero__ctas .btn { width: auto; }
  .hero__strip-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .strip__cell { padding: 8px 0; }
  .strip__cell--last { grid-column: span 2; }
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .pillars__grid .pcard:last-child { grid-column: span 2; }
}

/* === md: 768px (tablet portrait) === */
@media (min-width: 768px) {
  :root { --container-pad: 32px; }
  .container { max-width: 100%; }

  .section { padding: 96px 0; }

  /* nav */
  .nav__burger { display: none; }
  .nav__cta { display: inline-flex; }
  .pill--ghost .pill__label { display: inline; }

  /* hero */
  .hero__inner { padding-bottom: 130px; padding-top: 100px; }
  .hero__steam { display: block; }
  .hero__title { font-size: clamp(2.6rem, 6.5vw, 4.5rem); margin-bottom: 24px; }

  .hero__strip-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .strip__cell { padding: 6px 0; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.10); padding-right: 32px; }
  .strip__cell:last-child { border-right: none; }
  .strip__cell--last { grid-column: auto; }

  /* hide mobile callbar */
  .callbar { display: none; }
  .footer { padding-bottom: 56px; }

  /* story */
  .story__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .story__art { flex: 1 1 50%; padding: 32px 0; }
  .story__copy { flex: 1 1 50%; }
  .polaroid { max-width: 380px; }
  .polaroid--small { display: block; }

  /* pillars */
  .pillars__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .pillars__grid .pcard:last-child { grid-column: auto; }

  /* kakao */
  .kakao__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .kakao__art {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* gallery — go to 4-col dense (12 cells: 1 tall + 1 wide + 8 reg) */
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
  }
  .gitem--tall { grid-row: span 2; }
  .gitem--wide { grid-column: span 2; }

  /* event */
  .event__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .event__art img { aspect-ratio: 4 / 5; }

  /* contact */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .contact__map {
    grid-column: span 2;
    min-height: 420px;
  }

  /* footer */
  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
  }
  .footer__btm {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .socials a span { display: inline; }
}

/* === lg: 1024px (small laptop) === */
@media (min-width: 1024px) {
  body { font-size: 16px; }
  .container { max-width: 960px; padding: 0 32px; }

  .nav__links { display: inline-flex; align-items: center; gap: 22px; }

  .hero__title { font-size: clamp(3rem, 5.5vw, 4.5rem); }
  .hero__inner { padding-bottom: 150px; }

  /* gallery 4×4 dense */
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
  }

  /* contact: 3-col, map column tall */
  .contact__grid {
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 24px;
    align-items: stretch;
  }
  .contact__map {
    grid-column: auto;
    min-height: 520px;
  }
}

/* === xl: 1280px === */
@media (min-width: 1280px) {
  .container { max-width: 1200px; padding: 0 40px; }
  .section { padding: 110px 0; }
  .hero__title { font-size: clamp(3.4rem, 5vw, 5rem); }
  .hero__inner { padding-bottom: 170px; padding-top: 120px; }

  .gallery__grid {
    grid-auto-rows: 220px;
    gap: 16px;
  }

  .nav__links { gap: 28px; }
  .nav__inner { min-height: 76px; }

  .footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 64px;
  }
}

/* === 2xl: 1440px === */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
  .hero__strip-inner { padding-top: 22px; padding-bottom: 22px; }
  .gallery__grid { grid-auto-rows: 240px; }
}

/* === 3xl: 1920px (Full HD) === */
@media (min-width: 1920px) {
  body { font-size: 17px; }
  .container { max-width: 1600px; }
  .section { padding: 130px 0; }
  .hero__title { font-size: clamp(4rem, 4.6vw, 5.6rem); }
  .h2, h2 { font-size: clamp(2rem, 3vw, 3.2rem); }
  .gallery__grid { grid-auto-rows: 280px; gap: 20px; }
  .pillars__grid { gap: 28px; }
  .pcard { padding: 36px 30px; }
}

/* === 4xl: 2560px === */
@media (min-width: 2560px) {
  body { font-size: 18px; }
  .container { max-width: 2000px; }
  .section { padding: 160px 0; }
  .gallery__grid { grid-auto-rows: 320px; gap: 24px; }
}