/**
 * WedHues 7.0.14 — public alignment and adaptive Wedding Story cinema.
 * Loaded last so major public-page headings and copy stay consistently centred.
 */

/* ── Consistent public-page alignment ─────────────────────── */
body.wh-centered-public-content :where(
  .wh-section__header,
  .wh-hero__content,
  .wh-hero__inner,
  .wh-article__header,
  .wh-content-hero,
  .wh-hub-hero,
  .wh-planning-hero .wh-container,
  .wh-revenue-hero .wh-container,
  .wh-trust-hero .wh-container,
  .wh-film-hero > div
) {
  text-align: center;
  margin-inline: auto;
}

body.wh-centered-public-content .wh-section__header {
  width: min(100%, 860px);
}

body.wh-centered-public-content :where(
  .wh-section__header,
  .wh-hero__content,
  .wh-hero__inner,
  .wh-article__header,
  .wh-content-hero,
  .wh-hub-hero
) :where(h1,h2,h3,p,.wh-lead) {
  margin-inline: auto;
  text-align: center;
}

body.wh-centered-public-content :where(
  .wh-service-intro,
  .wh-destination-copy,
  .wh-editorial-intro,
  .wh-content-intro,
  .wh-guide-intro,
  .wh-venue-intro,
  .wh-trust-intro,
  .wh-services-intro,
  .wh-revenue__intro,
  .wh-story-copy,
  .wh-page-content,
  .wh-article__content
) {
  text-align: center;
  margin-inline: auto;
}

body.wh-centered-public-content :where(
  .wh-service-intro,
  .wh-destination-copy,
  .wh-editorial-intro,
  .wh-content-intro,
  .wh-guide-intro,
  .wh-venue-intro,
  .wh-trust-intro,
  .wh-services-intro,
  .wh-revenue__intro,
  .wh-story-copy,
  .wh-page-content,
  .wh-article__content
) :where(h1,h2,h3,h4,p,.wh-lead) {
  margin-inline: auto;
  text-align: center;
}

body.wh-centered-public-content :where(
  .wh-service-card__content,
  .wh-story-card-body,
  .wh-content-card__body,
  .wh-guide-card,
  .wh-proof-card__body,
  .wh-team-card,
  .wh-pricing-card,
  .wh-blog-card__body,
  .wh-story-facts,
  .wh-content-facts,
  .wh-proof-notes-grid > *,
  .wh-story-next-step__inner
) {
  text-align: center;
}

body.wh-centered-public-content :where(
  .wh-hero__actions,
  .wh-hero__ctas,
  .wh-story-hero__actions,
  .wh-story-next-step__actions,
  .wh-footer-cta__actions
) {
  justify-content: center;
}

body.wh-centered-public-content .wh-breadcrumbs {
  text-align: center;
}

/* Keep structured information readable while the surrounding copy is centred. */
body.wh-centered-public-content :where(.wh-page-content,.wh-article__content,.wh-story-copy) :where(ul,ol) {
  display: table;
  max-width: min(100%, 760px);
  margin-inline: auto;
  text-align: left;
}

body.wh-centered-public-content :where(.wh-page-content,.wh-article__content,.wh-story-copy) :where(table,th,td),
body.wh-centered-public-content :where(form,.wh-form,.wh-discovery-form,.wh-revenue-form) :where(label,input,select,textarea) {
  text-align: left;
}

body.wh-centered-public-content :where(.wh-page-content,.wh-article__content,.wh-story-copy) blockquote {
  text-align: center;
  border-left: 0;
  border-top: 1px solid rgba(184,146,74,.42);
  border-bottom: 1px solid rgba(184,146,74,.42);
}

/* ── Shared film facades ───────────────────────────────────── */
.wh-video-facade,
.wh-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #080706;
}

.wh-video-facade {
  cursor: pointer;
  isolation: isolate;
}

.wh-video-facade iframe,
.wh-video-frame iframe,
.wh-video-frame video,
.wh-video-facade > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}

.wh-video-facade:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.wh-video-facade--vimeo {
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 72% 20%, rgba(184,146,74,.28), transparent 30%),
    linear-gradient(135deg, #0d0b0a, #241b18 58%, #080706);
}

.wh-video-facade__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.035) 42% 43%, transparent 43% 100%),
    linear-gradient(30deg, transparent 0 62%, rgba(255,255,255,.025) 62% 63%, transparent 63% 100%);
}

.wh-video-facade__provider,
.wh-video-facade__title {
  position: absolute;
  z-index: 1;
}

.wh-video-facade__provider {
  top: clamp(.85rem,2vw,1.35rem);
  left: clamp(.85rem,2vw,1.35rem);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.wh-video-facade__title {
  left: 50%;
  bottom: clamp(1rem,3vw,2rem);
  width: min(80%, 760px);
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: clamp(1.2rem,2.5vw,2.15rem);
  line-height: 1.15;
  text-wrap: balance;
}

.wh-video-facade--vimeo .wh-yt-play {
  z-index: 2;
}

/* ── Adaptive Wedding Story film layouts ──────────────────── */
.wh-story-featured-film {
  position: relative;
  overflow: hidden;
  background: #100e0d;
  color: var(--wh-cream, #faf7f2);
}

.wh-story-featured-film .wh-section__header {
  max-width: 820px;
  padding-inline: var(--wh-site-gutter, 1.25rem);
}

.wh-story-featured-film .wh-section__header p {
  color: rgba(255,255,255,.74);
}

.wh-story-film-container {
  width: min(100%, 1540px);
  max-width: 1540px;
}

.wh-story-film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem,1.6vw,1.5rem);
  width: 100%;
  margin: 0 auto;
}

.wh-story-film-grid__item,
.wh-story-film {
  min-width: 0;
  width: 100%;
}

.wh-story-film {
  border-radius: 0;
  box-shadow: 0 24px 72px rgba(0,0,0,.42);
}

/* One film: true viewport edge-to-edge presentation on desktop and mobile. */
.wh-story-films--count-1 .wh-story-film-grid {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wh-story-films--count-1 .wh-story-film-grid__item,
.wh-story-films--count-1 .wh-story-film {
  width: 100%;
  max-width: none;
}

/* Three films: the first is the visual lead, followed by two equal films. */
.wh-story-films--count-3 .wh-story-film-grid__item:first-child {
  grid-column: 1 / -1;
}

.wh-story-films--count-3 .wh-story-film-grid__item:first-child .wh-story-film {
  width: min(100%, 1320px);
  margin-inline: auto;
}

/* Four films naturally form a balanced 2×2 grid. */
.wh-story-films--count-4 .wh-story-film-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Focused cinema mode ───────────────────────────────────── */
body.wh-cinema-active {
  overflow: hidden;
}

body.wh-cinema-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5,3,2,.74);
  -webkit-backdrop-filter: blur(14px) saturate(.72);
  backdrop-filter: blur(14px) saturate(.72);
}

.wh-cinema-player.is-cinema-active {
  position: fixed !important;
  z-index: 9999 !important;
  left: 50% !important;
  top: 50% !important;
  width: min(94vw, 1500px) !important;
  max-width: 1500px !important;
  max-height: 92vh !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  aspect-ratio: 16 / 9;
  border-radius: 0 !important;
  box-shadow: 0 32px 110px rgba(0,0,0,.82) !important;
  background: #000;
}

.wh-cinema-player.is-cinema-active :where(iframe,video) {
  width: 100% !important;
  height: 100% !important;
  max-height: 92vh;
}

.wh-cinema-close {
  position: fixed;
  z-index: 10000;
  right: max(1rem, env(safe-area-inset-right));
  top: max(1rem, env(safe-area-inset-top));
  min-width: 44px;
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(23,19,16,.94);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wh-cinema-close:hover,
.wh-cinema-close:focus-visible {
  background: #fff;
  color: #171310;
  outline: none;
}

@media (max-width: 767px) {
  .wh-story-featured-film .wh-container,
  .wh-story-film-container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  .wh-story-featured-film .wh-section__header {
    padding-inline: 1rem;
  }

  .wh-story-film-grid,
  .wh-story-films--count-2 .wh-story-film-grid,
  .wh-story-films--count-3 .wh-story-film-grid,
  .wh-story-films--count-4 .wh-story-film-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    gap: .85rem;
  }

  .wh-story-films--count-3 .wh-story-film-grid__item:first-child {
    grid-column: auto;
  }

  .wh-story-film-grid__item,
  .wh-story-film,
  .wh-story-films--count-3 .wh-story-film-grid__item:first-child .wh-story-film {
    width: 100%;
    max-width: none;
  }

  .wh-cinema-player.is-cinema-active {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 82vh !important;
  }

  .wh-cinema-close {
    right: max(.5rem, env(safe-area-inset-right));
    top: max(.5rem, env(safe-area-inset-top));
    padding: .55rem .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wh-video-facade img,
  .wh-yt-play,
  .wh-cinema-player {
    transition: none !important;
  }
}

/* ── v7.0.21 Wedding Story cinema visibility and CTA alignment ───── */
.single-portfolio .wh-story-featured-film {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 50% 0, rgba(184,146,74,.09), transparent 38%),
    #0b0a09;
}

.single-portfolio .wh-story-featured-film .wh-section__header {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .75rem;
  width: min(100%, 880px);
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  text-align: center;
}

.single-portfolio .wh-story-featured-film .wh-section__header .wh-kicker {
  color: #d9b76b !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}

.single-portfolio .wh-story-featured-film .wh-section__header h2 {
  max-width: 18ch;
  margin: 0 auto;
  color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 5rem);
  line-height: .98;
  text-shadow: 0 3px 28px rgba(0,0,0,.96);
}

.single-portfolio .wh-story-featured-film .wh-section__header p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  line-height: 1.75;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

.single-portfolio .wh-story-film .wh-video-facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: pointer;
}

.single-portfolio .wh-story-film .wh-video-facade picture,
.single-portfolio .wh-story-film .wh-video-facade__image,
.single-portfolio .wh-story-film .wh-video-facade > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-portfolio .wh-story-film .wh-video-facade__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.46) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.38));
}

.single-portfolio .wh-story-film .wh-video-facade__play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  width: clamp(72px, 8vw, 116px);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: rgba(0,0,0,.34);
  box-shadow: 0 18px 55px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.single-portfolio .wh-story-film .wh-video-facade__play span {
  width: 0;
  height: 0;
  margin-left: 7%;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 19px solid #fff;
}

.single-portfolio .wh-story-film .wh-video-facade:hover .wh-video-facade__play,
.single-portfolio .wh-story-film .wh-video-facade:focus-visible .wh-video-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #f1d58e;
  background: rgba(184,146,74,.34);
}

.single-portfolio .wh-story-film .wh-video-facade__label {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 5%, 2.25rem);
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(.68rem, 1vw, .8rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 14px #000;
}

.single-portfolio .wh-story-film .wh-video-facade__provider,
.single-portfolio .wh-story-film .wh-video-facade__title {
  z-index: 2;
}

.single-portfolio .wh-story-next-step {
  padding: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(184,146,74,.08), transparent 45%),
    #181615;
}

.single-portfolio .wh-story-next-step .wh-container {
  width: min(100%, 1280px);
}

.single-portfolio .wh-story-next-step__inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 5vw, 3rem);
  text-align: center;
}

.single-portfolio .wh-story-next-step__copy {
  display: grid;
  justify-items: center;
  gap: .7rem;
  width: min(100%, 780px);
}

.single-portfolio .wh-story-next-step__copy h2 {
  max-width: 20ch;
  margin: 0 auto;
  color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  line-height: 1;
  text-wrap: balance;
}

.single-portfolio .wh-story-next-step__copy p {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.75;
}

.single-portfolio .wh-story-next-step__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  justify-content: center;
  gap: .8rem;
  width: min(100%, 720px);
  margin: 0 auto;
}

.single-portfolio .wh-story-next-step__actions .wh-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  text-align: center;
}

@media (max-width: 680px) {
  .single-portfolio .wh-story-featured-film {
    padding-block: 3rem;
  }

  .single-portfolio .wh-story-featured-film .wh-section__header {
    margin-bottom: 2rem;
  }

  .single-portfolio .wh-story-film .wh-video-facade__play {
    width: 72px;
  }

  .single-portfolio .wh-story-film .wh-video-facade__label {
    bottom: .85rem;
    font-size: .64rem;
  }

  .single-portfolio .wh-story-next-step__actions {
    grid-template-columns: 1fr;
    width: min(100%, 440px);
  }
}


/* ── v7.0.22 Wedding Story visual-first sequence ───────────── */
.single-portfolio .wh-story-gallery-studio,
.single-portfolio .wh-story-featured-film,
.single-portfolio .wh-story-films {
  margin-block: 0 !important;
}

/* Keep the gallery and films visually connected without the body/ivory strip
   that appeared when the legacy .wh-story-films margin collapsed outside the
   dark section. */
.single-portfolio .wh-story-gallery-studio + .wh-story-featured-film {
  border-top: 1px solid rgba(184,146,74,.22);
}

.single-portfolio .wh-story-featured-film {
  border-bottom: 0;
}

.single-portfolio .wh-story-featured-film + .wh-section,
.single-portfolio .wh-story-featured-film + .wh-complete-wedding {
  margin-top: 0 !important;
}

/* Breadcrumbs remain useful, but now live inside the hero so the public page
   can proceed directly from the banner into the gallery. */
.single-portfolio .wh-story-hero__breadcrumbs {
  width: min(100%, 900px);
  margin: 0 auto clamp(.7rem,1.5vw,1.1rem);
}

.single-portfolio .wh-story-hero__breadcrumbs .wh-breadcrumbs {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.7rem,1vw,.82rem);
}

.single-portfolio .wh-story-hero__breadcrumbs .wh-breadcrumbs ol {
  justify-content: center;
  gap: .2rem;
}

.single-portfolio .wh-story-hero__breadcrumbs .wh-breadcrumbs a,
.single-portfolio .wh-story-hero__breadcrumbs .wh-breadcrumbs span {
  color: inherit !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}

.single-portfolio .wh-story-hero__breadcrumbs .wh-breadcrumbs li::after {
  color: rgba(255,255,255,.45);
}

/* The long-form article is deliberately deferred until after the gallery,
   films and supporting proof. It remains comfortable to read without
   competing with the visual opening of the page. */
.single-portfolio .wh-story-introduction--deferred {
  margin: 0;
  background: #faf8f4;
  border-top: 1px solid rgba(42,31,26,.08);
}

.single-portfolio .wh-story-introduction--deferred .wh-story-chips {
  justify-content: center;
  margin-inline: auto;
  margin-bottom: clamp(2rem,4vw,3.5rem);
}

.single-portfolio .wh-story-introduction--deferred .wh-story-copy > .wh-kicker,
.single-portfolio .wh-story-introduction--deferred .wh-story-copy > h2 {
  display: block;
  text-align: center;
}

.single-portfolio .wh-story-introduction--deferred .wh-story-copy > h2 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem,3vw,2.5rem);
}

@media (max-width: 680px) {
  .single-portfolio .wh-story-hero__breadcrumbs {
    display: none;
  }

  .single-portfolio .wh-story-gallery-studio + .wh-story-featured-film {
    border-top-color: rgba(184,146,74,.16);
  }
}

/* v7.0.25 — per-story responsive hero covers.
   Phones may use an independently selected portrait image. Tablets deliberately
   stay on the desktop cover so the editor has only two predictable variants. */
.single-portfolio .wh-story-proof-hero .wh-story-cover-picture,
.single-portfolio .wh-story-proof-hero .wh-story-cover-picture > img {
  display: block;
  width: 100%;
  height: 100%;
}

.single-portfolio .wh-story-proof-hero .wh-story-cover-picture > img {
  max-width: none;
  object-fit: cover;
  object-position: var(--wh-story-cover-position-desktop, 50% 50%);
}

@media (max-width: 767px) {
  .single-portfolio .wh-story-proof-hero .wh-story-cover-picture > img {
    object-position: var(--wh-story-cover-position-mobile, 50% 50%);
  }
}