/*
  editorial.css — Tier 2 component layer.
  Loaded conditionally by inc/_head.php when page_type is city/audience/reviews/event.

  Reference: docs/TIER-2-DESIGN-SYSTEM.md §D.
  Tokens (--teal, --t2-hero-bg, etc.) live in main.css :root, so this file
  is purely component classes — no token redefinition.

  Foundation only — Reviews-specific grid classes (.gr-card, .video-reviews-grid)
  are added in TZ-5.5 §3 when the Reviews page itself is built.
*/

/* Caveat (handwritten) — used for polaroid captions on the editorial hero.
   Self-hosted woff2 in /assets/vendor/fonts/, three subsets cover the names
   we use (Latin + Latin Extended + Cyrillic). */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:optional;
  src:url('/assets/vendor/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:optional;
  src:url('/assets/vendor/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:optional;
  src:url('/assets/vendor/fonts/caveat-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── D.1 Buttons ── */
.btn-cta{
  color:#fff;
  background:var(--teal);
  border:0;
  font-weight:600;
}
.btn-cta:hover{
  transform:scale(1.02);
  background:#4a9ba2;
}

.btn-ghost-light{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.5);
  font-weight:400;
}
.btn-ghost-light:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.8);
}

/* White pill — design default for the editorial hero "Watch videos" CTA.
   Sits on a dark stage so the inverted scheme reads as a secondary action. */
.btn-ghost-pill{
  background:#fff;
  color:#111;
  border:1px solid #E0E0E0;
  font-weight:500;
}
.btn-ghost-pill:hover{
  background:#f5f5f5;
  border-color:#cfcfcf;
}

/* ── D.2 Editorial hero (Polaroid Pile design 2026-05-08) ── */
.editorial-hero{
  position:relative;
  overflow:hidden;
  background:#0E0E0E;
  color:#fff;
  border-bottom:1px solid var(--hairline);
  min-height:520px;
}
@media (max-width:720px){
  /* Stage min-height tuned to fit one full Mobile-Safari viewport on the
     standard iPhone screen sizes (12/13/14 standard ≈ 812 minus ~80 px of
     Safari chrome → ~730 px usable). 660 leaves the CTAs comfortably on
     the first screen with a small breathing-room band before the next
     section. Live badge removed (was eating ~24 px from the top). */
  .editorial-hero{ min-height:660px; }
}

/* Layered background — base photo-tinted layer + warm gradient on top.
   Both absolute, full stage, behind everything else. */
.editorial-hero__bg-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.editorial-hero__bg-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,.07), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 22px),
    linear-gradient(180deg, #241c18 0%, #0e0a08 100%);
}
.editorial-hero__bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:linear-gradient(135deg, #1f1a16 0%, #3a2e26 40%, #5a4538 100%);
}
.editorial-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 70% at 30% 30%, rgba(255,210,170,.18), transparent 60%),
    radial-gradient(80% 60% at 75% 80%, rgba(255,180,200,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
}

/* ── Live badge (top-left, pulsing red dot) ── */
.editorial-hero__live{
  position:absolute;
  left:30px;
  top:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  z-index:6;
}
.editorial-hero__live .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:#FF5252;
  animation:hp-live-pulse 1.4s ease-out infinite;
}
@keyframes hp-live-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,82,82,.5); }
  70%  { box-shadow:0 0 0 8px rgba(255,82,82,0); }
  100% { box-shadow:0 0 0 0 rgba(255,82,82,0); }
}
@media (max-width:720px){
  .editorial-hero__live{
    /* drop below the FAB burger (top:14, ~48px tall) so the badge isn't
       clipped under it on small viewports */
    left:14px;
    top:74px;
    font-size:10px;
    padding:6px 10px;
  }
}

/* ── Decorative 35mm film strips (background, right half) ── */
.editorial-hero__film{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.editorial-hero__film-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));
}
.editorial-hero__film-svg--mobile{ display:none; }
@media (max-width:720px){
  .editorial-hero__film-svg--desktop{ display:none; }
  .editorial-hero__film-svg--mobile{ display:block; opacity:.42; }
}

/* ── Polaroid pile ── */
.editorial-hero__pile{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:380px;
  height:420px;
  z-index:3;
}
.editorial-hero__pile .pol{
  position:absolute;
  left:50%;
  top:50%;
  width:260px;
  height:300px;
  background:#fff;
  padding:14px 14px 52px;
  border-radius:4px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 8px 16px rgba(0,0,0,.3);
  transition:transform .6s cubic-bezier(.65,0,.35,1), opacity .4s;
  will-change:transform;
}
.editorial-hero__pile .pol__photo{
  position:relative;
  width:100%;
  height:100%;
  border-radius:2px;
  overflow:hidden;
  background:#1a1a1a;
}
.editorial-hero__pile .pol__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.editorial-hero__pile .pol__cap{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  text-align:center;
  font-family:'Caveat','Brush Script MT','Lucida Handwriting',cursive;
  font-size:20px;
  color:#1a1a1a;
  letter-spacing:.01em;
}

@media (max-width:720px){
  .editorial-hero__pile{
    right:auto;
    left:50%;
    top:40px;            /* live badge removed → pile rides higher */
    transform:translate(-50%, 0);
    width:240px;
    height:280px;
  }
  .editorial-hero__pile .pol{
    width:180px;
    height:210px;
    padding:10px 10px 36px;
  }
  .editorial-hero__pile .pol__cap{
    font-size:14px;
    bottom:10px;
  }
}

/* Reduced-motion: keep the pile static, no auto-swap. JS reads this too. */
@media (prefers-reduced-motion:reduce){
  .editorial-hero__pile .pol{
    transition:none !important;
  }
  .editorial-hero__live .dot{
    animation:none;
  }
}
.editorial-hero__copy{
  position:relative;
  z-index:5;
  /* Hero stage is full-bleed (rendered before <main class="container">),
     so its copy padding has to absorb the section text indent (container
     padding clamp(20,3vw,64) + section --pad 40). On viewports wider than
     the 1680 px container cap the container becomes centered, so we add
     half of the leftover gutter on top of that. The max() guard keeps
     things sane when 100vw < 1680 (gutter math goes negative). */
  padding-block:30px;
  padding-inline:max(
    calc((100vw - 1680px) / 2 + clamp(20px, 3vw, 64px) + 40px),
    calc(clamp(20px, 3vw, 64px) + 40px)
  );
  max-width:640px;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
/* Mobile: copy stacks BELOW the pile in a bottom overlay. The dark gradient
   lives on a stage-wide pseudo-element (.editorial-hero::after) instead of
   on the copy block, so it can extend above the copy and catch the bottom
   edge of the pile — including the cards animating in from translate(80%).
   That makes "entering" polaroids start dark and brighten as they rise into
   the visible stack, matching the design feedback. */
@media (max-width:720px){
  .editorial-hero__copy{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:0;
    padding:24px 20px 26px;
    max-width:none;
    justify-content:flex-end;
    gap:12px;
    background:transparent;
  }
  .editorial-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60%;          /* bottom 60 % of the 720 px stage = 432 px */
    background:linear-gradient(180deg,
      rgba(14,14,14,0)   0%,
      rgba(14,14,14,.55) 38%,
      rgba(14,14,14,.9)  78%,
      #0E0E0E             100%);
    z-index:4;            /* above pile (3) + film (2), below copy (5) */
    pointer-events:none;
  }
}

.editorial-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.editorial-hero__eyebrow .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--wa);
  box-shadow:0 0 0 4px rgba(63,174,87,.25);
}

.editorial-hero h1{
  color:#fff;
  font-size:48px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  max-width:14ch;
  margin:0;
  text-wrap:balance;
}
@media (max-width:720px){
  .editorial-hero h1{
    font-size:34px;
    line-height:1.04;
    max-width:none;
    text-wrap:balance;
  }
}

.editorial-hero__sub{
  font-size:16px;
  color:rgba(255,255,255,.8);
  max-width:48ch;
  margin:0;
  line-height:1.4;
}
@media (max-width:720px){
  .editorial-hero__sub{ font-size:12px; line-height:1.45; }
}

.editorial-hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

/* Editorial hero CTAs — compact pills on both mobile and desktop. The .btn
   defaults in main.css are full-width 54px-tall (Tier 1 mobile-thumb), but
   on Tier 2 the editorial hero crowds the bottom overlay so we shrink to a
   leaner 16×24 padding / 15 px font. Desktop also goes inline-width so
   "Comprueba disponibilidad" + "▶ Ver vídeos" sit side-by-side. */
.editorial-hero__ctas .btn{
  height:auto;
  padding:16px 24px;
  font-size:15px;
  gap:8px;
}
.editorial-hero__ctas .btn svg{ flex:0 0 auto; }
@media (max-width:720px){
  .editorial-hero__ctas{
    flex-direction:column;
    width:100%;
    gap:10px;
  }
  .editorial-hero__ctas .btn{
    width:100%;
  }
}
@media (min-width:721px){
  .editorial-hero__ctas .btn{
    width:auto;
    padding:13px 26px;
  }
}

/* ── D.3 Editorial final CTA ── */
.editorial-cta-final{
  margin:0 var(--pad) var(--pad);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #0E0E0E 0%, #1d1d1d 60%, #2a2520 100%);
  color:#fff;
  padding:clamp(64px, 7vw, 96px) clamp(40px, 5vw, 80px);
  position:relative;
  overflow:hidden;
}
.editorial-cta-final::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 80% at 80% 100%, rgba(0,122,255,.25), transparent 60%);
  pointer-events:none;
}

.editorial-cta-final__copy{
  position:relative;
  z-index:1;
}

.editorial-cta-final__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:18px;
}
.editorial-cta-final__eyebrow .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:#3FAE57;
  box-shadow:0 0 0 4px rgba(63,174,87,.25);
}

.editorial-cta-final h2{
  font-size:clamp(40px, 8vw, 72px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
  max-width:18ch;
}

.editorial-cta-final__sub{
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.45;
  max-width:42ch;
  margin:18px 0 32px;
}

.editorial-cta-final__ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.editorial-cta-final__ctas .btn{
  gap:8px;
}
.editorial-cta-final__ctas .btn svg{
  flex:0 0 auto;
}
/* Desktop: inline pill CTAs (width:auto) instead of the full-width 54 px
   stacked Tier-1 default. Mobile keeps the stacked rule from below. */
@media (min-width:721px){
  .editorial-cta-final__ctas .btn{
    width:auto;
    height:auto;
    padding:14px 26px;
    font-size:15px;
  }
}

@media (max-width:720px){
  .editorial-cta-final{
    padding:40px 24px;
    /* Flush with container edges (same width as FAQ buttons / review
       cards above). The container itself already has padding-inline:20. */
    margin:0;
  }
  /* Force one-word-per-line on the headline (mobile poster style). The
     word-spacing:100vw trick blows every inter-word gap past the line
     box, so the browser wraps after each word without touching markup.
     Words wrapped in <span class="nobreak"> stay together on one line —
     used for the closing word-pair like "tu evento?" / "your event?". */
  .editorial-cta-final h2{
    word-spacing:100vw;
  }
  .editorial-cta-final h2 .nobreak{
    word-spacing:normal;
    white-space:nowrap;
  }
}

/* ── D.4 Tier 2 section header ── */
.editorial-section{
  padding:64px var(--pad);
}
/* On mobile the cards/grids should match the hero CTA width (copy padding
   = 20). Drop the section side padding so .vr-grid / .gr-grid / etc. span
   the container content area edge-to-edge. */
@media (max-width:720px){
  .editorial-section{
    padding-inline:0;
    padding-block:48px;
  }
}
.editorial-section h2{
  font-size:clamp(26px, 5vw, 34px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 24px;
  text-wrap:balance;
}
.editorial-section__sub{
  color:var(--muted);
  font-size:14px;
  max-width:46ch;
  margin:0 0 32px;
}

/* selling_points block reuse on city pages — flatter, paragraph-style
   list: drop the muted bullet, the heavy 20-px padding, and the dividing
   border. Items stay readable but don't feel like a table row. */
body.is-editorial .gd-item::before{ display:none; }
body.is-editorial .gd-item{
  padding: 6px 0;
  border-bottom: 0;
}
body.is-editorial .gd-item:last-child{ padding-bottom: 0; }
body.is-editorial .gd-list{ margin-top: 16px; }

/* Mobile: shrink the gap between the intro block (which ends with the
   loop video) and the next editorial section. Base padding adds up to
   36 + 48 = 84 px of dead space below the video — too airy on a phone. */
@media (max-width: 720px){
  body.page-type-city #intro.gd-block{
    padding-bottom: 20px;
  }
  body.page-type-city .editorial-section{
    padding-block: 28px;
  }
}

/* City pages: bump every section H2 to the intro `.gd-heading` size
   (56 px) so the page has one consistent rhythm. Scoped to
   .page-type-city to keep /resenas/ on the smaller 34 px scale.
   Selectors cover all 3 H2 surfaces on city pages: bare
   .editorial-section h2 (Fondos, Atrezzo, Opciones), the
   .gr-section-head h2 (Bodas reales, Lo que dicen), and the
   .pricing-block__intro h2 (Elige tu pack). */
body.page-type-city .editorial-section h2,
body.page-type-city .gr-section-head h2,
body.page-type-city .pricing-block__intro h2{
  font-size:clamp(34px, 6.5vw, 56px);
  line-height:1.1;
  letter-spacing:-.015em;
}
/* Center the section headings ("Bodas reales en Valencia", "Lo que dicen
   las parejas") on city pages — matches the centred intro `.gd-heading`
   and the pricing-block intro. Applies on both mobile and desktop. */
body.page-type-city .gr-section-head{
  text-align:center;
}
body.page-type-city .gr-section-head .editorial-section__sub{
  margin-inline:auto;
}

/* Side photos shrink ~15 % (340 → 289 px) on desktop so they don't
   dominate the composition. */
@media (min-width:768px){
  body.is-editorial .gd-col--left .gd-photo,
  body.is-editorial .gd-col--right .gd-photo{
    max-width: 289px;
  }
}

/* City pages: refactored 30 / 40 / 30 layout — H2 spans the full width
   above, then 3 columns start at the same vertical line. Top-align so
   the text paragraphs read from the same baseline as the photo and
   video; gives the block a magazine-style grid feel.
   The 20 px nudge on the side columns lines up the photo + video tops
   with the H3 of the first paragraph (not the H3's outer container)
   so the grid reads with a clear horizontal anchor. */
@media (min-width:768px){
  body.page-type-city .gd-desktop-layout{
    align-items: flex-start;
  }
  body.page-type-city .gd-col--left,
  body.page-type-city .gd-col--right{
    margin-top: 20px;
  }
  body.page-type-city .gd-heading{
    margin-bottom: 40px;
  }
}
/* Silent autoplay loop in the side column: lock 9/16 aspect ratio so
   the layout reserves space before the video metadata loads (avoids
   CLS), match the image radius, and remove default border. */
.gd-video{
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 0;
  background: #000;
}
/* Relative wrapper so the optional caption pill anchors over the video.
   Mirrors the same max-width constraints as the bare .gd-photo /
   .gd-video so the frame hugs the video edges (caption sits in the
   bottom-left of the video, not in empty whitespace). */
.gd-video-frame{
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  /* Clip the caption pill to the same rounded silhouette as the video.
     Without this the pill (positioned at left:10/bottom:10 inside the
     frame) sat over the rounded corner of `.gd-video` and visually
     poked outside the video on mobile, looking like it had drifted. */
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 768px){
  body.is-editorial .gd-col--left .gd-video-frame,
  body.is-editorial .gd-col--right .gd-video-frame{
    max-width: 289px;
  }
}
.gd-video-frame .gd-video{
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--radius);
}
/* Caption pill in the bottom-left of a loop video (e.g. masía name). */
.gd-video-caption{
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
/* Mobile-only twin of the side-column video, rendered inside the center
   column right under the H2 so it sits between heading and item list.
   Both the bare video and its frame wrapper (with caption pill) are
   hidden on desktop — the right-column copy takes over. */
.gd-video--mobile,
.gd-video-frame--mobile{
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 18px auto 24px;
}
@media (min-width: 768px){
  .gd-video--mobile,
  .gd-video-frame--mobile{ display: none; }
}
/* Items flagged `desktop_only` in content.php only render on tablet+
   viewports — keeps the mobile flow short. */
@media (max-width: 767px){
  .gd-item--desktop{ display: none; }
}

/* Extra breathing room between the hero and the first selling_points
   block on city pages. The base gd-block tucks straight against the
   hero without any margin. */
body.is-editorial .gd-block{
  margin-top: 56px;
}
@media (max-width:720px){
  body.is-editorial .gd-block{
    margin-top: 32px;
  }
}

/* Tier 2 wide container — overrides main.css's 430px mobile-first cap on
   desktop so editorial sections (video grid, review cards, photo gallery)
   span the full design width instead of stacking inside a narrow column.
   Mobile ≤720 keeps the original 430px column.
   The :not() chain matches main.css's own selector (specificity 0,4,1 +
   .is-editorial → 0,5,1) so this wins over `.container.stack { max-width: 900px }`
   for service/form pages.
   Width scales with viewport: clamp pad lets the container nearly span the
   page on 13–16" laptops (1280–1680) and stay readable on 4K (caps at 1440). */
@media (min-width:721px){
  body.is-editorial:not(.page-home):not(.cfg-page):not(.order-page) .container,
  body.is-editorial:not(.page-home):not(.cfg-page):not(.order-page) .container.stack{
    max-width:1680px;
    padding-inline:clamp(20px, 3vw, 64px);
  }
}
/* Mobile: drop the container side padding from main.css's 30 → 20 px so
   editorial sections (video grid, review cards) span the same width as
   the hero CTAs that sit at copy padding 20. Without this the cards came
   out 80 px narrower than the buttons. */
@media (max-width:720px){
  body.is-editorial:not(.page-home):not(.cfg-page):not(.order-page) .container,
  body.is-editorial:not(.page-home):not(.cfg-page):not(.order-page) .container.stack{
    padding-inline:20px;
  }
}

/* ── Section header (shared by gr-* and vr-* sections) ── */
.gr-section-head{
  text-align:left;
  margin-bottom:24px;
}
.gr-section-head h2{
  font-size:clamp(26px, 5vw, 34px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 12px;
  text-wrap:balance;
}

/* ── Google Review card (shared base for featured + compact) ── */
.gr-featured{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--gap);
}
@media (max-width:720px){
  .gr-featured{ grid-template-columns:1fr; }
}

.gr-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:1024px){
  .gr-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
  .gr-grid{ grid-template-columns:1fr; }
}
.gr-grid .is-hidden{ display:none; }

.gr-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
}
.gr-card--featured{ padding:28px; }
.gr-card--compact{ padding:18px; }
.gr-card--compact .gr-card__name{ font-size:15px; }
.gr-card--compact .gr-card__body{ font-size:14px; }

.gr-card__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
}
.gr-card__avatar{
  width:48px; height:48px;
  border-radius:999px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:17px;
}
.gr-card__avatar--warm{
  background:linear-gradient(135deg, #e9e3dd, #cfc7be);
  color:#3a322b;
}
.gr-card__avatar--neutral{
  background:var(--soft);
  color:var(--text);
}
.gr-card__id{ flex:1; min-width:0; }
.gr-card__name{
  font-size:17px;
  font-weight:700;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.flag{ font-size:14px; }

.gr-card__meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.gr-card__stars{
  color:var(--text);
  font-size:13px;
  letter-spacing:1px;
}
.sep{
  display:inline-block;
  width:3px; height:3px;
  border-radius:999px;
  background:#bbb;
}

.gr-card__body{
  font-size:15px;
  line-height:1.55;
  color:#222;
  margin:0 0 16px;
  flex:1;
}
/* Compact cards (.gr-grid) clamp the body to a fixed line count so cards
   come out with similar visual heights without forcing min-height (which
   leaves empty space below short bodies). When JS finds the body actually
   overflowed, it un-hides the "Read more" link below; click adds
   .is-expanded which lifts the clamp. */
.gr-card--compact .gr-card__body{
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 0;
}
.gr-card--compact.is-expanded .gr-card__body{
  display:block;
  -webkit-line-clamp:initial;
  overflow:visible;
}
.gr-card__more{
  background:none;
  border:0;
  padding:14px 0 0;
  font-size:14px;
  font-weight:600;
  color:var(--teal);
  text-decoration:none;
  cursor:pointer;
  align-self:flex-start;
}
.gr-card__more:hover{
  text-decoration:underline;
}
.gr-card__more[hidden]{
  display:none;
}

.gr-card__footer{
  border-top:1px solid var(--hairline);
  padding-top:12px;
  font-size:12px;
  color:var(--muted);
}
.gr-card__source{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.g-mark{
  display:inline-block;
  width:14px; height:14px;
  border-radius:999px;
  background:conic-gradient(
    #4285F4 0 25%,
    #34A853 25% 50%,
    #FBBC05 50% 75%,
    #EA4335 75% 100%
  );
}

/* ── Show more row (shared by gr-grid and vr-grid) ── */
.show-more-row{
  text-align:center;
  margin:24px 0 0;
}
.show-more-row .btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 22px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
}
.show-more-row .btn-ghost:hover{
  background:var(--soft);
}
.show-more-status{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:12px 0 0;
}

/* ── Video review card (Variant B — overlay caption) ── */
.vr-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:1024px){
  .vr-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
  .vr-grid{ grid-template-columns:1fr; }
}
.vr-grid .is-hidden{ display:none; }
/* Desktop initial-show is bumped from 3 → 6 by reviews.js on first paint
   so the grid lands as two clean rows of three. The show-more button
   still appears with the actual remaining count. */

.vr-card-b{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#222;
  cursor:pointer;
  isolation:isolate;
}
.vr-card-b__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.vr-card-b__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.28) 45%,
    rgba(0,0,0,.82) 100%);
  z-index:2;
  pointer-events:none;
}
.vr-card-b__play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:56px; height:56px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  cursor:pointer;
  z-index:3;
  transition:transform .15s ease, background .15s ease;
}
.vr-card-b__play:hover{
  transform:translate(-50%, -50%) scale(1.05);
  background:#fff;
}
.vr-card-b.is-playing .vr-card-b__play,
.vr-card-b.is-playing .vr-card-b__shade,
.vr-card-b.is-playing .vr-card-b__cap{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

/* Mute toggle — visible only during playback. Single global mute state
   shared across all cards (toggled via .is-muted on the .vr-grid). */
.vr-card-b__mute{
  position:absolute;
  top:10px; right:10px;
  z-index:4;
  width:34px; height:34px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, background .15s ease;
}
.vr-card-b__mute:hover{ background:rgba(0,0,0,.75); }
.vr-card-b.is-playing .vr-card-b__mute{
  opacity:1;
  pointer-events:auto;
}
.vr-card-b__mute-icon{ display:none; }
/* Default state = sound on (icon: speaker). When .vr-grid.is-muted, swap
   to muted icon (speaker with strike). */
.vr-card-b__mute-icon--on{ display:block; }
.vr-card-b__mute-icon--off{ display:none; }
.vr-grid.is-muted .vr-card-b__mute-icon--on{ display:none; }
.vr-grid.is-muted .vr-card-b__mute-icon--off{ display:block; }

.vr-card-b__cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px 16px 16px;
  z-index:3;
  color:#fff;
  pointer-events:none;
}
.vr-card-b__name{
  font-size:18px;
  font-weight:700;
  margin:0 0 5px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  line-height:1.15;
}
.vr-card-b__flag{ font-size:15px; }
.vr-card-b__venue{
  font-size:13px;
  font-style:italic;
  margin:0 0 18px;
  opacity:.92;
}
.vr-card-b__quote{
  font-size:13px;
  line-height:1.45;
  margin:0 0 20px;
  opacity:.95;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  quotes:'"' '"';
}
.vr-card-b__quote::before{ content:open-quote; }
.vr-card-b__quote::after{ content:close-quote; }
.vr-card-b__stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.vr-card-b__stats .chip{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  letter-spacing:.02em;
}

@media (min-width:721px){
  .vr-card-b__cap{ padding:18px 20px 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   CITY-PAGE LAYER (Tier 2 — fotomaton-<city> pages)
   Added 2026-05 with the Valencia redesign. Reused for BCN/Girona/etc.
   See design_handoff_valencia_city/README.md for the design contract.
   ════════════════════════════════════════════════════════════════════ */

/* ── D.5 Editorial hero — city variant (3-photo collage) ──
   Different from the reviews-page polaroid pile (D.2). The city hero shows
   a 1× feature print + 2× peeking photo strips, rotated, on top of the
   shared dark warm-brown stage. Markup root: <section class="editorial-hero
   editorial-hero--city"> with .editorial-hero__photos / .ph-feature /
   .ph-strip-1 / .ph-strip-2 inside. */
.editorial-hero--city .editorial-hero__photos{
  position:absolute;
  /* Same anchor as the reviews polaroid pile — consistent widescreen drift. */
  right:6%;
  top:50%;
  transform:translateY(-50%);
  width:520px;
  height:440px;
  z-index:3;
  pointer-events:none;
}

/* ≥1280 — wider, one-sided shifted copy column so the H1 doesn't get
   squashed on ultra-wide displays by the base symmetric padding-inline
   (which would otherwise eat the content area down to 0 px at 2400 vw).
   The padding-left formula is identical to the base .editorial-hero__copy
   one — keeps the city page indented the same way as /resenas/. */
@media (min-width: 1280px){
  .editorial-hero--city .editorial-hero__copy{
    --hp-pad-l: max(
      calc((100vw - 1680px) / 2 + clamp(20px, 3vw, 64px) + 40px),
      calc(clamp(20px, 3vw, 64px) + 40px)
    );
    padding-inline: 0;
    padding-left: var(--hp-pad-l);
    padding-right: 40px;
    max-width: calc(var(--hp-pad-l) + 640px + 40px);
  }
  .editorial-hero--city .editorial-hero__copy h1{
    max-width: 22ch;
    width: 100%;
  }
  .editorial-hero--city .editorial-hero__sub{
    max-width: 56ch;
    width: 100%;
  }
}
.editorial-hero--city .ph-feature,
.editorial-hero--city .ph-strip{
  position:absolute;
  background:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.3);
  overflow:hidden;
  border-radius:0; /* Square corners — no polaroid rounding (per design feedback). */
}
/* Image-native aspect ratios so object-fit:cover doesn't actually crop:
   hero-print-couple.jpg is 1200×1800 (2:3 → 10×15 cm print), the two
   strips are 600×1800 (1:3 → 5×15 cm strip). Anchoring on a shared
   height makes all three photos the same vertical size and lets each
   width be derived from its native aspect — same proportional scale
   as real prints. */
.editorial-hero--city .ph-feature{
  height:420px;
  width:auto;
  aspect-ratio: 2 / 3;
  right:-20px; top:0; /* nudged 20 px right so it sits clearly beside strip-2 */
  transform:rotate(7deg);
  z-index:3;
}
.editorial-hero--city .ph-strip{
  height:420px;
  width:auto;
  aspect-ratio: 1 / 3;
  z-index:2;
}
.editorial-hero--city .ph-strip-1{
  left:0; top:30px;
  transform:rotate(-10deg);
}
.editorial-hero--city .ph-strip-2{
  left:145px; top:-10px; /* sits between strip-1 and feature, slight lift */
  transform:rotate(-4deg);
  z-index:4; /* in front of the feature print */
}
.editorial-hero--city .ph-feature img,
.editorial-hero--city .ph-strip img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* Tablet + narrow desktop (721-1279) — keeps photos on the right (no
   layout flip) but shrinks the cluster so it doesn't reach the copy.
   Shared heights stay (proportional to real 10×15 / 5×15 prints). */
@media (min-width:721px) and (max-width:1279px){
  .editorial-hero--city .editorial-hero__photos{
    width:360px;
    height:320px;
    right:4%;
  }
  .editorial-hero--city .ph-feature{
    height:300px;
    width:auto;
    aspect-ratio: 2/3;
  }
  .editorial-hero--city .ph-strip{
    height:300px;
    width:auto;
    aspect-ratio: 1/3;
  }
  /* Re-flow strip-2 for the narrower 360-wide cluster — strip-1 at
     left:0, feature top-right at right:0, strip-2 between them. */
  .editorial-hero--city .ph-strip-2{
    left:95px; top:-10px;
  }
}
@media (max-width:720px){
  .editorial-hero--city .editorial-hero__photos{
    right:auto;
    left:50%;
    top:40px;
    transform:translate(-50%,0);
    width:300px;
    height:280px;
  }
  /* Same shared-height approach as desktop: strips + feature stay
     proportionally sized (5×15 vs 10×15) with the same total height. */
  .editorial-hero--city .ph-feature{
    height:240px;
    width:auto;
    aspect-ratio: 2 / 3;
    left:50%; top:10px;
    right:auto;
    margin-left:-80px;
    transform:rotate(5deg);
  }
  .editorial-hero--city .ph-strip{
    height:240px;
    width:auto;
    aspect-ratio: 1 / 3;
  }
  .editorial-hero--city .ph-strip-1{
    left:6px; top:36px;
    transform:rotate(-10deg);
  }
  .editorial-hero--city .ph-strip-2{
    right:6px; top:45px;
    left:auto;
    transform:rotate(15deg);
  }
}

/* ── D.6 Service intro (calm SEO copy + photo break) ──
   Distinct from .svc-intro (which is the showcase-style block in hero-svc.css).
   This is the long-form copy block right after pricing. Two paragraphs of
   SEO content, then a 2-photo break (1 wide hero shot + 2 stacked detail
   shots), then two more paragraphs. */
.service-intro{
  background:#fff;
  padding:clamp(40px,5vw,64px) var(--pad);
  border-top:1px solid var(--hairline);
}
.service-intro__inner{
  max-width:760px;
  margin:0 auto;
}
.service-intro__inner h2{
  font-size:clamp(26px,3.8vw,34px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 20px;
  text-wrap:balance;
}
.service-intro__inner p{
  font-size:16px;
  line-height:1.7;
  color:#333;
  margin:0 0 18px;
}
.service-intro__photos{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:14px;
  margin:32px 0;
}
@media (max-width:600px){
  .service-intro__photos{
    grid-template-columns:1fr;
  }
}
.service-intro__photo{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#f5f5f7;
}
.service-intro__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:3/4;
}
.service-intro__photo--wide img{ aspect-ratio:3/4; }
.service-intro__photo--detail{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.service-intro__photo--detail .service-intro__photo img{
  aspect-ratio:4/3;
}
.service-intro__caption{
  position:absolute;
  bottom:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-size:11.5px;
  font-weight:600;
  padding:5px 10px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}

/* ── D.7 Pricing block (Editorial Tickets pattern) ──
   Three packages (2h / 3h / 4h). Big serif-like hour number, dashed
   perforation, big price, dash-bulleted list of inclusions. Featured (3h)
   inverts to dark for a VIP-ticket feel. Mobile = scroll-snap carousel
   with dot indicator. */
.pricing-block{
  background:#faf8f3;
  padding:clamp(48px,6vw,72px) var(--pad);
  border-top:1px solid var(--hairline);
  position:relative;
  /* Full-bleed — break out of the container so the cream background
     spans the entire viewport (same trick used by editorial-cta-final
     and other full-width sections). 50% = container half-width;
     50vw = viewport half-width — their difference is the gutter on
     each side, which becomes a negative margin. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Subtle dot-grid overlay on the warm cream background */
.pricing-block::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:24px 24px;
}
.pricing-block__intro{
  max-width:640px;
  margin:0 auto 36px;
  text-align:center;
  position:relative;
}
.pricing-block__intro h2{
  font-size:clamp(28px,4.5vw,40px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 12px;
  text-wrap:balance;
}
.pricing-block__intro p{
  font-size:16px;
  color:var(--muted);
  line-height:1.5;
  margin:0;
}

.pricing-grid{
  display:none;
  position:relative;
}
.pricing-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:24px;
  padding:0 24px 8px;
  margin:0 calc(-1 * var(--pad)) 0;
  scrollbar-width:none;
  position:relative;
}
.pricing-scroll::-webkit-scrollbar{ display:none; }
.pricing-scroll > .pricing-card{
  flex:0 0 86%;
  scroll-snap-align:start;
}
.pricing-scroll-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:16px;
  position:relative;
}
.pricing-scroll-dots span{
  width:7px; height:7px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  transition:background .2s ease, transform .2s ease;
}
.pricing-scroll-dots span.is-on{
  background:var(--teal);
  transform:scale(1.2);
}

@media (min-width:768px){
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    max-width:1180px;
    margin:0 auto;
  }
  .pricing-scroll,
  .pricing-scroll-dots{ display:none; }
}

.pricing-card{
  position:relative;
  background:#fff;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,.022) 16px 17px),
    repeating-linear-gradient(45deg,  transparent 0 16px, rgba(0,0,0,.018) 16px 17px);
  border-radius:var(--radius);
  padding:32px 28px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:20px;
  isolation:isolate;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* Teal radial accent (top-right corner) */
.pricing-card::before{
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(81,171,178,.08), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.pricing-card > *{ position:relative; z-index:1; }
.pricing-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.pricing-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.pricing-card__num{
  font-size:clamp(76px,9vw,88px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.85;
  color:var(--text);
}
.pricing-card__num small{
  display:block;
  font-size:18px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:8px;
}
.pricing-card--featured .pricing-card__num{ color:#fff; }
.pricing-card--featured .pricing-card__num small{ color:rgba(255,255,255,.55); }
.pricing-card__badge{
  background:var(--teal);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
  align-self:flex-start;
}

/* Dashed horizontal perforation line with cut-out circle ends */
.pricing-card__perforation{
  position:relative;
  height:1px;
  margin:4px -28px;
  border-top:2px dashed rgba(0,0,0,.10);
}
.pricing-card--featured .pricing-card__perforation{ border-top-color:rgba(255,255,255,.18); }
.pricing-card__perforation::before,
.pricing-card__perforation::after{
  content:"";
  position:absolute;
  top:50%;
  width:16px; height:16px;
  border-radius:50%;
  background:#faf8f3;
  transform:translateY(-50%);
}
.pricing-card--featured .pricing-card__perforation::before,
.pricing-card--featured .pricing-card__perforation::after{ background:var(--text); }
.pricing-card__perforation::before{ left:-8px; }
.pricing-card__perforation::after{ right:-8px; }

.pricing-card__price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.pricing-card__price-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pricing-card--featured .pricing-card__price-label{ color:rgba(255,255,255,.6); }
.pricing-card__price{
  font-size:48px;
  font-weight:700;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:var(--text);
  line-height:1;
}
.pricing-card__price sup{
  font-size:18px;
  font-weight:600;
  vertical-align:top;
  margin-left:2px;
  color:var(--muted);
}
.pricing-card--featured .pricing-card__price{ color:#fff; }
.pricing-card--featured .pricing-card__price sup{ color:rgba(255,255,255,.5); }

.pricing-card__includes{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.pricing-card__includes li{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:12px;
  padding-left:16px;
  font-size:14px;
  line-height:1.4;
  color:inherit;
}
.pricing-card__includes li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:6px;
  height:1.5px;
  background:currentColor;
  opacity:.35;
}
.pricing-card__includes li.is-highlight{ font-weight:600; }
.pricing-card__includes li.is-highlight::before{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal);
  opacity:1;
  top:6px; left:-1px;
}
.pricing-card__includes li.has-info{ cursor:pointer; user-select:none; }
.pricing-card__includes li.has-info .pricing-info{
  border-bottom:1px dashed currentColor;
  padding-bottom:1px;
  transition:border-color .15s ease;
}
.pricing-card__includes li.has-info:hover .pricing-info{ border-bottom-color:var(--teal); }
.pricing-card--featured .pricing-card__includes li.has-info:hover .pricing-info{ border-bottom-color:rgba(255,255,255,.7); }

.pricing-card__addon-note{
  font-size:11.5px;
  color:var(--muted);
  font-style:italic;
  line-height:1.4;
  margin:-4px 0 14px;
}
.pricing-card__cta{
  width:100%;
  margin-top:auto;
}

/* Featured card (dark inverted ticket) */
.pricing-card--featured{
  background:var(--text);
  color:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
@media (min-width:768px){
  .pricing-card--featured{ transform:scale(1.03); }
  .pricing-card--featured:hover{ transform:scale(1.03) translateY(-4px); }
}
.pricing-card--featured::after{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.038) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(45deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 16px);
}
.pricing-card--featured::before{
  background:radial-gradient(circle, rgba(81,171,178,.22), transparent 65%);
}
.pricing-card--featured .pricing-card__num,
.pricing-card--featured .pricing-card__price{ color:#fff; }
.pricing-card--featured .pricing-card__num small,
.pricing-card--featured .pricing-card__price-label,
.pricing-card--featured .pricing-card__addon-note{ color:rgba(255,255,255,.65); }
.pricing-card--featured .pricing-card__includes li{ color:rgba(255,255,255,.92); }
.pricing-card--featured .pricing-card__includes li::before{ background:rgba(255,255,255,.6); }
/* The .is-highlight bullet (teal disc, set on l.1577) needs an explicit
   override here because the featured-card rule above re-paints every
   `li::before` with translucent white at the same specificity — but
   since it sits later in source order it would otherwise win, dropping
   the highlight dot to the same grey as the default dashes. */
.pricing-card--featured .pricing-card__includes li.is-highlight::before{
  background: var(--teal);
}
.pricing-card--featured .pricing-card__perforation{ border-top-color:rgba(255,255,255,.22); }
.pricing-card--featured .pricing-card__perforation::before,
.pricing-card--featured .pricing-card__perforation::after{ background:var(--text); }
.pricing-card--featured .pricing-info-icon{ background:#fff; color:var(--text); }
.pricing-card--featured .pricing-card__includes li.has-info:hover .pricing-info-icon{
  background:var(--teal);
  color:#fff;
}

.pricing-disclaimer{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:24px auto 0;
  max-width:600px;
  position:relative;
}
.pricing-disclaimer a{ color:var(--teal); }

/* ── D.8 Blog feed ── */
.blog-feed{
  background:#fff;
  padding:clamp(48px,6vw,64px) var(--pad) 56px;
  border-top:1px solid var(--hairline);
}
.blog-feed__head{
  text-align:center;
  max-width:680px;
  margin:0 auto 32px;
}
.blog-feed__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:10px;
}
.blog-feed__eyebrow::before,
.blog-feed__eyebrow::after{
  content:"";
  width:24px; height:1.5px;
  background:var(--teal);
}
.blog-feed__title{
  font-size:clamp(28px,4.5vw,40px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 12px;
  text-wrap:balance;
}
.blog-feed__sub{
  font-size:15px;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

.blog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:1180px;
  margin:0 auto;
}
@media (min-width:768px){
  .blog-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
}

.blog-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.blog-card__img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f5f5f7;
}
.blog-card__img img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.blog-card:hover .blog-card__img img{ transform:scale(1.04); }
.blog-card__chip{
  position:absolute;
  top:12px; left:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.95);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}
.blog-card__chip-dot{
  width:5px; height:5px;
  border-radius:999px;
  background:var(--teal);
}
.blog-card__body{
  padding:18px 22px 22px;
}
.blog-card__title{
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.005em;
  margin:0 0 8px;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card__excerpt{
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card__meta{
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.blog-card__meta strong{
  font-weight:700;
  color:var(--text);
}
.blog-card__meta-sep{
  width:3px; height:3px;
  border-radius:999px;
  background:#bbb;
}

.blog-feed__more{
  text-align:center;
  margin-top:28px;
}
.blog-feed__more a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:999px;
  padding:11px 22px;
  font-size:14.5px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.blog-feed__more a:hover{
  background:var(--soft);
  border-color:var(--text);
}