/* ============================================================
   landing.css - BAWSCA landing page mockup (test.php)

   Loads on top of toursnew.css, which supplies the fixed navigation,
   the base type, the skip link and the footer. Nothing here needs
   Foundation, Spry or jQuery.
   ============================================================ */

/* toursnew.css defines .gw-sr only for GWImage, so repeat it here */
.gw-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Carousel
   ============================================================ */
.hero {
  /* One line controls the slide shape. 996/565 matches the Openingscreen.jpg
     hero this replaces, and the slide photos are cut to the same ratio at
     1800x1020, so nothing is cropped until the viewport gets wider than tall
     in a different proportion (see max-height on .hero-viewport). */
  --hero-ratio: 996 / 565;

  position: relative;
  margin: 0 auto 1.5rem;
  /* Lines the hero up with the 1200px content column below. The slide photos
     are now 1800x1020 (cropped from 6000x4000 originals), so this is a 0.67x
     downscale - there is headroom to widen the hero later if you want to, and
     it still has pixels to spare on a retina display.
     Note the box here is 1200 x 565 (2.12:1) while the photos are 1.76:1, so
     object-fit crops roughly 17% off the top and bottom on a wide desktop.
     Raising max-height below to ~640px would show more of each frame. */
  max-width: 1200px;
  background: #e9e9e9;
}

.hero-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  /* The ratio alone would make the hero grow without limit on a wide monitor
     (727px tall at 1280px, which leaves no room for anything else). Capping the
     height at the old hero's actual 565px means this matches Openingscreen.jpg
     exactly at its native 996px width and letterboxes gracefully above that,
     cropping via object-fit rather than getting taller. */
  max-height: 565px;
  overflow: hidden;
}

.hero-track {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;           /* keeps inactive slides out of the a11y tree */
  transition: opacity 0.6s ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crops the wide source into the slide shape */
}

/* ---- Previous / next ----
   Photos can be any colour, so the arrows sit on their own dark scrim rather
   than relying on the image behind them. #fff on rgba(0,0,0,.62) over even a
   white sky stays above 4.5:1. */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  font-size: 1.1rem;
  line-height: 1;
}

.hero-arrow--prev { left: 0; }
.hero-arrow--next { right: 0; }

.hero-arrow:hover { background: rgba(0, 0, 0, 0.82); }

.hero-arrow:focus-visible,
.hero-arrow:focus {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* ---- Pause button and bullets ---- */
.hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #1779ba;               /* 4.69:1 on white */
  background: #fff;
  border: 1px solid #cacaca;
  border-radius: 3px;
  cursor: pointer;
}

.hero-play:hover {
  background: #1779ba;
  color: #fefefe;
  border-color: #1779ba;
}

.hero-play:focus-visible,
.hero-play:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

.hero-play-icon { font-size: 0.7em; }

.hero-dots {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

/* 44px tap target with a smaller visible dot inside it, so the control is easy
   to hit without a row of oversized circles (WCAG 2.5.8). */
.hero-dot {
  width: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #6b6b6b;    /* 4.85:1 against white - visible, not decorative-only */
}

.hero-dot:hover::before { border-color: #1779ba; }

.hero-dot.is-active::before {
  background: #1779ba;
  border-color: #1779ba;
}

.hero-dot:focus-visible,
.hero-dot:focus {
  outline: 3px solid #1779ba;
  outline-offset: -4px;
}

/* A reader who prefers reduced motion gets no crossfade; the carousel also
   starts paused for them (handled in the script). */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ============================================================
   Page content
   ============================================================ */
.lp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.lp-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #545454;
  margin: 0.5em 0 1rem;
  padding-bottom: 6px;
  border-bottom: #545454 dashed 1px;
}

.lp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  padding-bottom: 2rem;
}

.lp-col {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1.1rem 1.2rem 1.3rem;
}

.lp-col h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.6rem;
}

.lp-col h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #333;
  margin: 1rem 0 0.25rem;
}

.lp-col p,
.lp-col li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #545454;               /* 7.57:1 on white */
}

.lp-col p { margin: 0 0 0.7rem; }

.lp-col a { color: #1779ba; }

.lp-col a:focus-visible,
.lp-col a:focus {
  outline: 3px solid #1779ba;
  outline-offset: 2px;
}

.lp-logo { margin: 0 0 0.9rem; }
.lp-logo img { max-width: 100%; height: auto; }

.lp-list { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.lp-list li { margin-bottom: 0.5rem; }

.lp-calc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.lp-calc-link img { flex-shrink: 0; }
.lp-calc-link span { text-decoration: underline; }

/* ============================================================
   Helpful Resources
   ============================================================ */
.lp-helpful {
  background: #fff;
  border-top: 1px solid #ddd;
  padding: 1.75rem 0 2rem;
}

.lp-helpful-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: start;
}

.lp-helpful h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.8rem;
}

.lp-helpful p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #545454;
  margin: 0 0 0.9rem;
  max-width: 62ch;
}

.lp-pill {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: #1779ba;
  color: #fefefe;               /* 4.65:1 */
  border-radius: 999px;
  font-size: 0.88rem;
  text-decoration: none;
  min-height: 40px;
  line-height: 1.6;
}

.lp-pill:hover { background: #12608f; }

.lp-pill:focus-visible,
.lp-pill:focus {
  outline: 3px solid #0a0a0a;
  outline-offset: 2px;
}

.lp-helpful-img img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Small screens
   ============================================================ */
@media screen and (max-width: 47.9375em) {
  .lp-helpful-inner { grid-template-columns: 1fr; }
  .lp-helpful-img { order: -1; }
  .lp-helpful-img img { width: 200px; margin: 0 auto; }
}

@media screen and (max-width: 39.9375em) {
  .hero { margin-bottom: 1rem; }

  /* A letterbox hero is too short to read on a phone, so the slide gets
     taller as the screen narrows. */
  .hero { --hero-ratio: 4 / 3; }

  .hero-arrow { width: 40px; height: 56px; }

  .lp-wrap { padding: 0 12px; }
  .lp-title { font-size: 1.2rem; }
}