/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 1100px){
  .ss-kpis{
    grid-template-columns: repeat(2,200px);
  }

  .ss-stats-grid{
    grid-template-columns: repeat(2,200px);
  }

  .ss-how-grid{
    grid-template-columns: repeat(2,260px);
  }

  .ss-circle-feature-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ss-trust-points{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px){
  .ss-hero-filter-grid{
    grid-template-columns: 1fr 1fr;
  }

  .ss-hero-filter-btn{
    grid-column: 1 / -1;
    width: 100%;
  }

  .ss-available-panel .ss-home-panel-title{
    max-width: 100%;
  }

  .ss-available-panel .ss-hero-filter-grid{
    grid-template-columns: 1fr 1fr;
  }

  .ss-available-panel .ss-hero-filter-btn{
    grid-column: 1 / -1;
    width: 100%;
  }

  .ss-available-panel .ss-item-head{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ss-available-panel .ss-item-head-right{
    align-items: flex-start;
    text-align: left;
  }

  .ss-partner-destinations-panel .ss-hero-filter-grid{
    grid-template-columns: 1fr 1fr;
    max-width: 620px;
  }

  .ss-partner-destinations-panel .ss-hero-filter-btn{
    grid-column: 1 / -1;
    width: 100%;
  }

  .ss-partner-destinations-panel input[name="ss_zip"],
  .ss-partner-destinations-panel select[name="ss_radius"],
  .ss-partner-destinations-panel select[name="ss_category"]{
    max-width: none;
  }
}

@media (max-width: 820px){
  .ss-home-panel-header--split,
  .ss-home-panel-header--trust,
  .ss-row,
  .ss-row-3,
  .ss-grid-2{
    display: grid;
    grid-template-columns: 1fr;
  }

  .ss-home-panel-header--split{
    gap: 14px;
  }

  .ss-panel-filter{
    margin-left: 0;
    width: 100%;
  }

  .ss-panel-filter-input{
    width: 100%;
  }

  .ss-item-head{
    flex-direction: column;
  }

  .ss-phase3-header{
    flex-direction: column;
    align-items: stretch;
  }

  .ss-phase3-panel-actions{
    margin-left: 0;
    margin-top: 0;
  }

  .ss-top-destinations .ss-item{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 640px){
  .ss-shell:first-of-type{
    margin-top: 18px;
  }

  .ss-shell + .ss-shell,
  .ss-shell > .ss-home-panel + .ss-home-panel{
    margin-top: var(--ss-shell-stack-gap-mobile);
  }

  .ss-homepage-shell > .ss-home-panel + .ss-home-panel{
    margin-top: var(--ss-home-gap);
  }

  .ss-home-panel-inner,
  .ss-hero-card .ss-home-panel-inner{
    padding: var(--ss-home-mobile-pad-y) var(--ss-home-mobile-pad-x);
  }

  .ss-page-panel .ss-home-panel-inner{
    padding: var(--ss-page-panel-pad-y-mobile) var(--ss-page-panel-pad-x-mobile);
  }

  .ss-shell .ss-card,
  .ss-card,
  .ss-shell .ss-form-wrap,
  .ss-form-wrap{
    padding: var(--ss-card-pad-mobile);
  }

  .ss-title,
  .ss-home-panel-title{
    font-size: clamp(26px,8vw,36px);
  }

  .ss-subtitle,
  .ss-home-panel-text{
    font-size: 16px;
  }

  .ss-kpis,
  .ss-stats-grid{
    grid-template-columns: 200px;
    gap: 14px;
  }

  .ss-how-grid{
    grid-template-columns: 260px;
  }

  .ss-circle-feature-grid{
    grid-template-columns: 1fr;
  }

  .ss-circle-image-wrap{
    width: 132px;
    height: 132px;
  }

  .ss-hero-filter-grid{
    grid-template-columns: 1fr;
  }

  .ss-available-panel .ss-home-panel-header--stack{
    text-align: left;
  }

  .ss-available-panel .ss-home-panel-title,
  .ss-available-panel .ss-hero-helper,
  .ss-available-panel .ss-home-panel-text{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    text-align: left;
  }

  .ss-available-panel .ss-hero-filter-row{
    justify-content: stretch;
    margin-top: 14px;
  }

  .ss-available-panel .ss-hero-filter-grid{
    grid-template-columns: 1fr;
    max-width: none;
  }

  .ss-available-panel .ss-hero-filter-grid input[name="ss_zip"],
  .ss-available-panel .ss-hero-filter-grid select{
    max-width: none;
  }

  .ss-available-panel .ss-item{
    padding: 18px;
  }

  .ss-available-panel .ss-item-title{
    font-size: 1.55rem;
  }

  .ss-available-panel .ss-item-head-right{
    align-items: flex-start;
    text-align: left;
  }

  .ss-available-panel .ss-item-head-right .ss-mini{
    white-space: normal;
  }

  .ss-partner-destinations-panel .ss-home-panel-header--stack{
    text-align: left;
  }

  .ss-partner-destinations-panel .ss-home-panel-title,
  .ss-partner-destinations-panel .ss-title,
  .ss-partner-destinations-panel .ss-home-panel-text,
  .ss-partner-destinations-panel .ss-subtitle,
  .ss-partner-destinations-panel .ss-hero-helper{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .ss-partner-destinations-panel .ss-hero-filter-row{
    justify-content: stretch;
    margin-top: 14px;
  }

  .ss-partner-destinations-panel .ss-hero-filter-grid{
    grid-template-columns: 1fr;
    max-width: none;
  }

  .ss-partner-destinations-panel .ss-hero-filter-grid .ss-input,
  .ss-partner-destinations-panel .ss-hero-filter-grid .ss-select,
  .ss-partner-destinations-panel .ss-hero-filter-btn{
    width: 100%;
    max-width: none;
  }

  .ss-partner-destinations-panel .ss-item{
    padding: 18px;
  }

  .ss-partner-destinations-panel .ss-item-title,
  .ss-partner-destinations-panel .ss-card-title,
  .ss-partner-destinations-panel .ss-item h3{
    font-size: 1.55rem;
  }
}

@media (max-width: 480px){
  .ss-homepage-actions{
    flex-direction: column;
    gap: 10px;
  }

  .ss-btn{
    width: 100%;
    max-width: 280px;
  }
}


/* RC3 mobile performance: the decorative topo image is 646 KB and only 5% visible. */
@media (max-width: 900px){
  :root{ --ss-topo-image: none; }
}