/*
 AAL Responsive System v1 — 15 August 2026
 Purpose: deliberate tablet/mobile behaviour without altering established desktop styling.
 Breakpoint intent:
   <=1180 compact desktop/tablet landscape
   <=1040 tablet navigation + balanced grids
   <=820  tablet portrait
   <=700  mobile
   <=480  narrow mobile
*/

/* Prevent long URLs/labels from forcing horizontal overflow. */
html,body{max-width:100%;overflow-x:hidden}
main,section,article,div{min-width:0}

@media (max-width:1180px){
  .container{width:min(calc(100% - 2rem),var(--max))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
  .footer-grid>div:first-child{grid-column:1/-1}
  .what-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Tablet landscape and below: use the mobile menu before the full nav becomes cramped. */
@media (max-width:1040px){
  .nav-shell{min-height:76px}
  .brand img{width:76px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;cursor:pointer}
  .site-nav{display:none;position:absolute;top:76px;left:1rem;right:1rem;max-height:calc(100vh - 92px);overflow:auto;background:#0e1830;padding:.8rem;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:.25rem}
  .site-nav.open{display:flex}
  .site-nav a{display:flex;align-items:center;min-height:44px;padding:.65rem .8rem}
  .site-nav .nav-cta{justify-content:center;margin-top:.2rem}

  .what-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .what-card{min-height:auto}
  .engagement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .engagement-grid>.engagement-card:last-child:nth-child(odd){grid-column:1/-1}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid>.process-step:last-child:nth-child(odd){grid-column:1/-1}
  .proof-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col,.subscription-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .image-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tablet portrait: one-column hero but keep suitable content in two balanced columns. */
@media (max-width:820px){
  .hero{padding:3rem 0 1.6rem}
  .hero-grid,.subscription-grid,.contact-grid{grid-template-columns:1fr}
  .hero-home .hero-media{margin-top:.35rem}
  .hero-media img{aspect-ratio:16/9;object-position:center}
  .lead{font-size:1.05rem}
  .section{padding:1.55rem 0}
  .section h2{font-size:clamp(1.55rem,4.5vw,2.15rem)}
  .cta-panel{grid-template-columns:1fr}
  .cta-actions{justify-content:flex-start}
  .report-feature-card{grid-template-columns:1fr}
  .report-side-panel{border-left:0;border-top:1px solid var(--line)}
  .report-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Homepage service line becomes a compact swipeable strip rather than wrapping. */
  .service-lineup{overflow:hidden}
  .lineup-shell{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;gap:.55rem;padding:.55rem 0;text-align:left}
  .lineup-shell::-webkit-scrollbar{display:none}
  .lineup-shell a{white-space:nowrap;flex:0 0 auto;padding:.4rem .15rem}
  .lineup-shell span{flex:0 0 auto}

  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-grid>.footer-ask-panel{grid-column:1/-1}
  .footer-grid>div:last-child{grid-column:1/-1}
}

@media (max-width:700px){
  :root{--radius:18px;--radius-sm:14px}
  .container{width:min(calc(100% - 1.4rem),var(--max))}
  .nav-shell{min-height:68px}
  .brand{gap:.55rem}
  .brand img{width:60px}
  .brand span{font-size:.88rem;line-height:1.15;max-width:170px}
  .site-nav{top:68px;left:.7rem;right:.7rem;max-height:calc(100vh - 82px);border-radius:16px}

  .hero{padding:2.15rem 0 1.2rem}
  .hero-home{padding-top:2rem}
  h1,.hero-inner h1,.hero-home h1{font-size:clamp(1.9rem,8.6vw,2.45rem);line-height:1.08;letter-spacing:-.025em}
  .eyebrow{font-size:.72rem;letter-spacing:.12em;margin-bottom:.7rem}
  .lead{font-size:1rem;line-height:1.58;margin-bottom:1.1rem}
  .cred-line{display:block;border-radius:15px;padding:.68rem .78rem;font-size:.88rem;line-height:1.4}
  .hero-media img{aspect-ratio:16/9;border-radius:18px}

  .button{min-height:44px;padding:.78rem 1rem}
  .button-row{gap:.6rem;margin-top:1.05rem}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .hero-actions>.button:first-child{grid-column:1/-1}
  .hero-actions>.button.secondary,.hero-actions>.button.ghost{padding:.68rem .55rem;font-size:.86rem;line-height:1.25;box-shadow:none}

  .section{padding:1.25rem 0}
  .section h2{font-size:clamp(1.45rem,6.4vw,1.9rem);line-height:1.15;margin-bottom:.75rem}
  .section p{line-height:1.58}
  .card,.engagement-card,.process-step,.proof-item,.what-card{padding:1rem}

  .what-grid,.engagement-grid,.process-grid,.image-card-grid,.two-col,.subscription-benefits{grid-template-columns:1fr}
  .engagement-grid>.engagement-card:last-child:nth-child(odd),.process-grid>.process-step:last-child:nth-child(odd){grid-column:auto}
  .what-grid,.engagement-grid,.process-grid,.image-card-grid,.card-grid,.proof-strip{gap:.8rem}
  .card-grid{grid-template-columns:1fr}
  .proof-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-item strong{font-size:1.08rem}
  .proof-item span{font-size:.88rem;line-height:1.45}

  .cta-band{padding:1.35rem 0}
  .cta-panel{padding:1.05rem;gap:.9rem}
  .cta-actions{display:grid;grid-template-columns:1fr;gap:.55rem}
  .cta-actions .button{width:100%}

  .report-meta-grid{grid-template-columns:1fr}
  .report-feature-main,.report-side-panel{padding:1rem}

  .faq-list details{padding:.9rem 1rem}
  .faq-list summary{line-height:1.4}

  /* Mobile footer: simple lists sit side by side; richer blocks use full width. */
  .site-footer{margin-top:2rem;padding:1.7rem 0 1rem}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .footer-grid>div:first-child,.footer-grid>.footer-ask-panel,.footer-grid>div:last-child{grid-column:1/-1}
  .footer-logo{max-width:145px}
  .footer-blurb{font-size:.92rem}
  .footer-grid h3{font-size:.96rem}
  .footer-grid li{font-size:.9rem;line-height:1.35;margin:.42rem 0}
  .footer-search-row{flex-direction:row}
  .footer-search-row input{min-height:44px}
  .footer-search-row button{min-height:44px}
  .footer-socials{gap:.4rem}
  .footer-social-link{padding:.48rem .58rem;font-size:.86rem;min-height:40px}
  .footer-bottom{display:block;padding-top:.8rem;font-size:.86rem}
  .footer-bottom p{margin:.45rem 0}

  .qr-card img{max-width:min(260px,100%)}
  .topic-list{columns:1}
  .form-row{grid-template-columns:1fr}

  #aal-home-video-preview{width:min(100% - 1.4rem,720px)!important;margin:34px auto 44px!important}
  #aal-home-video-preview .aal-video-layout{gap:22px!important}
  #aal-home-video-preview .aal-video-content{text-align:left!important}
  #aal-home-video-preview .aal-video-topics{justify-content:flex-start!important;margin-top:18px!important}
}

@media (max-width:480px){
  .brand span{display:none}
  .brand img{width:66px}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions>.button:first-child{grid-column:auto}
  .proof-strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-search-row{flex-direction:column}
  .footer-search-row button{width:100%}
  .footer-social-link span:last-child{display:none}
  .footer-social-link{width:42px;height:42px;padding:0;justify-content:center}
  .footer-social-icon{width:1.55rem;height:1.55rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}