/*
 SAILS RIDES - PUBLIC WEBSITE RESPONSIVE RELEASE
 Desktop: approved 75%-equivalent layout at 100% browser zoom
 Individual application interfaces excluded
*/

/* Desktop computers */
@media screen and (min-width:1000px) {

  html {
    zoom:75% !important;
  }

  body {
    max-width:none !important;
    overflow-x:clip;
  }

  /* Desktop header navigation */
  header .nav {
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:clamp(8px,1vw,18px);
  }

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

  header .header-actions {
    display:flex !important;
    align-items:center;
  }

  /* Logo and brand sizing */
  header .logo img,
  header .brand img,
  header .site-logo img {
    max-height:96px !important;
    max-width:100% !important;
    width:auto;
    object-fit:contain;
  }

  header .brand,
  header .brand-wrap {
    min-width:0;
  }

  /* Main hero headings */
  .hero h1,
  .hero-title,
  .hero__title,
  .home-hero h1 {
    font-size:clamp(42px,4vw,72px) !important;
    line-height:1.08 !important;
    overflow-wrap:break-word;
  }

  /* Hero descriptions */
  .hero p,
  .hero-subtitle,
  .home-hero p {
    font-size:clamp(17px,1.7vw,25px) !important;
    line-height:1.4 !important;
  }

  /* Five Explore cards */
  .grid-5 {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  /* Protect images from horizontal overflow */
  main img {
    max-width:100%;
  }
}

/* Smaller desktop and laptop widths */
@media screen and (min-width:1000px) and (max-width:1350px) {

  header .nav a {
    font-size:clamp(13px,1.15vw,16px);
  }

  header .logo img,
  header .brand img {
    max-height:84px !important;
  }
}

/* Tablets */
@media screen and (min-width:520px) and (max-width:999px) {

  html {
    zoom:100% !important;
  }

  .hero h1,
  .hero-title,
  .home-hero h1 {
    font-size:clamp(30px,5vw,52px) !important;
    overflow-wrap:break-word;
  }
}

/* Mobile phones */
@media screen and (max-width:519px) {

  html {
    zoom:100% !important;
  }

  body {
    overflow-x:clip;
  }

  .hero h1,
  .hero-title,
  .home-hero h1 {
    font-size:clamp(27px,8vw,42px) !important;
    line-height:1.1 !important;
  }
}
/* SR-VISUAL-R1: Desktop navigation correction */
@media screen and (min-width:1000px) {
  .site-header .header-inner {
    max-width:none;
    width:100%;
    box-sizing:border-box;
    gap:10px;
    padding:10px 14px;
    flex-wrap:nowrap;
  }

  .site-header .brand {
    min-width:0;
    flex-shrink:0;
  }

  .site-header .brand span {
    white-space:nowrap;
    font-size:clamp(16px,1.5vw,22px);
  }

  .site-header .nav {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:clamp(6px,.65vw,12px);
    min-width:0;
  }

  .site-header .nav a {
    white-space:nowrap;
    flex-shrink:0;
    font-size:clamp(12px,1vw,14px);
  }

  .site-header .header-actions {
    flex-shrink:0;
    gap:6px;
  }

  .site-header .header-actions .btn {
    white-space:nowrap;
    padding:9px 12px;
    font-size:12px;
  }
}