/* ==========================================================================
   TANGER OUTLETS — responsive layer
   Breakpoints tuned for 1920/1680/1440/1366/1280/1024/834/768/430/414/390/375/360
   ========================================================================== */

/* ---- 1680px and up: allow the wide container to breathe ---- */
@media (min-width:1681px){
  :root{--gut:4.5rem}
  .hero-grid{padding-block:clamp(4rem,5vw,7rem)}
}

/* ---- 1440px and below ---- */
@media (max-width:1440px){
  :root{--wide:1360px;--standard:1180px}
}

/* ---- 1366 / 1280 ---- */
@media (max-width:1366px){
  :root{--standard:1120px;--gut:2.5rem}
  .nav-list{gap:.15rem}
  .nav-list a{padding-inline:.42rem;font-size:.72rem;letter-spacing:.09em}
}

@media (max-width:1180px){
  .nav-list a{font-size:.7rem;letter-spacing:.07em;padding-inline:.34rem}
  .nav-cta{padding:.6rem 1rem;font-size:.68rem}
  .footer-top{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.25fr)}
  .footer-col--links2{display:none}
}

/* ---- 1024px: tablet landscape — switch to drawer nav ---- */
@media (max-width:1024px){
  :root{--gut:2rem}
  .nav-list,.nav-actions .nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-inner{min-height:68px}
  .nav-drawer{padding-top:calc(68px + var(--s-4))}

  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero-media{order:-1}
  .hero-badge{left:auto;right:12px;bottom:-18px;max-width:210px}

  .page-head-grid{grid-template-columns:1fr;gap:1.8rem;align-items:start}

  .offset{grid-template-columns:1fr;gap:0}
  .offset-media{grid-column:1;grid-row:1}
  .offset-card{grid-column:1;grid-row:2;margin:-2.5rem 1.25rem 0;box-shadow:0 24px 48px -34px rgba(23,26,69,.5)}

  .article{grid-template-columns:1fr;gap:1.6rem}

  .journey-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.6rem}
  .journey-line{display:none}
  .journey-step .journey-arrow{display:none}

  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem}
  .footer-col--links2{display:block}
}

/* ---- 900px ---- */
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--media-right .split-media{order:0}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-row{grid-template-columns:1fr;gap:1.5rem}
  .form-grid{grid-template-columns:1fr}
}

/* ---- 834 / 768: tablet portrait ---- */
@media (max-width:834px){
  :root{--gut:1.75rem;--sec-y:clamp(3.25rem,7vw,4.75rem)}
  .g-2,.g-3{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .cat-cell{min-height:0}
  .hero-badge{position:static;margin-top:1.15rem;max-width:none;display:inline-block}
  .value-type{max-width:100%}
  .media-mark::after{width:52px;height:52px}
}

/* ---- 640px ---- */
@media (max-width:640px){
  :root{--gut:1.25rem}
  .g-4{grid-template-columns:1fr}
  .journey-track{grid-template-columns:1fr;gap:1.8rem}
  .journey-dot{width:56px;height:56px;margin-bottom:1rem}
  .offset-card{margin:-1.75rem .75rem 0;border-radius:14px}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
  .btn-row .btn{width:100%}
  .steps li{grid-template-columns:1fr;gap:.4rem}
  .steps li::before{padding-top:0}
  .drawer-list a{font-size:1.35rem}
}

/* ---- 430 / 414 / 390 / 375 / 360: phones ---- */
@media (max-width:480px){
  :root{--gut:1.1rem;--sec-y:2.75rem}
  body{font-size:1rem}
  .display{font-size:clamp(2.4rem,11vw,3.2rem);letter-spacing:-.035em}
  .h1{font-size:clamp(2rem,9vw,2.6rem)}
  .h2{font-size:clamp(1.6rem,7.2vw,2.1rem)}
  .h3{font-size:1.15rem}
  .big-num{font-size:clamp(3rem,17vw,4.6rem)}
  .lead{font-size:1.02rem}
  .brand-type b{font-size:.98rem}
  .brand-type span{font-size:.54rem;letter-spacing:.28em}
  .nav-inner{min-height:64px}
  .nav-drawer{padding-top:calc(64px + 1.5rem)}
  .value-lines .outline{-webkit-text-stroke-width:1.5px}
  .pullquote{padding-left:1rem;border-left-width:3px}
  .card-body,.panel,.offer{padding:1.2rem}
  .access-card{padding:1.6rem 1.25rem;border-radius:18px}
  .social-row a{width:40px;height:40px}
  .table-scroll{-webkit-overflow-scrolling:touch}
}

@media (max-width:360px){
  :root{--gut:1rem}
  .display{font-size:2.2rem}
  .h1{font-size:1.85rem}
  .journey-dot{width:52px;height:52px;font-size:1rem}
  .btn{padding:.9rem 1.1rem;font-size:.76rem;letter-spacing:.08em}
  .chip{font-size:.64rem;padding:.38rem .75rem}
}

/* ---- Short landscape phones ---- */
@media (max-height:520px) and (orientation:landscape){
  .access-body{align-items:start;padding-block:2rem}
  .nav-drawer{padding-top:5rem}
  .drawer-list a{padding-block:.7rem;font-size:1.15rem}
}

/* ---- Print ---- */
@media print{
  .site-header,.nav-drawer,.rail-strip,.cta-band,.skip-link{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:1.5rem}
  .site-footer{background:#fff;color:#000;border-top:1px solid #ccc}
  .site-footer a{color:#000}
}

/* ---- Brand index ---- */
@media (max-width:1024px){
  .brand-row{grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.1rem;align-items:start}
  .brand-row p{grid-column:2}
  .brand-row .arrow-link{grid-column:2;margin-top:.4rem}
}
@media (max-width:480px){
  .brand-row{padding-inline:.35rem}
  .brand-row h3{font-size:1.5rem}
  .nameplates li{font-size:.72rem;padding:.42rem .75rem}
}

/* ---- Asymmetric grid utilities collapse ---- */
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento > .b4,.bento > .b2{grid-column:span 1}
}
@media (max-width:900px){
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
}
/* Safety net: no inline grid definition may force a horizontal overflow on phones */
@media (max-width:834px){
  main .grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  main .grid[style*="grid-template-columns"] > *{grid-column:auto!important}
}

/* ---- Value typography block ---- */
@media (max-width:834px){
  .value-type{max-width:100%}
}