/* 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;
}
/* logo with colored pictogram + white text + soft glow for contrast over the video */
.sm-home__section-start--minimal .sm-home__section__information__logo {
  background-image: url('./assets/img/logo-combined-white-text.svg');
  margin-bottom: 40px;
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 48px rgba(0, 0, 0, 0.3));
}
/* h1 tagline: glow instead of white rectangle */
.sm-home__section-start--minimal h1 {
  background: transparent !important;
  padding: 0 !important;
  color: #ffffff;
  text-shadow: 0 0 22px rgba(0, 0, 0, 0.7), 0 0 44px rgba(0, 0, 0, 0.45);
}

/* page-level background: hero photo collage anchored to right, oversized to mimic live's
 * .sm-home__background element (200vh tall, ~193vh wide, extends off-screen left).
 * Scoped to homepage wrapper (.wrapper.sm-home) — overrides .wrapper{background:white}. */
.wrapper.sm-home {
  background-image: url('./assets/img/background_home_photos_large.jpg');
  background-color: white;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 200vh;
}

/* description section: white bg (covers the page bg image behind it) */
.sm-home__section-description {
  background: #ffffff;
  position: relative;
}
.sm-home__section__description {
  position: relative;
}
.sm-home__section__description p {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.55;
  margin-bottom: 36px;
}
/* button: always centered (override the absolute-positioning rule from app.css mobile) */
.sm-home__section__description .sm-home__section__information__register {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  display: inline-block;
  margin: 0 auto;
}
.sm-home__section__description .sm-home__section__information__register:hover {
  transform: scale(1.05) !important;
}

/* testimonials: smaller font + more side padding */
.sm-home__section__testimonials .sm-testimonials__slide__content__text,
.sm-home__section__testimonials .sm-testimonials__slide__content__text p {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .sm-home__section__testimonials .sm-testimonials__slide__content,
  .sm-home__section__testimonials .sm-testimonials__slide__content__text {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* mobile hero video: fill the screen via cover (some side-crop on subtitles is the trade-off)
 * — switching back from contain because the letterboxed band looked too horizontal.
 * For full subtitle preservation, would need a portrait-cropped video re-encode. */
@media screen and (max-width: 768px) {
  .sm-home__background--video {
    height: 100vh;
  }
  .sm-home__background__video {
    object-fit: cover;
    object-position: center;
  }

  /* Center logo + tagline horizontally on mobile + tighten the gap between them */
  .sm-home__section-start--minimal .sm-home__section__information {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sm-home__section-start--minimal .sm-home__section__information__logo {
    background-position: center !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
  }
}

/* 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;
  }
}

/* Footer width cleanup: app.css sets width: 100vw, which on desktop with a vertical
 * scrollbar overshoots the body by ~17px and is clipped by body { overflow-x: hidden }.
 * On mobile it equals the viewport so no visible difference. 100% is what we want. */
.sm-footer {
  width: 100%;
}

/* Footer mobile layout: two info columns side-by-side at the top
 * (left = logo + email + address, right = register button + privacy menu),
 * then the newsletter signup as its own full-width row below.
 * Replaces the prior "every section on its own row centred" stack. */
@media screen and (max-width: 768px) {
  .sm-footer {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 16px;
    row-gap: 28px;
  }

  /* Two columns, side-by-side, top of footer */
  .sm-footer .sm-footer__col {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    margin-bottom: 0;
  }
  .sm-footer .sm-footer__col-left {
    order: 1;
    text-align: left;
  }
  .sm-footer .sm-footer__col-right {
    order: 2;
    text-align: right;
  }
  /* Logo in left column: pin to the left edge instead of auto-centring */
  .sm-footer .sm-footer__col-left .sm-footer__col__logo {
    margin-left: 0;
    margin-right: auto;
    background-position: left center;
  }
  /* Register button + menu items in the right column align right naturally
   * via parent text-align, but the menu list needs its default padding cleared */
  .sm-footer .sm-footer__col-right ul.menu {
    padding-left: 0;
    margin: 16px 0 0;
    list-style: none;
  }

  /* Newsletter form: own row underneath, full width, centred */
  .sm-footer .newsletter-signup {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    text-align: center;
  }
  .sm-footer .newsletter-signup .wpcf7,
  .sm-footer .newsletter-signup .wpcf7-form,
  .sm-footer .newsletter-signup .wpcf7-form > p {
    text-align: center;
  }
  /* Form inputs centred within the newsletter column with a sensible cap */
  .sm-footer .newsletter-signup input[type=email],
  .sm-footer .newsletter-signup input[type=text] {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Submit button: hard-centre via block + margin auto.
   * CF7 wraps it in <p> with siblings (<br>, Turnstile <div>, <br>) that
   * push it off-centre under text-align alone. */
  .sm-footer .newsletter-signup input[type=submit] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* About page background art — preserve aspect ratio on mobile.
 * app.css forces .sm-about__background img to height: 100% inside an absolute
 * container (200vh tall, anchored to right:0). Combined with the global
 * img { max-width: 100% } above, the image gets clamped to the wrapper width
 * and the default object-fit: fill squashes it horizontally (~60% compression on
 * a 375px viewport). max-width: none + width: auto restores natural aspect;
 * the wider-than-viewport overflow is clipped by body { overflow-x: hidden },
 * matching how the home page background art spills off the left edge. */
.sm-about__background img {
  max-width: none;
  width: auto;
}

/* 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;
  }
}