/**
 * ROARR section-break artwork skin.
 *
 * Extracted VERBATIM from roarr-web/src/styles/chrome.css (the
 * "Section breaks — one system" block, ~lines 2836-3157), the pure-CSS skin
 * every injected break element renders with. Only change: /img/decor/ URLs
 * rewritten to the theme-relative assets/decor/ path.
 *
 * Placement/markup is injected server-side by inc/section-breaks.php (the
 * the_content DOM pass mirroring the mocks' interactions.js). Clearance rules
 * (.roarr-section--break-after-*) live in editor-style.css. Height/overlap
 * vars (--skyline-h/--leaf-h/--canopy-h/--canopy-cap-h) are defined below.
 *
 * DRIFT: keep in sync with the source block if the seam artwork changes.
 */
/* ============================================================
   Section breaks — one system, site-wide. Ported verbatim from
   design-reference/mocks/css/styles.css (.roarr-rip*, .roarr-skyline*,
   .roarr-leaf-break*, .roarr-canopy-break* rules, ~lines 3246-4613).
   Placement + fill are computed server-side (BlockRenderer's break pass,
   src/lib/breaks/insertSectionBreaks.tsx) mirroring the mock's
   js/interactions.js SECTION_BREAK_TEMPLATES / initSectionBreaks /
   initHeroBreaks / initFooterBreak / initCtaBreak — these rules are the
   pure CSS skin every injected/hand-placed break element renders with.
   Excluded: .roarr-home-hero* (home-page-only, not chrome) and
   .roarr-ptero* / .roarr-plan-sky (plan-your-visit-page-only decor).
   ============================================================ */

.roarr-rip {
  position: relative;
  width: 100%;
  background-position: center bottom;
  background-size: auto 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* Hero → section 1: PAINT-BRUSH skin. A band in the section-below colour
   (--roarr-break-fill, cream default — set it inline where section 1 is a
   colour block) masked by a dry-brush edge tile: ragged bristle streaks +
   flecks along the top, solid base covering the seam. Sits on the hero's
   bottom edge under the info bar (z-index:1 < the bar's 4) so the bar keeps
   its 50/50 straddle; the token lift tucks the solid body over the hero line.
   Second mask layer = the same paper-grain feather as the other rips
   (intersect), fading the flat fill into the textured section below. */
.roarr-rip--hero {
  /* Above the hero and everything in it — only the info bar (z-index 4)
     may sit over the brush edge. */
  z-index: 3;
  height: var(--space-112);
  margin-bottom: calc(-1 * var(--space-112));
  transform: translateY(calc(-100% + var(--space-32) - var(--space-4)));
  /* Paper grain matches the cream sections; the below-seam feather (second
     mask layer, starts ~76% = past the seam) melts the tail into ANY page
     background — paper sections, singles' flat cream, colour bands. */
  background-color: var(--roarr-break-fill, var(--cream));
  background-image: var(--paper-cream);
  -webkit-mask-image: url("assets/decor/hero-brush-edge-tile.webp"),
    linear-gradient(to bottom, transparent, #000 var(--space-8), #000 76%, transparent 97%);
  mask-image: url("assets/decor/hero-brush-edge-tile.webp"),
    linear-gradient(to bottom, transparent, #000 var(--space-8), #000 76%, transparent 97%);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: auto 100%, 100% 100%;
  mask-size: auto 100%, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.roarr-rip--hero[style*="--roarr-break-background"] {
  background: var(--roarr-break-background);
}

/* Mid-page seam — cream BRUSH STROKE sweeps UP into a dark section ABOVE
   (same skin as the hero break — replaced the torn-paper rip). Place the rip
   immediately AFTER that dark section. Paper-grain body = seamless into the
   cream section below; brush edge + stroke gaps show the dark band through. */
.roarr-rip--up {
  z-index: 1;
  height: var(--space-112);
  margin-bottom: calc(-1 * var(--space-112));
  transform: translateY(calc(-100% + var(--space-32) - var(--space-4)));
  background-color: var(--roarr-break-fill, var(--cream));
  background-image: var(--paper-cream);
  /* Second mask layer: feather the tail BELOW the seam (~74% down) so the
     band melts into whatever background the page has there — paper sections,
     singles' flat cream, colour bands — no line, no per-page matching. */
  -webkit-mask-image: url("assets/decor/hero-brush-edge-tile.webp"),
    linear-gradient(to bottom, transparent, #000 var(--space-8), #000 76%, transparent 97%);
  mask-image: url("assets/decor/hero-brush-edge-tile.webp"),
    linear-gradient(to bottom, transparent, #000 var(--space-8), #000 76%, transparent 97%);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-size: auto 100%, 100% 100%;
  mask-size: auto 100%, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* CTA-top variant of --down: paints ABOVE the CTA band (its z-index is 1 and
   it pulls itself up -64px over the section above), so the cream brush edge
   frames the band's sky art from the top — twin of the footer break. */
.roarr-rip--down.roarr-rip--cta {
  /* Inherits --down's translateY — only the stacking differs (band is z1). */
  z-index: 2;
}

/* Footer variant of --up: sits BETWEEN the newsletter and footer body so the
   cream can brush upward without being clipped by the body's overflow. Keep
   it above both adjacent stacking contexts and shallow enough that the
   newsletter's unsubscribe line stays clear. */
.roarr-rip--footer {
  z-index: 3;
  height: var(--space-64);
  margin-bottom: calc(-1 * var(--space-64));
}

/* Mid-page seam — cream brush sweeps DOWN into a dark section BELOW: the
   vertically-flipped twin tile (brush edge at the bottom); feather mirrored
   (tail ABOVE the seam melts into the cream section above). Place the rip
   immediately BEFORE that dark section. */
.roarr-rip--down {
  z-index: 1;
  height: var(--space-112);
  margin-top: -2px;
  margin-bottom: calc(-1 * var(--space-112));
  transform: translateY(calc(-1 * var(--space-32) + var(--space-8)));
  background-color: var(--roarr-break-fill, var(--cream));
  /* A separately-originated paper tile exposed a faint horizontal join on
     narrow screens. The surrounding cream surface supplies the grain; keep
     this overlapping transition layer colour-only so its edge stays clean. */
  background-image: none;
  /* The brush tile already provides the ragged silhouette. A second linear
     mask introduced a straight, semi-transparent edge where the dark band
     began on phones, so use the artwork as the sole mask here. */
  -webkit-mask-image: url("assets/decor/hero-brush-edge-tile-down.webp");
  mask-image: url("assets/decor/hero-brush-edge-tile-down.webp");
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* ────────────────────────────────────────────────────────────
   Dinosaur skyline break — the original 3800×344 dinosaur landscape is used
   as a MASK so the section below supplies every colour and surface. It keeps
   the same fixed responsive height and seamless centred treatment as the leaf
   jungle break, while restoring the intended Events / upsell artwork.
   ──────────────────────────────────────────────────────────── */
.roarr-skyline {
  --roarr-break-fill: var(--cream);
  --roarr-skyline-art-height: 192px;
  position: relative;
  width: 100%;
  pointer-events: none;
  /* Solid cream base pinned to the band's bottom edge: guarantees the seam is
     always covered in cream (no pink peeking under the treeline) and flows
     straight into the cream section below. */
  background: linear-gradient(var(--roarr-break-fill), var(--roarr-break-fill)) left bottom / 100% var(--space-8) no-repeat;
}
/* The dinosaur skyline itself: the mask filled from the section below. */
.roarr-skyline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--roarr-break-background, var(--roarr-break-fill));
  -webkit-mask-image: url("assets/decor/skyline-jungle.png");
          mask-image: url("assets/decor/skyline-jungle.png");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  /* Lock the dinosaur scale independently of viewport width. The natural
     aspect ratio supplies the tile width, and repeat-x fills ultrawide screens
     without stretching the artwork or changing the divider's flow footprint. */
  -webkit-mask-size: auto var(--roarr-skyline-art-height);
          mask-size: auto var(--roarr-skyline-art-height);
}

@media (max-width: 1023px) {
  .roarr-skyline {
    --roarr-skyline-art-height: 144px;
  }
}

@media (max-width: 639px) {
  .roarr-skyline {
    --roarr-skyline-art-height: 134px;
  }
}

.roarr-skyline[style*="--roarr-break-background"] {
  background: none;
}

/* Pinned to the bottom edge of the section ABOVE it: a standalone layer
   pulled fully up so its ground line sits on that section's bottom and the
   trees rise inside it. Flow footprint cancelled so nothing below shifts.
   The small overlay closes the transparent gap at the asset's bottom edge
   while keeping the skyline mostly inside the section above. */
.roarr-skyline--section-end {
  z-index: 1;
  height: var(--skyline-h);
  margin-bottom: calc(-1 * var(--skyline-h));
  transform: translateY(calc(-100% + var(--space-8)));
}

/* ── Canopy section break ───────────────────────────────────────────
   Cropped silhouette (2172×336, no dead space) used as a MASK so the
   colour is CSS-driven (recolour per section via --canopy-colour).
   FIXED height per breakpoint (--canopy-h) — does NOT scale with width,
   so the leaf scale is consistent. mask-size 100% 100% fills the full
   width (slight horizontal give on ultrawide is the trade for a single
   seamless strip; a tileable asset would remove even that).
   margin-bottom = −height → the canopy adds ZERO flow height: it overlays
   the top of the next section, leaves hanging over it, so the only gap
   above is the band's own (symmetric) padding. */
/* Canopy height is shared (root) so the FOLLOWING section can add it back as
   top padding — the full-overlay margin pulls that section up under the leaves,
   so without this the content sits cramped against them. */
/* DESKTOP scale — fluid 112→152 across 1024→1920 (same curve family as the
   fluid --space steps in tokens.css) so the canopy tracks the band scale. */
:root { --canopy-h: clamp(112px, calc(66.29px + 4.464vw), 152px); }
@media (max-width: 1023px) { :root { --canopy-h: 112px; } } /* TABLET */
@media (max-width: 639px)  { :root { --canopy-h: 96px; } }  /* MOBILE — bumped for presence */

.roarr-canopy-break {
  --canopy-colour: var(--wp--preset--color--green-dark); /* match the band above */
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--canopy-h);
  margin-bottom: calc(-1 * var(--canopy-h)); /* full overlay → no added gap */
  background: var(--roarr-break-background, var(--canopy-colour));
  pointer-events: none;
  /* Gold standard: a horizontally-SEAMLESS mirror tile, repeated at a FIXED
     height. Natural leaf aspect (auto width), so no stretch; repeat-x fills
     any width with no join (mirror edges always match); height locked to
     --canopy-h, so it never scales with the viewport. */
  -webkit-mask-image: url("assets/decor/canopy-tile.webp");
          mask-image: url("assets/decor/canopy-tile.webp");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: top center;
          mask-position: top center;
  -webkit-mask-size: auto var(--canopy-h);
          mask-size: auto var(--canopy-h);
}

/* Breathing room: the section under a canopy is pulled up by --canopy-h, so add
   that back to its top padding plus the normal section padding. */
.roarr-canopy-break + section {
  padding-top: calc(var(--canopy-h) + var(--section-padding-desktop));
}
@media (max-width: 1023px) {
  .roarr-canopy-break + section { padding-top: calc(var(--canopy-h) + var(--section-padding-tablet)); }
}
@media (max-width: 639px) {
  .roarr-canopy-break + section { padding-top: calc(var(--canopy-h) + var(--section-padding-mobile)); }
}

/* Per-section recolour — match the band the canopy hangs from. */
.roarr-canopy-break--green { --canopy-colour: var(--wp--preset--color--green-dark); }
.roarr-canopy-break--pink  { --canopy-colour: var(--wp--preset--color--pink); }

/* ── Leaf jungle break ──────────────────────────────────────────────
   The same shared landscape mask is recoloured from the section below. It
   lives mostly over the section above's bottom padding, while its solid base
   overlaps the next section to close the seam without changing document flow. */
.roarr-leaf-break {
  --roarr-break-fill: var(--wp--preset--color--green-dark);
  position: relative;
  width: 100%;
  pointer-events: none;
  background: var(--roarr-break-background, var(--roarr-break-fill));
  -webkit-mask-image: url("assets/decor/section-break-jungle.webp");
          mask-image: url("assets/decor/section-break-jungle.webp");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  -webkit-mask-size: cover;
          mask-size: cover;
}
.roarr-leaf-break--attractions-end {
  z-index: 1;
  height: var(--leaf-h);
  margin-bottom: calc(-1 * var(--leaf-h));
  /* Same +8px bite as the skyline: the break's solid bottom row overlaps INTO
     the section below, so subpixel rounding can never leak a seam line. */
  transform: translateY(calc(-100% + var(--space-8)));
}

/* Tall foliage breaks (skyline + leaf) carry FIXED heights per breakpoint,
   same discipline as --canopy-h — otherwise a 160–224px treeline swamps a
   390px phone. Single source: these two vars (heights matched at every rung
   so the two treelines read the same size wherever they meet). Transforms
   are height-relative, so they follow automatically. */
:root {
  --skyline-h: calc(var(--space-128) + var(--space-64));
  --leaf-h: calc(var(--space-128) + var(--space-96));
}
@media (max-width: 1023px) { /* TABLET */
  :root {
    --skyline-h: var(--space-128);
    --leaf-h: var(--space-144);
  }
}
@media (max-width: 639px) { /* MOBILE */
  :root {
    --skyline-h: var(--space-120);
    --leaf-h: var(--space-120);
  }
  .roarr-leaf-break {
    background: var(--roarr-break-fill);
  }

  /* The flat-fill fallback is correct for ordinary mobile leaf breaks, but a
     themed section supplies the exact repeatable surface through this inline
     variable. Preserve it so the masked overlap and the first section row are
     the same pixels at phone widths too. */
  .roarr-leaf-break[style*="--roarr-break-background"] {
    background: var(--roarr-break-background);
  }
}

/* Section-break placement + fill are computed by the server-side break pass
   (src/lib/breaks/insertSectionBreaks.tsx), mirroring mocks
   js/interactions.js (SECTION_BREAK_TEMPLATES / initSectionBreaks). */

/* ── MODULE: Canopy break — anchored CORNERS variant ─────────────────
   Drop-in section break: heavier foliage pinned to BOTH screen edges with a
   seamless torn-band canopy filling the middle at any width. Sits between a
   coloured section (above) and the next section (below).
   Assets: img/decor/canopy-cap-left.webp · canopy-cap-right.webp · canopy-fill.webp
   How it works: three MASK layers (CSS masks stack like backgrounds) — a cap
   glued to each edge (no-repeat, never stretched) + the seamless mirror tile
   repeating between them. Caps are taller than the central band (≈1.6×) so the
   corners cascade lower; the ELEMENT is cap-height with a matching overlay
   margin, while the FOLLOWING section still only clears the central band
   (--canopy-h, via the base `.roarr-canopy-break + section` rule). Recolours
   via --canopy-colour exactly like the base canopy.
   Knobs: --canopy-cap-h (corner depth), --canopy-h (band height, responsive). */
:root { --canopy-cap-h: calc(var(--canopy-h) * 1.6); }

.roarr-canopy-break--corners {
  height: var(--canopy-cap-h);
  margin-bottom: calc(-1 * var(--canopy-cap-h)); /* full overlay → no added gap */
  -webkit-mask-image:
    url("assets/decor/canopy-cap-left.webp"),
    url("assets/decor/canopy-cap-right.webp"),
    url("assets/decor/canopy-fill.webp");
          mask-image:
    url("assets/decor/canopy-cap-left.webp"),
    url("assets/decor/canopy-cap-right.webp"),
    url("assets/decor/canopy-fill.webp");
  -webkit-mask-repeat: no-repeat, no-repeat, repeat-x;
          mask-repeat: no-repeat, no-repeat, repeat-x;
  -webkit-mask-position: left top, right top, top center;
          mask-position: left top, right top, top center;
  -webkit-mask-size:
    auto var(--canopy-cap-h),
    auto var(--canopy-cap-h),
    auto var(--canopy-h);
          mask-size:
    auto var(--canopy-cap-h),
    auto var(--canopy-cap-h),
    auto var(--canopy-h);
}