/* Wedding in Positano — v1.8.3 responsive + cross-browser guardrails.
 * This file intentionally overrides presentation at runtime without editing the
 * source-locked Design A / Design B exports. The rules are defensive: contain
 * horizontal overflow, cap ultrawide layouts, use dynamic viewport units where
 * supported, and fail open when modern layout features are unavailable.
 */

:root {
  --wip-vw-min: 360;
  --wip-vw-max: 1440;
  --wip-content-max: 1720px;
  --wip-ultrawide-max: 1920px;
  --wip-gutter: clamp(20px, 3.2vw, 56px);
  --wip-section-y: clamp(64px, 8vw, 128px);
  --wip-body-fluid: clamp(15px, 14.333px + 0.185vw, 17px);
  --wip-h2-fluid: clamp(30px, 22px + 2.2vw, 56px);
  --wip-h1-fluid: clamp(46px, 28px + 5vw, 96px);
}

/* -------------------------------------------------------------------------
   1. The kill switch: the document itself is never allowed to become wider
   than the layout viewport. This protects both static source exports and the
   managed Lazy Block renderer.
   ------------------------------------------------------------------------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
picture,
video,
canvas {
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font-family: inherit;
}

/* Grid/flex children are allowed to shrink instead of forcing the page wider. */
.abc-grid > *,
.abc-split > *,
.abc-container > *,
.wip-header__inner > *,
.wip-footer__top > *,
body.abc-claude-source-locked [style*="display:flex"] > *,
body.abc-claude-source-locked [style*="display: flex"] > *,
body.abc-claude-source-locked [style*="display:grid"] > *,
body.abc-claude-source-locked [style*="display: grid"] > * {
  min-width: 0;
  min-inline-size: 0;
}

/* Absolute/fixed decorations may not define a wider scrollable box. */
body.abc-claude-source-locked [style*="position:absolute"],
body.abc-claude-source-locked [style*="position: absolute"],
body.abc-claude-source-locked [style*="position:fixed"],
body.abc-claude-source-locked [style*="position: fixed"] {
  max-width: 100%;
  box-sizing: border-box;
}

body.abc-claude-source-locked [style*="width:"] {
  max-width: 100%;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   2. Fluid typography and spacing. Existing source clamps remain authoritative;
   these rules normalize the shared WordPress layer and add safe caps where old
   fixed values could become visually disproportionate.
   ------------------------------------------------------------------------- */
/* Source-locked fluid type keeps the accepted scale through 1440 CSS px,
   then freezes at the exact 1440px computed size. This is the Retina guard:
   physical-pixel density no longer makes editorial type continue to grow. */
body.abc-claude-source-locked [style*="font-size:clamp(14px,1.05vw,17px)"] { font-size: clamp(14px, 1.05vw, 15.12px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(15px,1.05vw,17px)"] { font-size: clamp(15px, 1.05vw, 15.12px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(16px,1.15vw,18px)"] { font-size: clamp(16px, 1.15vw, 16.56px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(16px,1.2vw,18px)"] { font-size: clamp(16px, 1.2vw, 17.28px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(17px,1.5vw,23px)"] { font-size: clamp(17px, 1.5vw, 21.6px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(19px,1.7vw,26px)"] { font-size: clamp(19px, 1.7vw, 24.48px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(19px,1.9vw,28px)"] { font-size: clamp(19px, 1.9vw, 27.36px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(20px,2vw,30px)"] { font-size: clamp(20px, 2vw, 28.8px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(20px,2.1vw,32px)"] { font-size: clamp(20px, 2.1vw, 30.24px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(21px,2.1vw,32px)"] { font-size: clamp(21px, 2.1vw, 30.24px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(22px,2.2vw,32px)"] { font-size: clamp(22px, 2.2vw, 31.68px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(22px,2.3vw,34px)"] { font-size: clamp(22px, 2.3vw, 33.12px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(22px,2.4vw,36px)"] { font-size: clamp(22px, 2.4vw, 34.56px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(22px,2.6vw,42px)"] { font-size: clamp(22px, 2.6vw, 37.44px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(23px,2.5vw,38px)"] { font-size: clamp(23px, 2.5vw, 36px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(24px,2.5vw,38px)"] { font-size: clamp(24px, 2.5vw, 36px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,2.4vw,38px)"] { font-size: clamp(26px, 2.4vw, 34.56px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,2.8vw,42px)"] { font-size: clamp(26px, 2.8vw, 40.32px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,2.8vw,44px)"] { font-size: clamp(26px, 2.8vw, 40.32px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,2.9vw,42px)"] { font-size: clamp(26px, 2.9vw, 41.76px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,2.9vw,44px)"] { font-size: clamp(26px, 2.9vw, 41.76px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,3vw,46px)"] { font-size: clamp(26px, 3vw, 43.2px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(26px,3vw,48px)"] { font-size: clamp(26px, 3vw, 43.2px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,2.8vw,46px)"] { font-size: clamp(28px, 2.8vw, 40.32px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,3.1vw,46px)"] { font-size: clamp(28px, 3.1vw, 44.64px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,3.2vw,50px)"] { font-size: clamp(28px, 3.2vw, 46.08px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,3.4vw,52px)"] { font-size: clamp(28px, 3.4vw, 48.96px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,3.4vw,54px)"] { font-size: clamp(28px, 3.4vw, 48.96px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(28px,3.6vw,58px)"] { font-size: clamp(28px, 3.6vw, 51.84px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(30px,3.2vw,52px)"] { font-size: clamp(30px, 3.2vw, 46.08px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(30px,3.8vw,62px)"] { font-size: clamp(30px, 3.8vw, 54.72px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(30px,3.9vw,62px)"] { font-size: clamp(30px, 3.9vw, 56.16px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(30px,4.6vw,76px)"] { font-size: clamp(30px, 4.6vw, 66.24px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(32px,3.7vw,60px)"] { font-size: clamp(32px, 3.7vw, 53.28px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(32px,4vw,68px)"] { font-size: clamp(32px, 4vw, 57.6px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(32px,5.2vw,86px)"] { font-size: clamp(32px, 5.2vw, 74.88px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(34px,3.6vw,58px)"] { font-size: clamp(34px, 3.6vw, 51.84px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(34px,4.4vw,72px)"] { font-size: clamp(34px, 4.4vw, 63.36px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(34px,4.6vw,78px)"] { font-size: clamp(34px, 4.6vw, 66.24px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(34px,4.8vw,84px)"] { font-size: clamp(34px, 4.8vw, 69.12px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(38px,4.8vw,82px)"] { font-size: clamp(38px, 4.8vw, 69.12px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(40px,4.4vw,74px)"] { font-size: clamp(40px, 4.4vw, 63.36px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(40px,5.6vw,96px)"] { font-size: clamp(40px, 5.6vw, 80.64px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(42px,6.6vw,120px)"] { font-size: clamp(42px, 6.6vw, 95.04px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(42px,6.8vw,124px)"] { font-size: clamp(42px, 6.8vw, 97.92px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(44px,7vw,128px)"] { font-size: clamp(44px, 7vw, 100.8px) !important; }
body.abc-claude-source-locked [style*="font-size:clamp(46px,7.4vw,136px)"] { font-size: clamp(46px, 7.4vw, 106.56px) !important; }

/* The exact Claude export uses inline values, so only key reading copy is
   normalized. Small labels/eyebrows intentionally keep their compact scale. */
body.abc-claude-source-locked main p:not([style*="text-transform:uppercase"]):not([style*="letter-spacing:0.22em"]):not([style*="letter-spacing:0.24em"]) {
  text-wrap: pretty;
}

body.abc-claude-source-locked h1,
body.abc-claude-source-locked h2,
body.abc-claude-source-locked h3 {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* -------------------------------------------------------------------------
   3. Dynamic mobile viewport. 100vh is the fallback; svh protects against
   browser chrome, dvh tracks the live viewport when the address bar changes.
   ------------------------------------------------------------------------- */
body.abc-claude-source-locked {
  min-height: 100vh;
  background: #0D2B29;
  color: #FBF9F5;
}

.page-shell,
.min-h-\[100svh\] {
  min-height: 100vh;
}

@supports (height: 100svh) {
  body.abc-claude-source-locked,
  .page-shell,
  .min-h-\[100svh\] {
    min-height: 100svh;
  }
}

@supports (height: 100dvh) {
  body.abc-claude-source-locked [style*="height:100vh"],
  body.abc-claude-source-locked [style*="height: 100vh"] {
    height: 100dvh !important;
  }

  body.abc-claude-source-locked [style*="min-height:100vh"],
  body.abc-claude-source-locked [style*="min-height: 100vh"] {
    min-height: 100dvh !important;
  }

  body.abc-claude-source-locked section[aria-label="Introduction"] {
    height: 100dvh !important;
    min-height: max(620px, 100svh) !important;
  }

  .page-shell,
  .min-h-\[100svh\] {
    min-height: 100dvh;
  }
}

/* -------------------------------------------------------------------------
   4. Ultrawide guardrails. Full-bleed surfaces remain full width; inner text,
   grids and navigation stop growing after the editorial maximum.
   ------------------------------------------------------------------------- */
.abc-container {
  width: 100%;
  max-width: min(var(--abc-layout-wide, var(--wip-content-max)), var(--wip-ultrawide-max));
  margin-inline: auto;
}

.wip-header__inner,
.wip-footer__inner,
.wip-footer__meta {
  width: min(100%, var(--wip-content-max));
  max-width: var(--wip-ultrawide-max);
  margin-inline: auto;
}

body.abc-claude-source-locked [style*="max-width:1720px"],
body.abc-claude-source-locked [style*="max-width: 1720px"] {
  width: min(100%, var(--wip-content-max)) !important;
  max-width: var(--wip-content-max) !important;
  margin-inline: auto !important;
}

@media (min-width: 1921px) {
  :root {
    --wip-gutter: 56px;
  }

  body.abc-claude-source-locked main,
  .site-main {
    font-size: 17px;
  }
}

/* -------------------------------------------------------------------------
   5. Cross-browser fallbacks / prefixes.
   ------------------------------------------------------------------------- */
@supports not (overflow: clip) {
  .page-shell,
  body.abc-claude-source-locked x-dc,
  body.abc-claude-source-locked #dc-root {
    overflow-x: hidden !important;
  }
}

@supports not (display: grid) {
  .abc-grid,
  .abc-split,
  body.abc-claude-source-locked [data-jtrack] {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  body.abc-claude-source-locked [data-jpanel] {
    flex: 1 1 300px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  input[type="date"] {
    min-height: 2.75rem;
  }

  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }

  body.abc-claude-source-locked [data-jtrack] {
    -webkit-overflow-scrolling: touch;
  }
}

/* -------------------------------------------------------------------------
   Exact Design B hero: contain rotated/absolute decoration and prevent the
   reveal animation from leaving the primary statement permanently invisible.
   ------------------------------------------------------------------------- */
body.abc-claude-source-locked section[aria-label="Introduction"] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden !important;
}

body.abc-claude-source-locked section[aria-label="Introduction"] > div[aria-hidden="true"] {
  right: clamp(12px, 2.4vw, 40px) !important;
  max-width: calc(100vw - 24px) !important;
  transform-origin: right center !important;
  -webkit-transform-origin: right center !important;
}

body.abc-claude-source-locked [data-hero-h1] {
  max-width: min(19ch, calc(100vw - (2 * var(--wip-gutter)))) !important;
}

/* A class added by cross-browser.js only when a reveal is visibly stuck. */
body.abc-claude-source-locked .abc-reveal-rescue {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* -------------------------------------------------------------------------
   Journey / section 03. The previous 460vh sticky horizontal rail was highly
   sensitive to DPR, browser UI height and resize timing. The approved visual
   is preserved as an editorial card grid with deterministic responsive modes:
   4 columns desktop, 2 tablet, 1 mobile. No horizontal scrolling.
   ------------------------------------------------------------------------- */
body.abc-claude-source-locked [data-journey] {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: clamp(72px, 8vw, 128px) !important;
  overflow: hidden !important;
}

@supports (overflow: clip) {
  body.abc-claude-source-locked [data-journey] {
    overflow: clip !important;
  }
}

body.abc-claude-source-locked [data-journey] > :first-child {
  position: static !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}

body.abc-claude-source-locked [data-journey] > :first-child > :first-child {
  padding: clamp(64px, 7vw, 112px) var(--wip-gutter) 0 !important;
}

body.abc-claude-source-locked [data-journey] > :first-child > :first-child > div {
  width: min(100%, var(--wip-content-max)) !important;
  max-width: var(--wip-content-max) !important;
  margin-inline: auto !important;
}

body.abc-claude-source-locked [data-journey] > :first-child > :last-child {
  display: block !important;
  overflow: visible !important;
  margin-top: clamp(40px, 5vw, 72px) !important;
}

body.abc-claude-source-locked [data-jtrack] {
  width: min(100%, var(--wip-content-max)) !important;
  max-width: var(--wip-content-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--wip-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2.2vw, 42px) clamp(16px, 1.5vw, 28px) !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  overflow: visible !important;
}

body.abc-claude-source-locked [data-jpanel] {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

body.abc-claude-source-locked [data-jpanel] > div:first-child {
  overflow: hidden !important;
}

body.abc-claude-source-locked [data-jpanel] img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.13 / 1;
  object-fit: cover !important;
}

body.abc-claude-source-locked [data-jmeter] {
  flex: 0 0 auto;
  max-width: 100%;
}

@media (max-width: 74.99rem) {
  body.abc-claude-source-locked [data-jtrack] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: clamp(36px, 5vw, 56px) !important;
  }
}

@media (max-width: 43.74rem) {
  :root {
    --wip-gutter: clamp(18px, 5.2vw, 24px);
  }

  body.abc-claude-source-locked [data-jtrack] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  body.abc-claude-source-locked [data-jmeter],
  body.abc-claude-source-locked section[aria-label="Introduction"] > div[aria-hidden="true"] {
    display: none !important;
  }

  body.abc-claude-source-locked [data-hero-h1] {
    max-width: 13ch !important;
    font-size: clamp(44px, 12vw, 72px) !important;
    line-height: 0.96 !important;
  }

  body.abc-claude-source-locked section[aria-label="Introduction"] > div[style*="justify-content:flex-end"] {
    padding-inline: var(--wip-gutter) !important;
    padding-bottom: clamp(36px, 7vh, 64px) !important;
  }

  @supports (height: 100dvh) {
    body.abc-claude-source-locked section[aria-label="Introduction"] > div[style*="justify-content:flex-end"] {
      padding-bottom: clamp(36px, 7dvh, 64px) !important;
    }
  }

  body.abc-claude-source-locked [data-hdr] {
    padding-inline: var(--wip-gutter) !important;
  }

  body.abc-claude-source-locked [data-hdr] > div {
    gap: 16px !important;
  }
}

/* The managed Lazy Block version of the same section gets the identical no-
   overflow architecture. */
.design-b [data-abc-block="wedding-moments"] .abc-place-grid {
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2.2vw, 42px) clamp(16px, 1.5vw, 28px) !important;
}

.design-b [data-abc-block="wedding-moments"] .abc-place-card {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  flex: none !important;
}

@media (max-width: 74.99rem) {
  .design-b [data-abc-block="wedding-moments"] .abc-place-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 43.74rem) {
  .design-b [data-abc-block="wedding-moments"] .abc-place-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* -------------------------------------------------------------------------
   Runtime fail-open from v1.8.2: if the canonical renderer does not mount, raw
   source content remains usable instead of a white page.
   ------------------------------------------------------------------------- */
.abc-runtime-fallback x-dc {
  display: block !important;
  visibility: visible !important;
}

.abc-runtime-fallback x-dc > helmet,
.abc-runtime-fallback x-dc > sc-helmet,
.abc-runtime-fallback x-dc > script[type="text/x-dc"] {
  display: none !important;
}

.abc-runtime-fallback [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  visibility: visible !important;
}

/* No motion-dependent content may remain hidden when reduced motion is active. */
@media (prefers-reduced-motion: reduce) {
  body.abc-claude-source-locked [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }

  body.abc-claude-source-locked [data-parallax],
  body.abc-claude-source-locked [data-zoom] {
    transform: none !important;
    -webkit-transform: none !important;
  }
}