/* Kaleido - mobile responsiveness fixes
 * Loaded AFTER app.css via 02-mobile-fixes-enqueue.php.
 * Additive overrides only - app.css is not modified.
 * Issue references (C#/H#/M#) map to mobile-audit.md.
 */

/* ======================================================================
   Global (all viewports)
   ====================================================================== */

/* C1, C2 - stop horizontal scroll caused by 100vw including scrollbar */
body,
.wrapper {
  width: 100%;
}

/* C3 - content images never overflow their container */
img {
  max-width: 100%;
  height: auto;
}

/* exception: hero bg image deliberately oversized to fill 200vh container.
 * Use EXPLICIT width on the container (calc from image aspect) + force picture+img
 * to fill it. Eliminates any width-wobble between initial paint and image-load. */
.sm-home__background:not(.sm-home__background--video) {
  width: calc(200vh * 3000 / 3110);
}
.sm-home__background:not(.sm-home__background--video) > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.sm-home__background img,
.sm-home__background picture img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* hero background video: constrain to 100vh and crop to fill */
.sm-home__background--video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.sm-home__background__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* hero with minimal text (logo + h1 only) sits over the 100vh video */
.sm-home__section-start--minimal {
  position: relative;
  min-height: 100vh;
}
.sm-home__section-start--minimal .sm-home__section__information {
  z-index: 2;
}
/* swap to the white logo variant for contrast over the video */
.sm-home__section-start--minimal .sm-home__section__information__logo {
  background-image: url('./assets/img/logo-combined-white.svg');
  margin-bottom: 40px;
}

/* description section moved out of the hero, sits below the video */
.sm-home__section-description {
  padding: 80px calc(100vw / 12);
  text-align: center;
  position: relative;
  z-index: 2;
}
.sm-home__section__description {
  max-width: 720px;
  margin: 0 auto;
}
.sm-home__section__description p {
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .sm-home__section-description {
    padding: 48px 24px;
  }
}

/* C4, M1 - fluid heading typography */
h1 {
  font-size: clamp(28px, 6vw, 48px);
}
h2 {
  font-size: clamp(22px, 4.5vw, 36px);
}
h3 {
  font-size: clamp(18px, 3vw, 24px);
}

/* C6 - WCAG tap target size on primary buttons */
.sm-button,
#cookie-law-info-bar .cli-plugin-button,
input[type=submit] {
  min-height: 44px;
  padding: 12px 20px;
}

/* M4 - accordion head as a consistent tap target */
.sm-accordeon__item__heading {
  min-height: 44px;
}

/* CLS fix: prevent testimonials slider from showing all slides stacked
 * before Slick initializes. Show only the first slide; Slick removes
 * this restriction by adding .slick-initialized to the container. */
.sm-testimonials > .sm-testimonials__slide:not(:first-child) {
  display: none;
}
.sm-testimonials.slick-initialized > .sm-testimonials__slide {
  display: block;
}

/* ======================================================================
   <= 768px (tablets + phones)
   ====================================================================== */
@media screen and (max-width: 768px) {

  /* C5 - mobile menu drawer fits any viewport, not locked to 414px */
  .sm-header__menu ul.menu {
    width: min(100vw, 414px);
    right: calc(0px - min(100vw, 414px));
  }
  .sm-header.active ul.menu {
    right: 0;
  }

  /* H3 - prevent iOS Safari auto-zoom on input focus */
  input,
  textarea,
  select {
    font-size: 16px;
  }

  /* H4 - gallery horizontal scroll: predictable with snap */
  .sm-gallery__section__container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .sm-gallery__section__container__item {
    scroll-snap-align: start;
  }

  /* C7 - retreat event tiles: 2 columns, readable hex */
  .sm-retreat__section-events {
    flex-wrap: wrap;
    justify-content: center;
  }
  .sm-retreat__section-events__item {
    width: calc(50% - 10px);
    margin: 0 5px 24px;
  }
  .sm-retreat__section-events__item__photo {
    height: calc((50vw - 10px) * 1.1);
  }

  /* M2 - retreat introduction image cap */
  .sm-retreat__section__introduction__image {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 308px;
    margin: 0 auto 40px;
  }
}

/* ======================================================================
   <= 480px (phones)
   ====================================================================== */
@media screen and (max-width: 480px) {

  /* H1 - sensible gutters on phone content */
  section > * {
    margin-left: 16px;
    margin-right: 16px;
  }

  /* C7 (small) - single column events with readable hex */
  .sm-retreat__section-events__item {
    width: 80%;
    max-width: 320px;
    margin: 0 auto 24px;
  }
  .sm-retreat__section-events__item__photo {
    height: calc(80vw * 1.1);
    max-height: 352px;
  }
}

/* ======================================================================
   <= 414px (small phones)
   ====================================================================== */
@media screen and (max-width: 414px) {

  /* H5 - presenter photo cap on small phones */
  .sm-timeline__item__col__presenter__photo {
    max-width: 140px;
    max-height: 140px;
  }

  /* M3 - footer newsletter input constrains */
  .sm-footer input[type=email],
  .sm-footer input[type=text] {
    width: 100%;
    max-width: 280px;
  }
}

/* ======================================================================
   Short-viewport phones (iPhone SE portrait etc.)
   ====================================================================== */
@media screen and (max-width: 768px) and (max-height: 700px) {

  /* H2 - tighter menu spacing so the CTA fits in the drawer */
  .sm-header__menu ul.menu .menu-item {
    margin-top: 24px;
  }
}