/*
Theme Name: clonetest-iph2
Description: Capture-derived pixel-perfect clone (factory clone mode, decomposed zero-HTML section model).
Version: 1.0.0
*/
/* Design tokens (hybrid layer, DESIGN.md §3.1) — derive/tokens.js overwrites these
   from the source's computed styles so NEW native pages inherit the cloned look. */
:root {
  --font-display: "Bebas Neue", sans-serif;
  --font-body: Archivo, sans-serif;
  --fs-h1: 5.25rem;
  --fs-h2: 5.1rem;
  --fs-h3: 2.5rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fw-display: 400;
  --fw-body: 300;
  --lh-tight: 1;
  --lh-body: 1.2;
  --ls-display: -2.52px;
  --color-bg: #efefef;
  --color-surface: #222a35;
  --color-fg: #222a35;
  --color-muted: #923824;
  --color-accent: #b02122;
  --color-link: #b02122;
  --color-border: #b02122;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.5rem;
  --space-6: 2.25rem;
  --space-8: 3rem;
  --btn-bg: #b02122;
  --btn-fg: #ffffff;
  --btn-bg-hover: #9b1d1e;
  --btn-radius: 8px;
  --btn-padding: 1.375rem 6.25rem 1.375rem 1.875rem;
  --link-underline: none;
  --container-max: 1280px;
  --measure: 760px;
}
/* Clone chrome CSS ships under assets/ in original load order; this file carries
   only the theme declaration + tokens + inert seam rules. */

/* Container + prose scaffolding for NATIVE (hybrid) pages — the cloned pages get
   their layout from the captured chrome CSS under assets/. These token-driven
   rules give new/native pages the cloned container box + centered long-form
   measure, and satisfy the factory layout gate (container ~1280px, prose ~760px
   CENTERED via margin-inline:auto). Scoped to a class so they never affect the
   byte-exact captured sections. */
.clone-container {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  width: 100%;
}
.prose--longform {
  max-width: var(--measure, 760px);
  margin-inline: auto;
}
@media (max-width: 900px) {
  .clone-container { width: 100%; }
}

/* THEMIFY CLONE FIDELITY CLAMPS (ported from the proven inphocal-c reference,
   Phase-3 fixes — selectors are Themify-specific and inert on other engines).

   1) Fullwidth rows: the builder JS recalculates .module_row.fullwidth widths on
      load/resize. When the loader skips that module on the clone (the captured
      markup already carries the processed state), the row keeps the capture-time
      desktop width (~1440px) and overflows narrow viewports, pushing content
      off-canvas. This clamp replicates what the JS does; NO-OP wherever the row
      already fits (verified on the reference across all pages at 1440/768/390). */
.module_row.fullwidth,
.module_row.fullwidth > .row_inner,
.module_subrow {
  max-width: 100% !important;
}

/* 2) Swiper slides: Themify's Swiper recomputes .tf_swiper-slide widths to the
      container on load/resize. Without it, slides captured at desktop width stay
      ~1160px at tablet/mobile and render outside the visible card. Clamp to the
      container — no-op at desktop where slide width already equals the card. */
.tf_swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
}