/* ==========================================================================
   LAST MINUTE BOOKINGS / V3 / PAGE LAYER

   Loads after v2-pages.css. New classes only, so every existing page keeps
   rendering exactly as approved.

   The V3 provider and client pages are built almost entirely from components
   that already exist: .page-hero--img for the banner hero, .spread for the
   alternating photo bands, .statement for the editorial band, .seq for the
   ruled columns, .egrid / .cat-tile for the category tiles, .bandwait for the
   waitlist band. Three things were missing, and only those three are here.

   V3.5 and V3.6 were added when the homepage went neutral: the waitlist band
   now ends in two buttons rather than one form, and the hero carries a proof
   row. Neither element had ever appeared on a dark surface before.

   V3.8 was added when the provider and client pages moved to real app
   screenshots. It is the split hero: a photograph behind, copy on the left, a
   phone on the right. It is the only structural component those pages needed
   that the theme did not already have.

   WORDPRESS NOTE: none of these classes is used on an Elementor container
   whose display mode needs raising, so the :is() lists in style.css are
   unchanged. .photoband lives inside a custom HTML widget and .features--rule
   is a modifier on .features, which is already in the grid list.
   ========================================================================== */

/* --------------------------------------------------------------------------
   V3.1  PHOTO BAND                      → Elementor: custom HTML widget
   --------------------------------------------------------------------------
   The still version of .filmband. The homepage breaks its long white run with
   a full-bleed film still; the interior pages have no film, so they break it
   with a photograph and one line of type. Sits inside a .filmband container,
   which is already padding-zeroed.
   -------------------------------------------------------------------------- */
.photoband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-2);
}
.photoband > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}
.photoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(8, 12, 18, 0.86) 0%,
    rgba(8, 12, 18, 0.46) 42%,
    rgba(8, 12, 18, 0.06) 100%);
  pointer-events: none;
}

/* The band is full bleed, so the caption re-creates the container gutter
   rather than sitting in a .wrap. Matches .videoslot-foot on the homepage. */
.photoband-cap {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 0 max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter))) 42px;
  color: #fff;
}
.photoband-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.9vw, 32px);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
.photoband-sub {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   V3.2  RULED FEATURE GRID              → Elementor: modifier on .features
   --------------------------------------------------------------------------
   Same content as .features, without the card. Six white cards on white, or
   six white cards on light grey, is the flattest thing on either page: the
   grid reads as one texture and no single item carries any weight. Stripping
   to a hairline rule puts the titles back in charge.

   The .section--soft selector is repeated because style.css sets a white card
   background there at 0-2-0, which would otherwise win.
   -------------------------------------------------------------------------- */
.features--rule { gap: clamp(24px, 3vw, 44px); }

.features--rule .feature,
.section--soft .features--rule .feature {
  background: none;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--line-strong);
  padding: 18px 0 0;
}
.features--rule .feature-title { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   V3.3  OPENINGS PANEL IN AN IMAGE HERO
   --------------------------------------------------------------------------
   The client hero already carries the openings card. V1 centred it under a
   centred headline. The image hero is left aligned, so the card follows the
   copy instead of floating away from it, and it gets a label and a line
   marking the openings as illustrative, which the live page does not say
   anywhere near them.
   -------------------------------------------------------------------------- */
.page-hero--img .hero-visual {
  margin-top: 40px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  max-width: 560px;
}
/* The image hero sets color:#fff on the whole band. .slot-time, .slot-meta and
   .slot-price all carry an explicit colour, but .slot-name does not, so on the
   live page the service name renders white on the white card and is invisible.
   Putting the ink back on the card fixes it for every descendant at once. */
.page-hero--img .glass-card {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.hero-slots-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  padding: 2px 4px 14px;
}
.hero-slots-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint);
  padding: 14px 4px 0;
  letter-spacing: -0.004em;
}

/* --------------------------------------------------------------------------
   V3.4  RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .features--rule { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .photoband > img { aspect-ratio: 4 / 3; }
  .photoband-cap { padding-bottom: 28px; }
  .features--rule { grid-template-columns: 1fr; gap: 24px; }
  .page-hero--img .hero-visual { margin-top: 32px; max-width: none; }
}

/* --------------------------------------------------------------------------
   V3.5  BUTTONS ON THE WAITLIST BAND
   --------------------------------------------------------------------------
   .bandwait used to hold a form, so it never needed button rules. The neutral
   homepage ends on one door per side instead, and .btn-primary on a dark band
   would otherwise render near-black on near-black. Same treatment .bhero and
   .page-hero--img already use, so all three dark surfaces agree.
   -------------------------------------------------------------------------- */
.bandwait .cta-row { justify-content: flex-start; margin-bottom: 26px; }
.bandwait .btn-primary { background: #fff; color: var(--ink); }
.bandwait .btn-primary:hover { background: #f0f0f3; }
.bandwait .btn-ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.bandwait .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.bandwait :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   V3.6  PROOF ROW ON A DARK HERO
   --------------------------------------------------------------------------
   .proof uses --ink-soft and --accent-text, both tuned for a white surface.
   On the hero band the label needs to invert and the icon needs the on-dark
   accent, which is a lighter orange that holds up against the photograph.
   -------------------------------------------------------------------------- */
.bhero .proof-row,
.page-hero--img .proof-row { margin-top: 34px; }
.bhero .proof,
.page-hero--img .proof { color: rgba(255, 255, 255, 0.78); }
.bhero .proof .ico,
.page-hero--img .proof .ico { color: var(--accent-on-dark); }

@media (max-width: 768px) {
  .bhero .proof-row,
  .page-hero--img .proof-row { gap: 8px 18px; margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   V3.8  SPLIT APP HERO                  → Elementor: Container + .statement
   --------------------------------------------------------------------------
   The interior pages used to open on a full-bleed stock photograph with the
   copy over a scrim. They now open on the product: copy left, a screenshot of
   the app right, on a near-black band that lets the orange-to-blue gradient in
   the screenshot carry the colour.

   It reuses .statement for the two columns rather than introducing a new grid,
   because .statement, .statement-copy and .statement-media are already in the
   display lists in style.css. Only the column ratio is overridden here, so
   nothing in those lists changes. .page-hero--img is untouched and any page
   still using it is unaffected.
   -------------------------------------------------------------------------- */
.hero-app {
  position: relative;
  background-color: var(--dark-2);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* One pseudo-element carries four layers, in paint order: the scrim that makes
   the photograph dark enough to read white type over, then a wash of the brand
   gradient behind the screenshot so the right half is not flat black behind a
   very colourful image.

   The vertical scrim is the value .page-hero--img already uses. The horizontal
   one is darker on the right than that hero's, because this one has a bright
   screenshot sitting there: the photograph has to stay subordinate to the
   phone, not compete with it. Copy corner stays around 95% covered, the right
   around 70%, so the photograph reads as texture throughout. */
.hero-app::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 74% 34%, rgba(253, 143, 84, 0.20), transparent 62%),
    radial-gradient(ellipse 60% 60% at 88% 82%, rgba(138, 202, 253, 0.16), transparent 64%),
    linear-gradient(to top, rgba(6, 9, 13, 0.90) 0%, rgba(6, 9, 13, 0.58) 46%, rgba(6, 9, 13, 0.40) 100%),
    linear-gradient(to right, rgba(6, 9, 13, 0.82) 0%, rgba(6, 9, 13, 0.56) 58%, rgba(6, 9, 13, 0.48) 100%);
  pointer-events: none;
}

.hero-app > .wrap {
  position: relative;
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
}

/* Closer to even than the editorial .statement, because a phone needs width */
.hero-app .statement {
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-app .statement-media { max-width: none; }

/* .hero-app--wide is for a landscape screenshot, such as the two-phone
   Discover composition. A 3:2 image needs more column than a 4:5 one to keep
   the screens legible, so the split leans the other way. */
.hero-app--wide .statement { grid-template-columns: 0.92fr 1.08fr; }
/* The wide variant gives the column away to the image, so the headline comes
   down a step to keep its lines intact. */
.hero-app--wide .h1 { font-size: clamp(30px, 3.6vw, 44px); }
.hero-app .plate {
  box-shadow: var(--shadow-device);
  border-radius: 24px;
}

/* Type on the dark band. The page .h1 runs to 72px, which is sized for a
   full-width hero; in a half-width column it breaks a four-word line into
   four lines. Capped here only, so .page-hero--img keeps its own scale. */
.hero-app .h1 {
  color: #fff;
  margin-bottom: 20px;
  font-size: clamp(32px, 4vw, 50px);
}
.hero-app .h1 .accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
}
.hero-app .hero-sub {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 30px;
  max-width: 46ch;
}
.hero-app .breadcrumbs { color: rgba(255, 255, 255, 0.55); }
.hero-app .breadcrumbs a { color: rgba(255, 255, 255, 0.78); }
.hero-app .breadcrumbs a:hover { color: #fff; }

/* Same button treatment as .bhero, .page-hero--img and .bandwait */
.hero-app .cta-row { justify-content: flex-start; }
.hero-app .btn-primary { background: #fff; color: var(--ink); }
.hero-app .btn-primary:hover { background: #f0f0f3; }
.hero-app .btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); }
.hero-app .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.hero-app :focus-visible { outline-color: #fff; }

/* The pill above the headline. .eyebrow-live already exists for the light
   surfaces; on the dark band it needs the glass treatment instead. */
.eyebrow-live--on-dark {
  background: rgba(255, 255, 255, 0.10);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.eyebrow-live--on-dark .ico { color: var(--accent-on-dark); }

/* The reassurance line under the fold, matching the app's own landing page */
.hero-app-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: rgba(255, 255, 255, 0.62);
  max-width: 48ch;
}
.hero-app-foot .ico { color: rgba(255, 255, 255, 0.62); flex-shrink: 0; margin-top: 1px; }

@media (max-width: 880px) {
  .hero-app .statement,
  .hero-app--wide .statement { grid-template-columns: 1fr; }

  /* Stacked, there is no left half to protect, so the left-to-right scrim does
     almost nothing and the copy can end up sitting on a bright part of the
     photograph. It becomes one even wash instead. The brand glows go with it;
     on a phone the screenshot supplies all the colour the band needs. */
  .hero-app::before {
    background: linear-gradient(to top,
      rgba(6, 9, 13, 0.93) 0%,
      rgba(6, 9, 13, 0.80) 52%,
      rgba(6, 9, 13, 0.74) 100%);
  }
  /* Copy first, phone after. A hero that opens on a screenshot makes a phone
     visitor scroll before they learn what the page is. */
  .hero-app .statement-media { max-width: 330px; margin-top: 4px; }
  .hero-app--wide .statement-media { max-width: 520px; }
}

@media (max-width: 768px) {
  .hero-app > .wrap { padding-top: 52px; padding-bottom: 56px; }
  .hero-app .hero-sub { margin-bottom: 26px; }
  .hero-app-foot { margin-top: 24px; padding-top: 22px; }
}