/* Phone layout fixes. Loaded last on every public page.
   Every rule sits inside a max-width media query, so tablet and desktop
   layouts are untouched. Earlier mobile passes in sunzio-final-polish.css
   use !important, so the overrides here do too. */

@media (max-width:620px){

  /* Nothing may push the page wider than the screen. */
  html,body{overflow-x:clip}

  /* The SUNZiO wordmark stays on one line inside cards whose spans are
     display:block (requirement cards), instead of splitting SUN / ZiO. */
  .brand-inline,
  .brand-inline .brand-sun,
  .brand-inline .brand-zio,
  .brand-inline .brand-auto{display:inline!important;margin:0!important;padding:0!important;min-height:0!important}

  /* Links inside running text stay inline. The 44px inline-flex rule from
     the touch-target pass broke sentences apart with big gaps. */
  .section-intro > a,
  main p > a:not(.btn):not(.text-link){
    display:inline!important;
    min-height:0!important;
    padding:0!important;
    font-size:inherit!important;
  }

  /* Expanded menu: the Reserve Now entry reads as the main button. */
  #navlinks > a.btn.btn-primary,
  .nav .navlinks > a.btn.btn-primary{
    background:var(--orange,#F58220)!important;
    border-color:var(--orange,#F58220)!important;
    color:#fff!important;
  }

  /* Footer: roomier links that are easy to tap. */
  .footer-links{gap:2px 6px!important}
  .footer-links a{
    display:inline-flex!important;
    align-items:center;
    min-height:44px;
    padding:0 8px!important;
  }

  /* Homepage towns: two compact tiles per row instead of eight tall ones. */
  .page-home .destination-grid,
  .destination-grid.centered-destination-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .page-home .centered-destination-grid .destination,
  .destination-grid .destination{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/5;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .page-home .centered-destination-grid .destination-link,
  .destination-grid .destination-link{
    position:absolute!important;
    inset:0!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    padding:12px 10px 14px!important;
    box-sizing:border-box;
  }
  .page-home .centered-destination-grid .destination h3,
  .page-home .centered-destination-grid .destination p,
  .destination-grid .destination h3,
  .destination-grid .destination p{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    text-align:center!important;
  }
  .page-home .centered-destination-grid .destination h3,
  .destination-grid .destination h3{font-size:18px!important;line-height:1.15!important;margin:0 0 4px!important;min-height:0!important;height:auto!important;padding:0!important}
  .page-home .centered-destination-grid .destination p,
  .destination-grid .destination p{font-size:13px!important;line-height:1.3!important;margin:0!important;min-height:0!important;height:auto!important;padding:0!important}

  /* Fleet cards: the Reserve button keeps button padding and white text. */
  .fleet-card-links{justify-content:center}
  .fleet-card-links a.fleet-card-reserve{
    padding:10px 26px!important;
    color:#fff!important;
    min-width:132px;
    justify-content:center!important;
  }

  /* Reserve Now hero: box follows the banner's shape, no empty bands. */
  .brand-hero.brand-hero-reserve,
  .brand-hero.brand-hero-reserve .brand-hero-fleet{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .brand-hero.brand-hero-reserve .brand-hero-fleet{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:2698/892;
    object-fit:cover!important;
  }

  /* Monthly rentals hero: was wider than the screen and too short for its text. */
  .page-monthly-rental .monthly-hero{
    width:100%!important;
    aspect-ratio:auto!important;
    min-height:280px!important;
    height:auto!important;
  }
  .page-monthly-rental .monthly-hero .page-hero-shade{background:rgba(4,18,32,.42)!important}
  .page-monthly-rental .monthly-hero .page-hero-copy{
    display:flex!important;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:22px 16px!important;
    box-sizing:border-box;
  }
  .page-monthly-rental .monthly-hero .eyebrow{
    white-space:normal!important;
    font-size:14px!important;
    text-align:center;
    margin:0!important;
  }
  .page-monthly-rental .monthly-hero .page-actions{
    display:flex!important;
    flex-direction:row!important;
    justify-content:center;
    gap:10px;
    width:100%;
    margin:0!important;
  }
  .page-monthly-rental .monthly-hero .page-actions .btn{flex:1 1 0;max-width:180px;justify-content:center}

  /* Motorcycles: requirement cards stack one per row (they were squeezed
     into three narrow columns and pushed the page sideways). */
  .requirements-grid{grid-template-columns:1fr!important}
  .page-motorcycles .requirements-grid .requirement-card{grid-column:auto!important}
  .page-motorcycles #requirements .btn{display:flex!important;width:100%;justify-content:center;margin:0 0 10px!important}

  /* How It Works policies: full-width rows that are easy to tap. */
  .policy-card{border-bottom:1px solid rgba(20,37,54,.12)!important}
  .policy-card > summary.policy-uniform-heading{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    position:relative;
    padding:12px 32px 12px 4px!important;
    font-weight:700;
  }
  .policy-card > summary.policy-uniform-heading::after{
    top:50%!important;
    right:6px!important;
    transform:translateY(-50%);
  }
  .policy-card > p{padding:0 4px 14px!important}

  /* Thank-you page: each step's label sits above its text so long lines
     (like the email address) wrap instead of running off the screen. */
  .box > .row{flex-direction:column;gap:2px!important}
  .box > .row .value{min-width:0;overflow-wrap:anywhere}
}

/* Very small phones (iPhone SE and similar). */
@media (max-width:360px){
  .page-home .centered-destination-grid .destination h3{font-size:16px!important}
  .page-home .centered-destination-grid .destination p{display:none!important}
}