/* ============================================================
   JOURDANTON PHARMACY — FINAL MOBILE SYSTEM
   Loaded AFTER style.css and intentionally owns tablet/mobile UX.
   Desktop above 1024px is untouched.
   ============================================================ */

/* ---------- Tablet / collapsed navigation: 768–1024 ---------- */
@media (max-width:1024px){
  .desktop-nav{display:none!important}
  .menu-toggle{display:grid!important}
  .header-actions{margin-left:auto!important}
  .header-call span{display:none}

  .header-inner{
    min-height:70px;
    gap:12px;
  }

  .menu-toggle{
    width:46px;
    height:46px;
    flex:0 0 46px;
    margin-left:auto;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 18px rgba(9,39,65,.08);
  }

  .hero-home{min-height:560px}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .footer-grid{grid-template-columns:1.25fr 1fr 1fr!important}
}

/* ---------- Phone layout ---------- */
@media (max-width:767px){
  :root{
    --mobile-gutter:18px;
  }

  html{
    scroll-padding-top:72px;
  }

  body{
    overflow-x:hidden;
    padding-bottom:72px;
  }

  .container{
    width:calc(100% - (var(--mobile-gutter) * 2))!important;
    max-width:none!important;
  }

  /* Compact red utility bar:
     phone + address on row one, hours on row two. */
  .utility-bar{
    display:block!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .utility-inner{
    min-height:0!important;
    padding:7px 0 8px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "phone address"
      "hours hours";
    align-items:center!important;
    gap:4px 10px!important;
    font-size:.69rem!important;
    line-height:1.25!important;
  }

  .utility-inner > a:first-child{
    grid-area:phone;
    justify-self:start;
  }

  .utility-address{
    grid-area:address;
    justify-self:end;
  }

  .utility-hours{
    grid-area:hours;
    justify-self:center;
  }

  .utility-inner > a,
  .utility-hours,
  .utility-address{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    gap:4px!important;
    color:#fff!important;
    white-space:nowrap!important;
    text-align:center!important;
  }

  .utility-inner .icon-sm{
    width:12px!important;
    height:12px!important;
    flex:0 0 12px!important;
  }

  /* Header */
  .site-header{
    background:rgba(255,255,255,.985)!important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .header-inner{
    min-height:62px!important;
    padding-block:7px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  .brand{
    min-width:0!important;
    max-width:calc(100% - 54px)!important;
    gap:8px!important;
  }

  .brand-mark{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:10px!important;
    font-size:.78rem!important;
  }

  .brand-text{
    min-width:0!important;
    font-size:.74rem!important;
    line-height:.9!important;
  }

  .brand-text strong{
    white-space:nowrap!important;
  }

  .brand-text strong:last-child{
    font-size:.82rem!important;
  }

  .header-actions{
    margin-left:auto!important;
    flex:0 0 auto!important;
  }

  .header-actions > .btn{
    display:none!important;
  }

  .menu-toggle{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    margin-left:auto!important;
    padding:8px!important;
    border-radius:12px!important;
  }

  .mobile-menu{
    padding:8px var(--mobile-gutter) 18px!important;
    border-top:1px solid var(--line)!important;
    background:#fff!important;
    box-shadow:0 18px 36px rgba(9,39,65,.13)!important;
  }

  .mobile-nav .nav-link{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding:10px 2px!important;
    font-size:.96rem!important;
  }

  .mobile-menu-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:10px!important;
  }

  /* Hero: image first, content second. */
  .hero-home{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    background:#fff!important;
  }

  .hero-media{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:246px!important;
    overflow:hidden!important;
    background:#eef3f6!important;
  }

  .hero-media img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:67% center!important;
    transform:none!important;
    animation:none!important;
  }

  .hero-overlay{
    display:none!important;
  }

  .hero-content{
    position:relative!important;
    order:1!important;
    width:100%!important;
    max-width:none!important;
    padding:25px 0 30px!important;
    background:#fff!important;
  }

  .hero-content > *{
    max-width:none!important;
  }

  .eyebrow{
    margin-bottom:8px!important;
    font-size:.67rem!important;
    letter-spacing:.13em!important;
  }

  .hero h1{
    max-width:340px!important;
    margin:0!important;
    font-size:clamp(2.35rem,11vw,3rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }

  .hero-lede{
    margin-top:14px!important;
    font-size:.96rem!important;
    line-height:1.55!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin-top:20px!important;
  }

  .hero-actions .btn{
    width:100%!important;
    min-height:48px!important;
    padding-inline:10px!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
  }

  /* Trust highlights: compact 2 × 2. */
  .trust-strip{
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    background:#fbfcfd!important;
  }

  .trust-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
  }

  .trust-grid > div{
    min-height:72px!important;
    padding:12px 9px!important;
    border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    font-size:.76rem!important;
    line-height:1.25!important;
  }

  .trust-grid > div:nth-child(even){
    border-right:0!important;
  }

  .trust-grid > div:nth-last-child(-n+2){
    border-bottom:0!important;
  }

  .trust-grid .icon{
    width:21px!important;
    height:21px!important;
  }

  /* Global mobile rhythm */
  .section{
    padding:48px 0!important;
  }

  .section-heading,
  .section-heading.center,
  .section-heading.split{
    margin-bottom:22px!important;
    text-align:left!important;
  }

  .section-heading h2,
  .feature-copy h2,
  .about-copy h2,
  .two-col h2,
  .location-card h2,
  .contact-details h2,
  .contact-form-wrap h2,
  .safe-card h2,
  .info-panel h2{
    font-size:clamp(1.9rem,8.5vw,2.35rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }

  .section-heading p,
  .about-copy p,
  .feature-copy p{
    font-size:.94rem!important;
    line-height:1.6!important;
  }

  /* Quick actions: horizontal app-style rail. */
  .quick-section{
    padding-top:42px!important;
  }

  .quick-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(76vw,275px)!important;
    gap:12px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:3px 2px 14px!important;
    margin-right:calc(var(--mobile-gutter) * -1)!important;
    padding-right:var(--mobile-gutter)!important;
  }

  .quick-grid::-webkit-scrollbar{display:none!important}

  .quick-card{
    min-height:92px!important;
    padding:15px 16px!important;
    scroll-snap-align:start!important;
    border-radius:17px!important;
  }

  .quick-card .icon-box{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
  }

  /* Wellness rail */
  .wellness-modern{
    overflow:hidden!important;
  }

  .wellness-modern .section-heading.center{
    text-align:left!important;
  }

  .wellness-carousel-shell{
    padding:4px 0 10px!important;
  }

  .wellness-track{
    grid-auto-columns:min(72vw,228px)!important;
    gap:12px!important;
    padding:8px 2px 14px!important;
    margin-right:calc(var(--mobile-gutter) * -1)!important;
    padding-right:var(--mobile-gutter)!important;
  }

  .wellness-arrow{
    display:none!important;
  }

  .wellness-card{
    min-height:238px!important;
    padding:15px 14px 17px!important;
    border-radius:19px!important;
  }

  .wellness-visual{
    height:148px!important;
  }

  .wellness-visual img{
    width:138px!important;
    height:138px!important;
  }

  .wellness-card h3{
    font-size:.95rem!important;
  }

  .wellness-card p{
    font-size:.78rem!important;
  }

  .wellness-note{
    margin-top:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:6px!important;
    font-size:.79rem!important;
  }

  /* Services: deliberate two-column mobile grid. */
  .services-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:11px!important;
  }

  .service-card{
    min-width:0!important;
    min-height:190px!important;
    padding:16px 14px!important;
    border-radius:16px!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .service-card .icon-box{
    width:38px!important;
    height:38px!important;
    margin-bottom:11px!important;
  }

  .service-card h3{
    margin-bottom:7px!important;
    font-size:.92rem!important;
    line-height:1.18!important;
  }

  .service-card p{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
    margin-bottom:10px!important;
    font-size:.76rem!important;
    line-height:1.42!important;
  }

  .service-card .card-link{
    margin-top:auto!important;
    font-size:.74rem!important;
  }

  .section-action{
    margin-top:20px!important;
    text-align:left!important;
  }

  /* Feature panels / real pharmacy photography */
  .split-features,
  .feature-panel,
  .about-split,
  .two-col,
  .contact-grid,
  .location-grid{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }

  .visual-card{
    border-radius:20px!important;
    overflow:hidden!important;
  }

  .visual-card picture{
    height:235px!important;
  }

  .visual-card-copy{
    padding:22px 19px 24px!important;
  }

  .feature-image{
    min-height:285px!important;
  }

  .feature-copy{
    padding:26px 20px!important;
  }

  .about-split{
    gap:28px!important;
  }

  .about-collage{
    min-height:340px!important;
  }

  .collage-main{
    width:84%!important;
  }

  .collage-small{
    width:48%!important;
  }

  /* Location */
  .location-card{
    padding:24px 20px!important;
    border-radius:20px!important;
  }

  .map-card{
    min-height:300px!important;
    border-radius:20px!important;
  }

  .button-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }

  .button-row .btn{
    width:100%!important;
  }

  /* Inner pages */
  .page-hero{
    min-height:0!important;
    padding:0!important;
  }

  .page-hero .page-hero-media,
  .page-hero picture{
    min-height:220px!important;
  }

  .page-hero-content{
    padding:34px 0 32px!important;
  }

  .page-hero h1{
    font-size:clamp(2.15rem,10vw,2.65rem)!important;
    line-height:1.02!important;
  }

  .rounded-media{
    min-height:270px!important;
  }

  .service-detail-grid,
  .value-grid,
  .gallery-grid,
  .steps,
  .form-row{
    grid-template-columns:1fr!important;
  }

  .contact-form-wrap,
  .safe-card,
  .info-panel{
    padding:23px 18px!important;
  }

  /* Final CTA */
  .final-cta{
    padding:34px 0!important;
  }

  .final-cta-inner{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:20px!important;
  }

  .final-cta-inner h2{
    font-size:2rem!important;
  }

  .final-cta-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }

  .final-cta-actions .btn{
    width:100%!important;
    padding-inline:10px!important;
    font-size:.78rem!important;
  }

  /* Footer */
  .footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:28px 18px!important;
  }

  .footer-brand{
    grid-column:1/-1!important;
  }

  .footer-grid > div:last-child{
    grid-column:1/-1!important;
  }

  .footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
  }

  .site-footer{
    padding-bottom:88px!important;
  }

  /* Persistent app-style bottom actions */
  .mobile-action-bar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:120!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    padding-bottom:max(env(safe-area-inset-bottom),4px)!important;
    border-top:1px solid var(--line)!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 -8px 28px rgba(9,39,65,.13)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  .mobile-action-bar a{
    min-height:60px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    color:var(--navy)!important;
    font-size:.68rem!important;
    font-weight:900!important;
  }

  .mobile-action-bar a:nth-child(2){
    background:var(--red)!important;
    color:#fff!important;
  }

  .mobile-action-bar svg{
    width:20px!important;
    height:20px!important;
  }

  .back-to-top{
    right:14px!important;
    bottom:78px!important;
    width:42px!important;
    height:42px!important;
  }
}

/* ---------- Small phones ---------- */
@media (max-width:430px){
  :root{--mobile-gutter:15px}

  .utility-inner{
    font-size:.62rem!important;
    gap:4px 7px!important;
  }

  .utility-inner > a:first-child,
  .utility-address{
    letter-spacing:-.01em!important;
  }

  .header-inner{
    min-height:58px!important;
  }

  .brand-mark{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }

  .brand-text{
    font-size:.69rem!important;
  }

  .brand-text strong:last-child{
    font-size:.77rem!important;
  }

  .menu-toggle{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }

  .hero-media{
    height:226px!important;
  }

  .hero-content{
    padding:22px 0 27px!important;
  }

  .hero h1{
    max-width:315px!important;
    font-size:clamp(2.15rem,11.2vw,2.65rem)!important;
  }

  .hero-lede{
    font-size:.91rem!important;
  }

  .hero-actions{
    gap:8px!important;
  }

  .hero-actions .btn{
    min-height:46px!important;
    font-size:.72rem!important;
  }

  .section{
    padding:42px 0!important;
  }

  .quick-grid{
    grid-auto-columns:min(82vw,265px)!important;
  }

  .wellness-track{
    grid-auto-columns:min(76vw,218px)!important;
  }

  .services-grid{
    gap:9px!important;
  }

  .service-card{
    min-height:182px!important;
    padding:14px 12px!important;
  }

  .service-card h3{
    font-size:.86rem!important;
  }

  .service-card p{
    -webkit-line-clamp:3!important;
    font-size:.72rem!important;
  }

  .visual-card picture{
    height:215px!important;
  }

  .about-collage{
    min-height:310px!important;
  }

  .button-row,
  .final-cta-actions{
    grid-template-columns:1fr!important;
  }

  .footer-grid{
    grid-template-columns:1fr!important;
  }

  .footer-brand,
  .footer-grid > div:last-child{
    grid-column:auto!important;
  }
}

/* Very narrow devices */
@media (max-width:360px){
  .utility-inner{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "phone"
      "address"
      "hours";
    justify-items:center!important;
  }

  .utility-inner > a:first-child,
  .utility-address{
    justify-self:center!important;
  }

  .hero-actions{
    grid-template-columns:1fr!important;
  }

  .services-grid{
    grid-template-columns:1fr!important;
  }

  .service-card{
    min-height:auto!important;
  }
}

/* Motion safety */
@media (prefers-reduced-motion:reduce){
  .quick-card,
  .wellness-card,
  .brand-mark-animated i,
  .wellness-visual{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}