/* Home page hero slideshow.
 *
 * Added 22 ก.ย. 2026: the owner asked for the single banner at the top of the
 * home page to rotate through however many images they choose, managed at
 * /backend/homepage-banner.
 *
 * Design constraint: this must sit INSIDE the WordPress-exported banner markup
 * (#banner-xxxxx .banner-bg) without changing its markup, because the home
 * page is an origin byte-for-byte page. Its height is overridden
 * (see "Banner fit" below); everything else about the box stays Flatsome's.
 * So the slides are absolutely positioned layers filling the
 * existing .banner-bg, and the original .bg element is left in place as slide 1
 * for browsers that never run the script.
 */

.pf-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Sits above the theme's own .bg layer (and above .pf-hero__first) but
   * below .overlay and the text. */
  z-index: 2;
}

/* On the host, not .pf-hero: the dots strip is its sibling (44px tall on a
 * phone, a quarter of a 162px banner), and a swipe starting there must reach
 * pf-hero.js too. Sideways finger movement goes to the swipe; up/down still
 * scrolls the page and pinch still zooms. */
[data-pf-hero] {
  touch-action: pan-y pinch-zoom;
}

.pf-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  /* Hidden slides must not catch clicks: the last one in the DOM sits on top,
   * so at opacity 0 it swallowed clicks meant for the slide on show. */
  pointer-events: none;
  /* A crossfade rather than a slide: the artwork carries its own wording, so
   * horizontal movement would drag the text across the viewport. */
  transition: opacity 900ms ease-in-out;
}

.pf-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* The picture itself, and a blurred copy of it behind (pf-hero.js builds
 * both per slide). How the two are sized is under "Banner fit" below. */
.pf-hero__fill,
.pf-hero__pic {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Slide 1 as a real <img> in the page HTML (HeroPublisher), so the browser
 * starts fetching it with the HTML and paints it before pf-hero.js runs.
 * Before this the theme's old photo showed first and the slideshow replaced it
 * a moment later — a visible jump. The script's layers stack above it. */
.pf-hero__first {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

/* The theme's own photo sits under the slides and is never seen again once a
 * slide list is published, but Flatsome still lazy-loads it (.bg-loaded) —
 * 90 KB on the busiest page for nothing. */
.banner-bg:has(.pf-hero__first) > .bg {
  background-image: none !important;
}

/* Banner fit (owner, 28 ก.ย. 2026): the whole picture, never cropped.
 *  - The picture is contained, and whatever part of the box it leaves empty
 *    shows a blurred copy of the same image instead of a crop.
 *  - Phones (under 550px): the box is 2.4:1, the recommended 1920x800
 *    artwork (what production uses; the owner settled on it 28 ก.ย. 2026),
 *    so such a slide fills it exactly — 162px tall at 390px wide. The
 *    theme's fixed 370px box cropped ~20% off each side at 390px. A slide of
 *    another shape (16:9, say) gets blurred bands at the sides instead.
 *  - Desktop: the theme's box was a fixed 800px, so on a 1536x730 viewport
 *    (a 1920 screen at 125%) header plus banner overflowed by ~230px. Now the
 *    box fits the screen below the header (see "Desktop height" below). */
.banner:has(.pf-hero__first) {
  padding-top: 41.667vw !important;
}

.banner-bg .pf-hero__first {
  object-fit: contain !important;
  z-index: 2 !important;
}

.pf-hero__pic {
  background-size: contain;
}

.pf-hero__fill,
.pf-hero__first-fill {
  /* Overshoots the box so the blur's soft, see-through edge falls outside
   * it (both parents clip: .banner-bg and .pf-hero__slide). A fixed 80px
   * rather than a scale, which left only ~22px at a 300px-tall box. Explicit
   * width/height, not inset + auto: the fill for slide 1 is an <img>, and a
   * replaced element with width:auto takes its natural 1920x1080 instead of
   * stretching between left and right. */
  top: -80px !important;
  left: -80px !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% + 160px) !important;
  height: calc(100% + 160px) !important;
  filter: blur(28px);
}

/* Desktop height: never taller than the screen below the header, nor 800px;
 * otherwise as tall as 1920x800 artwork at this width (41.667vw), but at
 * least 300px so a tablet banner does not get thin. The screen limit wins
 * over that 300px (a phone on its side, 740x360, overflowed by 31px), and
 * 150px is the floor for a squashed window. Header heights measured 28 ก.ย.
 * 2026: 91px from 550px, 163px from 900px (161 at 1366; at 850-~890 the menu
 * wraps and the header is ~199px, so a few px of banner fall below there). */
@media (min-width: 550px) {
  .banner:has(.pf-hero__first) {
    padding-top: max(150px, min(800px, calc(100vh - 91px), max(300px, 41.667vw))) !important;
    padding-top: max(150px, min(800px, calc(100svh - 91px), max(300px, 41.667vw))) !important;
  }
}

@media (min-width: 850px) {
  .banner:has(.pf-hero__first) {
    padding-top: max(150px, min(800px, calc(100vh - 163px), max(300px, 41.667vw))) !important;
    padding-top: max(150px, min(800px, calc(100svh - 163px), max(300px, 41.667vw))) !important;
  }
}

/* A clickable slide covers the whole banner. The theme already has a
 * .banner-link element for this; ours only exists when a link is set. */
.pf-hero__link {
  position: absolute;
  inset: 0;
  display: block;
  /* No text inside, so give assistive tech the alt text via aria-label. */
}

/* Dots. Deliberately small and low-contrast-safe: they sit on photographs of
 * unknown brightness, so each dot carries its own dark ring rather than relying
 * on the image behind it. */
.pf-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  /* The strip is full width; only the dots themselves take taps, so a linked
   * slide stays clickable beside them. */
  pointer-events: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pf-hero__dot {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 11px;
  height: 11px;
  /* The theme gives every <button> min-height: 2.5em, a line-height and a
   * 1em right/bottom margin — that stretched the dots into 15x58 ovals. */
  min-width: 0;
  min-height: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.pf-hero__dot:hover,
.pf-hero__dot:focus-visible {
  background: #fff;
}

.pf-hero__dot[aria-current="true"] {
  background: #fff;
  transform: scale(1.35);
}

/* Touch targets: the dot itself stays 11px visually, but the hit area is 44px
 * so it is usable on a phone (WCAG 2.5.8). */
@media (pointer: coarse) {
  /* A 44px hit box per dot (project rule), with the 11px dot drawn inside it.
   * Padding on the button made a 39x31 box and ringed the whole box. */
  .pf-hero__dots {
    gap: 0;
    bottom: 0;
  }

  .pf-hero__dot {
    position: relative;
    width: 44px;
    height: 44px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  .pf-hero__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    transition: background 200ms ease, transform 200ms ease;
  }

  .pf-hero__dot:hover,
  .pf-hero__dot:focus-visible,
  .pf-hero__dot[aria-current="true"] {
    background: none;
    transform: none;
  }

  .pf-hero__dot:focus-visible::before,
  .pf-hero__dot[aria-current="true"]::before {
    background: #fff;
  }

  .pf-hero__dot[aria-current="true"]::before {
    transform: scale(1.35);
  }
}

/* Someone who has asked their OS for less motion gets the first slide only —
 * the script checks the same query and stops rotating, this covers the fade. */
@media (prefers-reduced-motion: reduce) {
  .pf-hero__slide {
    transition: none;
  }
}