/* ============================================================
 * INFOHAS EDITORIAL DESIGN SYSTEM
 * (Wave EDITORIAL BUILDER 1.0 · tokens consolidated in Wave 6.0)
 *
 * Everything is namespaced `.ed-*` and loaded only on builder pages, so it
 * cannot leak into the rest of the site. The classic surfaces and their
 * frozen tokens (`--ih-*` in tokens.css) are never touched.
 *
 * The token block below is the single source of truth for the editorial
 * surface: type scale, rhythm, palette, radius, shadow and motion. Component
 * rules read tokens — no rule carries an arbitrary size. Per-block colours
 * still arrive as inline custom properties written from the Admin
 * (--ed-bg, --ed-ov, --ed-h, --ed-btn-c). Documented in
 * docs/editorial_builder/DESIGN_SYSTEM.md.
 * ============================================================ */

.ed{
  /* -- layout ------------------------------------------------------------ */
  --ed-maxw:1180px;              /* contained width (operator-overridable)  */
  --ed-maxw-wide:1440px;         /* wide blocks                             */
  --ed-gap:96px;                 /* section rhythm (operator-overridable)   */
  /* Wave 11.2 — the real editorial rhythm. --ed-gap arrives INLINE from the CMS
     (page.spacing, 96px), so it beat every stylesheet token: that is why the
     Wave 11.1 token reduction changed the hero/full/CTA but left the contained
     blocks at 96+96 = 192px of void between every section. This is the ceiling
     we cap, not replace — a lower operator value still wins via min(). Tuned by
     eye against the Apple cadence: connected chapters, still breathing.        */
  /* Wave HOME PREMIUM 2.2 — tighter contained rhythm. The 76px cap read as
     "grandes vazios" between contained sections (Why INFOHAS, device grid,
     campaign grid). Full-bleed drama blocks keep their own generous tokens
     (--ed-pad-hero/full/cta); only the contained bands tighten to a short,
     precise white band. Calibrated on live screenshots. */
  --ed-rhythm:clamp(24px,2.8vw,40px);
  --ed-page-bg:#fff;

  /* -- type scale -------------------------------------------------------- */
  /* Named, not arbitrary. Each value is a fluid clamp: min · preferred · max */
  --ed-type-display:clamp(34px,5.4vw,64px);   /* hero title                 */
  --ed-type-h1:clamp(30px,4.4vw,52px);        /* default block title        */
  --ed-type-banner:clamp(26px,3.4vw,44px);    /* full-width banner title    */
  --ed-type-highlight:clamp(28px,3.6vw,46px); /* imageless editorial statement */
  --ed-type-cta:clamp(26px,3.2vw,40px);       /* call-to-action title       */
  --ed-type-compare:clamp(20px,2.2vw,26px);   /* comparison point title     */
  --ed-type-subtitle:clamp(16px,1.5vw,20px);
  --ed-type-feature:19px;        /* feature-list point title                */
  --ed-type-step:17px;           /* step title                              */
  --ed-type-label:14px;          /* device-grid label                       */
  --ed-type-label-sm:12.5px;     /* device-grid label, mobile               */
  --ed-type-body:15px;
  --ed-type-body-sm:14.5px;      /* step text                               */
  --ed-type-caption:13px;
  --ed-type-eyebrow:12px;
  --ed-type-btn:15px;
  --ed-type-num:13px;            /* step number                             */

  /* -- weight & tracking ------------------------------------------------- */
  --ed-weight-title:600;
  --ed-weight-body:500;
  --ed-track-tight:-.025em;
  --ed-track-eyebrow:.14em;
  --ed-lead-tight:1.06;
  --ed-lead-snug:1.12;
  --ed-lead-title:1.5;

  /* -- vertical rhythm (block padding) ----------------------------------- */
  /* Wave 11.1 · ITEM 3 — the editorial rhythm was too airy: up to 180px of
     padding per hero side and 132px per full band read as "empty" rather than
     elegant. Tightened ~20% across the scale — still generous, closer to the
     Apple cadence, and the identity is unchanged (only the vertical rhythm). */
  --ed-pad-hero:clamp(80px,11vw,140px);
  --ed-pad-full:clamp(60px,8vw,108px);
  --ed-pad-cta:clamp(48px,6vw,80px);
  /* A statement block is a quiet beat — it keeps a little more air than the
     rhythm, but no longer twice as much. */
  --ed-pad-statement:clamp(56px,6vw,86px);
  --ed-pad-mobile:clamp(40px,8vw,60px);
  --ed-pad-mobile-hero:clamp(64px,15vw,104px);

  /* -- gaps -------------------------------------------------------------- */
  --ed-gap-half:clamp(32px,4vw,64px);
  --ed-gap-editorial:clamp(24px,3vw,40px);
  --ed-gap-gallery:clamp(12px,1.5vw,20px);
  --ed-gap-grid:clamp(16px,2.5vw,40px);
  --ed-gap-features:clamp(24px,3vw,44px);
  --ed-gap-steps:clamp(24px,3vw,40px);
  --ed-gap-compare:clamp(32px,5vw,88px);
  --ed-head-gap:clamp(28px,3.5vw,48px);    /* list/grid heading → body      */
  /* Wave 11.2 — the heading sat detached from its grid (the tile art already
     carries air above it, so 56px read as ~100px). Pulled in so the heading
     belongs to the content it introduces. */
  --ed-head-gap-lg:clamp(28px,3vw,44px);   /* device-grid heading → body    */
  --ed-tile-h:clamp(96px,9vw,140px);       /* device-grid icon frame height */

  /* -- palette (aliases of the shared DS, named for this surface) -------- */
  --ed-ink:var(--ih-ink);
  --ed-ink-soft:var(--ih-ink-soft);
  --ed-line:var(--ih-line);
  --ed-accent:var(--ih-accent);
  --ed-black:#1d1d1f;
  --ed-on-dark:#fff;
  --ed-on-dark-soft:rgba(255,255,255,.78);
  --ed-on-dark-mute:rgba(255,255,255,.72);
  --ed-on-dark-faint:rgba(255,255,255,.55);
  --ed-on-dark-line:rgba(255,255,255,.45);

  /* -- radius ------------------------------------------------------------ */
  --ed-radius:var(--ih-radius);
  --ed-radius-tile:14px;
  --ed-radius-pill:999px;

  /* -- shadow ------------------------------------------------------------ */
  --ed-shadow-media:0 20px 50px rgba(16,24,40,.10);
  --ed-shadow-media-soft:0 20px 50px rgba(16,24,40,.08);

  /* -- motion ------------------------------------------------------------ */
  --ed-ease:var(--ih-ease);
  --ed-dur:.2s;
  --ed-dur-lift:.3s;

  background:var(--ed-page-bg);
  display:flex; flex-direction:column;
}

/* ---------------------------------------------------------- block shell */
.ed-block{
  --ed-bg:#fff;
  position:relative; isolation:isolate;
  background:var(--ed-bg);
  color:var(--ed-ink);
  padding:min(var(--ed-gap), var(--ed-rhythm)) var(--ih-space);
  overflow:hidden;
}
/* Wave 11.1 · ITEM 4.3/4.4 — editorial chapters. Dark bands already announce a
   new chapter by their colour change; consecutive LIGHT blocks ran into each
   other as one continuous scroll (hero -> device grid is white-on-white). A
   discreet hairline marks that seam. Never adjacent to a dark band, where the
   colour is the separator — so the page reads as chapters, not one long page. */
/* Wave LAYOUT ENGINE 1.0 — scope the chapter hairline to TOP-LEVEL blocks
   only (direct children of .ed). Two blocks that share a pair row live inside
   .ed-row--pair, so this no longer paints a stray top border on the right
   column. Consecutive full-width (single) blocks keep their seam exactly as
   before. */
.ed > .ed-block:not(.is-dark) + .ed-block:not(.is-dark){
  border-top:1px solid color-mix(in srgb, var(--ed-ink) 7%, transparent);
}
.ed-block.is-dark{ color:var(--ed-on-dark); }
.ed-block.is-dark .ed-eyebrow,
.ed-block.is-dark .ed-subtitle,
.ed-block.is-dark .ed-text{ color:var(--ed-on-dark-soft); }

.ed-inner{
  max-width:var(--ed-maxw); margin:0 auto;
  position:relative; z-index:2; width:100%;
}
.ed-w-wide .ed-inner{ max-width:var(--ed-maxw-wide); }
.ed-w-full .ed-inner{ max-width:none; }

/* ------------------------------------------------------------ typography */
.ed-eyebrow{
  margin:0 0 14px; font-size:var(--ed-type-eyebrow); font-weight:var(--ed-weight-title);
  letter-spacing:var(--ed-track-eyebrow);
  text-transform:uppercase; color:var(--ed-ink-soft);
}
.ed-title{
  margin:0; font-size:var(--ed-type-h1); line-height:var(--ed-lead-tight);
  letter-spacing:var(--ed-track-tight); font-weight:var(--ed-weight-title); text-wrap:balance;
}
.ed-subtitle{
  margin:16px 0 0; font-size:var(--ed-type-subtitle); line-height:var(--ed-lead-title);
  color:var(--ed-ink-soft); max-width:56ch;
}
.ed-text{ margin:16px 0 0; font-size:var(--ed-type-body); line-height:var(--ih-leading-body); max-width:62ch; }
.ed-text p{ margin:0 0 10px; }

/* ------------------------------------------------------------- alignment */
.ed-a-left   .ed-inner{ text-align:left; }
.ed-a-center .ed-inner{ text-align:center; }
.ed-a-center .ed-actions{ justify-content:center; }
.ed-a-center .ed-subtitle,
.ed-a-center .ed-text{ margin-left:auto; margin-right:auto; }
.ed-a-right  .ed-inner{ text-align:right; }
.ed-a-right  .ed-actions{ justify-content:flex-end; }
.ed-a-right  .ed-subtitle,
.ed-a-right  .ed-text{ margin-left:auto; }

/* ----------------------------------------------------------------- media */
.ed-pic{ display:block; }
.ed-pic img{ display:block; width:100%; height:auto; }

.ed-block--hero > .ed-pic,
.ed-block--full > .ed-pic,
.ed-block--video_hero > .ed-pic,
.ed-video{ position:absolute; inset:0; z-index:0; }
.ed-block--hero > .ed-pic img,
.ed-block--full > .ed-pic img,
.ed-block--video_hero > .ed-pic img,
.ed-video{ width:100%; height:100%; object-fit:cover; }

.ed-overlay{
  --ed-ov:40%;
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgb(0 0 0 / var(--ed-ov));
}

/* --------------------------------------------------------------- buttons */
/* Six styles. The Design System has only a blue primary, so the editorial
   variants live here — scoped, never touching components.css. */
.ed-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.ed-btn{
  --ed-btn-c:var(--ed-accent);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px; border-radius:var(--ed-radius-pill);
  font-size:var(--ed-type-btn); font-weight:var(--ed-weight-body); line-height:1; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--ed-dur) var(--ed-ease), background-color var(--ed-dur), border-color var(--ed-dur), opacity var(--ed-dur);
}
.ed-btn:hover{ transform:translateY(-1px); }
.ed-btn:focus-visible{ outline:2px solid var(--ed-accent); outline-offset:3px; }

.ed-btn--blue{ background:var(--ed-accent); color:var(--ed-on-dark); }
.ed-btn--blue:hover{ background:color-mix(in srgb, var(--ed-accent) 88%, #000); }

.ed-btn--black{ background:var(--ed-black); color:var(--ed-on-dark); }
.ed-btn--black:hover{ background:#000; }

.ed-btn--white{ background:#fff; color:var(--ed-black); }
.ed-btn--white:hover{ background:#f0f0f2; }

.ed-btn--outline{
  background:transparent; color:var(--ed-ink);
  border-color:color-mix(in srgb, var(--ed-ink) 32%, transparent);
}
.ed-btn--outline:hover{ border-color:var(--ed-ink); }

.ed-btn--ghost{
  background:transparent; color:var(--ed-ink);
  border-color:color-mix(in srgb, var(--ed-ink) 20%, transparent);
}
.ed-btn--ghost:hover{ background:color-mix(in srgb, var(--ed-ink) 6%, transparent); }

.ed-btn--custom{ background:var(--ed-btn-c); color:var(--ed-on-dark); }
.ed-btn--custom:hover{ opacity:.9; }

/* Over dark blocks and imagery the neutral variants must invert. */
.ed-block.is-dark .ed-btn--outline,
.ed-block.is-dark .ed-btn--ghost{ color:var(--ed-on-dark); border-color:var(--ed-on-dark-line); }
.ed-block.is-dark .ed-btn--outline:hover,
.ed-block.is-dark .ed-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--ed-on-dark); }

/* ------------------------------------------------------------------ hero */
.ed-block--hero,
.ed-block--video_hero{
  --ed-h:auto; min-height:var(--ed-h);
  display:flex; align-items:center;
  padding-block:var(--ed-pad-hero);
}
.ed-hero__inner .ed-title{ font-size:var(--ed-type-display); }
/* Wave 11.1 · ITEM 4.2 — the hero headline ran as ONE 1840px line on desktop
   (max-width was none), losing the intended two-line reading
   "Apple sells. / INFOHAS repairs." and giving the hero a poor measure.
   Constraining the measure is a typographic rule (not a content hack): the
   headline now breaks into balanced lines at every width. */
.ed-hero__inner .ed-title{ max-width:16ch; text-wrap:balance; }
.ed-a-center .ed-hero__inner .ed-title{ margin-inline:auto; }
.ed-a-right  .ed-hero__inner .ed-title{ margin-inline-start:auto; }

/* ------------------------------------------- hero carousel (Wave 12) ------
   Editorial, not a slider. The imagery cross-dissolves; nothing slides, bounces
   or counts down. Apple/Stripe/Linear, never an ecommerce carousel.

   Zero CLS by construction:
   · the pictures are already position:absolute (out of flow), so stacking them
     cannot change the hero's height;
   · the text slides share ONE grid cell, so the hero is always as tall as its
     TALLEST campaign and never resizes while rotating.                        */
.ed-hero__pic{ opacity:0; transition:opacity .9s var(--ed-ease); }
.ed-hero__pic.is-active{ opacity:1; }

.ed-hero__slides{ display:grid; }
.ed-hero__slide{
  grid-area:1 / 1;                 /* every campaign in the same cell */
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ed-ease), visibility 0s linear .55s;
}
.ed-hero__slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity .55s var(--ed-ease), visibility 0s;
}

/* Manual navigation — quiet dots, generous touch target, dot stays 8px. */
.ed-hero__nav{ display:flex; gap:2px; margin-top:26px; }
.ed-a-center .ed-hero__nav{ justify-content:center; }
.ed-a-right  .ed-hero__nav{ justify-content:flex-end; }
.ed-hero__dot{
  width:28px; height:28px;         /* hit area */
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:none; cursor:pointer; border-radius:50%;
}
.ed-hero__dot::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:color-mix(in srgb, var(--ed-on-dark) 42%, transparent);
  transition:background .25s var(--ed-ease), transform .25s var(--ed-ease);
}
.ed-hero__dot:hover::before{ background:color-mix(in srgb, var(--ed-on-dark) 70%, transparent); }
.ed-hero__dot.is-active::before{ background:var(--ed-on-dark); transform:scale(1.25); }
.ed-hero__dot:focus-visible{ outline:2px solid var(--ed-on-dark); outline-offset:2px; }

/* A hero over a light theme needs dark dots. */
.ed-block--hero:not(.is-dark) .ed-hero__dot::before{
  background:color-mix(in srgb, var(--ed-ink) 28%, transparent);
}
.ed-block--hero:not(.is-dark) .ed-hero__dot.is-active::before{ background:var(--ed-ink); }

@media (prefers-reduced-motion:reduce){
  .ed-hero__pic, .ed-hero__slide{ transition:none; }
}

/* ------------------------------------------------------------------ full */
.ed-block--full{
  --ed-h:auto; min-height:var(--ed-h);
  display:flex; align-items:center;
  padding-block:var(--ed-pad-full);
}

/* ------------------------------------------------------------------ half */
.ed-half__grid{
  display:grid; grid-template-columns:1fr; gap:var(--ed-gap-half);
  align-items:center;
}
.ed-half__media img{ border-radius:var(--ed-radius); }
@media (min-width:860px){
  .ed-half__grid{ grid-template-columns:1fr 1fr; }
  .ed-a-right .ed-half__copy{ order:2; }
  .ed-a-right .ed-half__media{ order:1; }
}

/* ------------------------------------------------------------- editorial */
.ed-editorial__inner{ display:grid; gap:var(--ed-gap-editorial); }
.ed-editorial__media img{ border-radius:var(--ed-radius); }

/* ------------------------------------------------------------------- cta */
.ed-block--cta{ padding-block:var(--ed-pad-cta); }
.ed-cta__inner .ed-title{ font-size:var(--ed-type-cta); }

/* --------------------------------------------------------------- gallery */
.ed-gallery__head{ margin-bottom:var(--ed-head-gap); }
.ed-gallery__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--ed-gap-gallery);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.ed-gallery__item img{ border-radius:var(--ed-radius); aspect-ratio:4/3; object-fit:cover; }
.ed-gallery__caption{
  margin:10px 0 0; font-size:var(--ed-type-caption); color:var(--ed-ink-soft); text-align:left;
}

/* ----------------------------------------------------------- device grid */
/* A row of device tiles: large art, one word, generous air. The PNGs are
   editorial cut-outs — never crop them, never scale them past their frame. */
.ed-grid__head{ margin-bottom:var(--ed-head-gap-lg); }
.ed-grid{
  display:grid; gap:var(--ed-gap-grid);
  grid-template-columns:repeat(3, 1fr);   /* mobile + tablet: 3+3, never an orphan row */
  align-items:end;
}
/* Desktop: all six in one row. Explicit 6-up (not auto-fit) so the 820-940
   band can never drop E-Scooters onto a lonely second row. */
@media (min-width:820px){ .ed-grid{ grid-template-columns:repeat(6, 1fr); } }
.ed-grid__item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none; color:inherit; padding:8px 4px; border-radius:var(--ed-radius-tile);
  transition:transform var(--ed-dur-lift) var(--ed-ease);
}
.ed-grid__item:hover{ transform:translateY(-4px); }
.ed-grid__item:focus-visible{ outline:2px solid var(--ed-accent); outline-offset:4px; }
.ed-grid__icon{
  display:flex; align-items:flex-end; justify-content:center;
  height:var(--ed-tile-h); width:100%;
}
.ed-grid__icon img{
  /* `contain` inside a definite box: the artwork is never cropped, and never
     escapes its frame into the heading above it. */
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
}
/* Optical-weight normalisation — scale each outlier from the shared floor so
   every device keeps the same baseline. Values come from the single device
   token set in tokens.css (--dev-showcase-*), shared with every surface.
   Catalogue order: 3=Tablets, 4=Wearables, 6=E-Scooters (near-square outlier). */
/* Fase 2 — bound to the CATEGORY, not the position.
   These were :nth-child(3), (4) and (6) — which is a bet that nobody ever
   reorders the grid. The Admin exists so somebody can. Reordering used to hand
   the tablets scale to whatever card landed third; now the scale follows the
   category the tile actually points at, in any order. */
.ed-grid__item--tablets   .ed-grid__icon img{ transform:scale(var(--dev-showcase-tablets));   transform-origin:center bottom; }
.ed-grid__item--wearables .ed-grid__icon img{ transform:scale(var(--dev-showcase-wearables)); transform-origin:center bottom; }
.ed-grid__item--scooters  .ed-grid__icon img{ transform:scale(var(--dev-showcase-scooters));  transform-origin:center bottom; }
.ed-grid__label{
  font-size:var(--ed-type-label); font-weight:var(--ed-weight-body); letter-spacing:-.01em; text-align:center;
}
.ed-block.is-dark .ed-grid__label{ color:var(--ed-on-dark); }

/* --------------------------------------------------------- feature list */
.ed-features__head{ margin-bottom:var(--ed-head-gap); }
.ed-features{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--ed-gap-features);
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  text-align:left;
}
.ed-features__title{
  margin:0 0 8px; font-size:var(--ed-type-feature); font-weight:var(--ed-weight-title); letter-spacing:-.015em;
}
.ed-features__text{
  margin:0; font-size:var(--ed-type-body); line-height:var(--ih-leading-body);
  color:var(--ed-ink-soft); max-width:38ch;
}
.ed-block.is-dark .ed-features__text{ color:var(--ed-on-dark-mute); }

/* ---------------------------------------------------------------- steps */
.ed-steps__head{ margin-bottom:var(--ed-head-gap); }
.ed-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--ed-gap-steps);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  text-align:left; counter-reset:none;
}
.ed-steps__step{ display:flex; gap:16px; align-items:flex-start; }
.ed-steps__num{
  flex:0 0 auto; font-size:var(--ed-type-num); font-weight:var(--ed-weight-title); letter-spacing:.06em;
  color:var(--ed-ink-soft); padding-top:3px; font-variant-numeric:tabular-nums;
}
.ed-block.is-dark .ed-steps__num{ color:var(--ed-on-dark-faint); }
.ed-steps__title{
  margin:0 0 6px; font-size:var(--ed-type-step); font-weight:var(--ed-weight-title); letter-spacing:-.012em;
}
.ed-steps__text{
  margin:0; font-size:var(--ed-type-body-sm); line-height:var(--ih-leading-body);
  color:var(--ed-ink-soft); max-width:34ch;
}
.ed-block.is-dark .ed-steps__text{ color:var(--ed-on-dark-mute); }

/* Centre alignment must carry the lists, not just the headings. */
.ed-a-center .ed-features,
.ed-a-center .ed-steps{ text-align:center; }
.ed-a-center .ed-steps__step{ flex-direction:column; align-items:center; gap:8px; }
.ed-a-center .ed-features__text,
.ed-a-center .ed-steps__text{ margin-inline:auto; }

/* ------------------------------------------------------ spacer / divider */
.ed-block--spacer{ --ed-h:64px; height:var(--ed-h); padding:0; }
.ed-block--divider{ padding-block:0; }
.ed-rule{ display:block; height:1px; background:var(--ed-line); }

/* ============================================================
 * Component refinements (Wave DESIGN SYSTEM 3.0).
 *
 * Every rule below keys off fields the block already has (kind, theme, align,
 * whether it carries an image, how many items). No new column exists to tell
 * a "Highlight" from an "Editorial Card": the difference is that one has a
 * picture and the other does not, and the CSS can see that.
 * ============================================================ */

/* ---- Highlight: an editorial block with no picture is a statement, not a
   card. Give the sentence the room it is asking for. ---- */
.ed-editorial__media:empty{ display:none; }
.ed-block--editorial:not(:has(.ed-pic)) .ed-title{
  font-size:var(--ed-type-highlight); line-height:var(--ed-lead-snug); max-width:20ch;
  margin-inline:auto;
}
.ed-block--editorial:not(:has(.ed-pic)){ padding-block:var(--ed-pad-statement); }
.ed-a-left.ed-block--editorial:not(:has(.ed-pic)) .ed-title{ margin-inline:0; }

/* ---- Comparison: a feature list of exactly two points is a comparison.
   Two columns, held apart, each given weight. ---- */
.ed-features:has(> li:nth-child(2):last-child){
  grid-template-columns:1fr 1fr; gap:var(--ed-gap-compare);
  max-width:56rem; margin-inline:auto;
}
.ed-features:has(> li:nth-child(2):last-child) .ed-features__title{
  font-size:var(--ed-type-compare);
}
.ed-features:has(> li:nth-child(2):last-child) .ed-features__text{ max-width:32ch; }
@media (max-width:700px){
  .ed-features:has(> li:nth-child(2):last-child){ grid-template-columns:1fr; }
}

/* ---- Hero: centred heroes carry fewer words, so the measure tightens. ---- */
.ed-a-center .ed-hero__inner .ed-title{ max-width:18ch; margin-inline:auto; }
.ed-a-center .ed-hero__inner .ed-subtitle{ max-width:46ch; }

/* ---- Banner: an interruption, not an opening. Tighter than a hero. ---- */
.ed-block--full .ed-title{ font-size:var(--ed-type-banner); max-width:22ch; }
.ed-a-center .ed-block--full .ed-title,
.ed-block--full.ed-a-center .ed-title{ margin-inline:auto; }

/* ---- Split: the image gets a shadow only on light panels, where it needs
   to lift off the page. On dark panels it would only muddy the edge. ---- */
.ed-half__media img{ box-shadow:var(--ed-shadow-media); }
.ed-block.is-dark .ed-half__media img{ box-shadow:none; }

/* ---- Editorial card: contained art wants the same lift. ---- */
.ed-editorial__media img{ box-shadow:var(--ed-shadow-media-soft); }
.ed-block.is-dark .ed-editorial__media img{ box-shadow:none; }

/* ---------------------------------------------------------------- motion */
/* Entrance motion is scroll-driven CSS, not JavaScript. The public page still
   ships zero script, and a browser without `animation-timeline` simply shows
   the content — there is no state in which a failed animation hides a block.
   Three guards: the operator's switch, the visitor's preference, and support. */
@keyframes ed-rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@keyframes ed-settle{           /* for imagery: scale, never translate */
  from{ opacity:0; transform:scale(1.015); }
  to  { opacity:1; transform:none; }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* The first block is above the fold: animating it would delay the LCP. */
    .ed:not(.ed--no-motion) .ed-block:not(:first-child) .ed-inner{
      animation:ed-rise linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 24%;
    }
    .ed:not(.ed--no-motion) .ed-block:not(:first-child) > .ed-pic{
      animation:ed-settle linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 22%;
    }
  }
}

.ed--no-motion .ed-block,
.ed--no-motion .ed-block *{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce){
  .ed-block, .ed-block *{ transition:none !important; animation:none !important; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width:760px){
  .ed-block{ padding-block:var(--ed-pad-mobile); }
  /* Tighter rhythm for the 3+3 grid (columns come from the base rule). */
  .ed-grid{ gap:20px 12px; }
  .ed-grid__icon{ height:76px; }
  .ed-grid__label{ font-size:var(--ed-type-label-sm); }
  .ed-block--hero,
  .ed-block--video_hero{ padding-block:var(--ed-pad-mobile-hero); }
  .ed-a-right .ed-inner{ text-align:left; }
  .ed-a-right .ed-actions{ justify-content:flex-start; }
}

/* ============================================================
 * Staff preview chrome. Never loaded by the public page (the markup
 * that uses it only exists in preview.html).
 * ============================================================ */
.ed-preview{ background:#f5f5f7; min-height:100vh; }
.ed-preview__bar{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between;
  padding:14px 20px; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--ed-line);
}
.ed-preview__id{ display:flex; align-items:center; gap:10px; font-size:14px; }
.ed-preview__label{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ed-ink-soft);
}
.ed-preview__slug{ color:var(--ed-ink-soft); font-family:ui-monospace,monospace; font-size:12px; }
.ed-preview__devices{ display:flex; gap:6px; }
.ed-preview__device{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:7px 14px; border-radius:var(--ed-radius-pill); text-decoration:none;
  font-size:13px; color:var(--ed-ink); border:1px solid transparent;
}
.ed-preview__device small{ color:var(--ed-ink-soft); font-size:11px; }
.ed-preview__device:hover{ background:rgba(0,0,0,.04); }
.ed-preview__device.is-on{ background:var(--ed-black); color:var(--ed-on-dark); }
.ed-preview__device.is-on small{ color:var(--ed-on-dark-faint); }

.ed-preview__stage{ padding:28px 20px 64px; display:flex; justify-content:center; }
.ed-preview__frame{
  --ed-frame-w:1440px;
  display:block; border:0;
  width:min(100%, var(--ed-frame-w)); min-height:600px;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
}
.ed-preview__empty{ padding:80px 20px; text-align:center; color:var(--ed-ink-soft); }

/* State flags — only rendered in preview. */
.ed-flag{
  display:inline-block; padding:3px 9px; border-radius:var(--ed-radius-pill);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.ed-flag--live,
.ed-flag--published{ background:#e4f5ea; color:#0a7d3f; }
.ed-flag--draft{ background:#eceef2; color:#5b6472; }
.ed-flag--scheduled{ background:#fdf0e3; color:#b85c1f; }
.ed-flag--campaign-off{ background:#fbe9e9; color:#a12222; }

/* Non-live blocks are shown at full fidelity — they are exactly what the
   editor came to look at. Only a corner flag marks them. */
.ed-block--ghosted > .ed-flag{
  position:absolute; top:12px; left:12px; z-index:5;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* ============================================================
 * Wave 5.1 — Editorial Pair: two independent cards in one row.
 * Reuses --ed-gap-half / --ed-radius / --ed-shadow-media / .ed-btn / .ed-pic.
 * Only the pair-specific structure lives here. No existing rule changed.
 * ============================================================ */
/* Wave HOME PREMIUM 2.1 — Apple editorial grid.
   The two cards must read as INDEPENDENT panels, not one block split in half.
   The separator is the white page itself: a generous gutter, no line, no
   border, no divider, no shadow. Panels get their own fill (light gray / dark)
   so the negative space sets them apart — exactly the Apple composition. */
.ed-pair__grid{
  display:grid; grid-template-columns:1fr;
  /* Negative-space gutters. Bigger when stacked (row) than side by side
     (column) — "CARD ↓ big white space ↓ CARD" on mobile. */
  column-gap:clamp(18px,2.2vw,34px);
  row-gap:clamp(28px,6vw,52px);
  align-items:stretch;              /* both panels take the taller one's height */
}
/* Two columns while there is room — down to tablet portrait, then stack. */
@media (min-width:720px){ .ed-pair__grid{ grid-template-columns:1fr 1fr; } }
.ed-pair__card{
  display:flex; flex-direction:column;
  background:var(--ed-bg); color:var(--ed-ink);
  border-radius:clamp(18px,2vw,22px); overflow:hidden;
  /* No shadow, no border. The white gutter is the only separator. */
}
.ed-pair__card.is-dark{ color:var(--ed-on-dark); }
.ed-pair__card.is-dark .ed-eyebrow,
.ed-pair__card.is-dark .ed-subtitle,
.ed-pair__card.is-dark .ed-text{ color:var(--ed-on-dark-soft); }
.ed-pair__media{ width:100%; }
.ed-pair__media img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.ed-pair__body{
  display:flex; flex-direction:column; gap:0;
  justify-content:flex-start;       /* content aligns to the top of both */
  padding:clamp(32px,3.6vw,56px);   /* generous internal breathing */
}
.ed-pair__body .ed-actions{ margin-top:auto; padding-top:20px; }
/* Reduced title — restores the hierarchy eyebrow(12) › title › body(15).
   Was --ed-type-highlight (28–46px), which dominated the card. */
.ed-pair__title{
  font-size:clamp(22px,2.3vw,30px); line-height:1.15;
  letter-spacing:-.01em; margin:0;
}
.ed-pair__body .ed-eyebrow{ margin:0 0 14px; }
.ed-pair__body .ed-text{ margin:18px 0 0; }

/* ============================================================
 * Wave LAYOUT ENGINE 1.0 — 50/50 desacoplado do tipo de bloco.
 * Dois blocos layout_span=half com o mesmo layout_row entram numa
 * .ed-row--pair. A separação é o espaço branco da página: sem linha,
 * sem borda, sem sombra, sem fundo único a envolver o par. Cada bloco
 * mantém o seu próprio template e tema.
 * ============================================================ */
.ed-row--pair{
  /* Wave HOME PREMIUM 2.2 — Responsive Editorial Campaign Panels.
     Wider than a contained band so the campaigns have presence; a SHORT,
     constant vertical band so two pair rows read as ONE 2×2 grid, not two
     separated sections. Gutter ≈ the between-rows band → the four panels feel
     like a single composition. Reusable by any future Half row. */
  max-width:min(1480px, 94vw); margin-inline:auto;
  padding:clamp(7px,0.9vw,12px) clamp(16px,3vw,32px);
  display:grid; grid-template-columns:1fr;
  column-gap:clamp(14px,1.6vw,22px);           /* gutter lado a lado */
  row-gap:clamp(14px,3.2vw,22px);              /* faixa curta ao empilhar */
  align-items:stretch;                          /* colunas com a mesma altura */
}
/* Duas colunas enquanto houver espaço; abaixo do breakpoint, empilha. */
@media (min-width:720px){ .ed-row--pair{ grid-template-columns:1fr 1fr; } }

/* Um bloco qualquer, quando é coluna de um par, torna-se a própria célula:
   sem o padding de banda full-width, o conteúdo preenche a coluna. O motor
   NÃO adiciona arredondamento/sombra/borda — quem os tiver é o template do
   bloco (ex.: a imagem do kind `editorial` já é arredondada). */
.ed-row--pair > .ed-block{ padding:0; }
.ed-row--pair > .ed-block > .ed-inner,
.ed-row--pair > .ed-block .ed-inner{ max-width:none; }

/* Uma imagem pronta (kind `editorial` só com asset) preenche o painel:
   colapsa a área de copy vazia e remove a sombra da media SÓ neste contexto,
   para a composição ficar limpa como a Apple (imagem + gutter branco). */
.ed-row--pair .ed-editorial__inner{ gap:0; }
.ed-row--pair .ed-editorial__media img{ box-shadow:none; }