/* ═══════════════════════════════════════════════════════════════════════════
   FLY AWAY · ARTICLE HERO ON BLOCKSY

   GENERATED. Do not hand-edit — this is synced from design/fw-theme-blocksy.css
   by `python3 design/build-kit.py`, like the kit stylesheet and the sprite.

   A THEME BRIDGE, KEPT OUT OF THE KIT ON PURPOSE.

   fw-components.css styles OUR markup and is deliberately theme-independent, so
   published articles survive a theme change. This file styles somebody else's
   markup, which is the opposite promise. Mixing them would break the kit's
   contract and put Blocksy selectors into the design gallery, which has no
   Blocksy markup in it.

   Kept separate, the coupling stays honest: the plugin loads this only when
   Blocksy is the active template, so a brand on another theme never sees it and
   a theme switch degrades to plain Blocksy rather than to something broken.

   WHAT IT DOES NOT DO. There is no image-overlay rule anywhere in here. That
   value belongs in Customize → Post Types → Posts → Post Title → Design, where
   Blocksy gives it a colour picker and a live preview. Setting it in both
   places is how the first attempt ended up as mud: two overlays multiply.

   Everything that IS here has no native control — Blocksy exposes no hero type
   scale, no measure, no way to invert the category pill, and no reading time.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 2 · BREATHING ROOM ────────────────────────────────────────────────────
   The frame was tall and the content sat in a tight clump in the middle of
   it, which reads as crowded even with space all around. Room between the
   parts is what makes a block feel composed; room around it only makes it
   look adrift.

   Centred, and held to a measure. Without a max-width the standfirst runs the
   full container and centred text at that length is genuinely hard to read,
   because every line starts somewhere different. */
/* THE HEADER IS THE PANEL.
   Blocksy's .entry-header already wraps the kicker, title, standfirst and
   reading time, so it becomes the frosted box without a line of new markup.
   The h1 stays where it is, which was the whole reason for leaving the header
   with the theme in the first place.

   Transparent enough to read the photograph through: at .38 it was a dark
   block sitting ON the image; at .26 with a heavier blur it reads as glass and
   the picture stays present behind the words. 5px radius rather than 14, so it
   is a panel rather than a bubble. */
.hero-section[data-type="type-2"] .entry-header {
  /* 52rem and tighter padding. At 46rem with 2.4rem of padding the panel
     measured 462px inside a 500px hero, so it read as a full-height slab
     covering the middle third. Nothing was stretching it: the content plus the
     spacing I gave it came to 462. Wider lets the standfirst fall in two lines
     instead of three, and the smaller padding and margins below take the panel
     to roughly 330, which leaves the photograph visible around it. */
  max-width: 52rem;
  margin-inline: auto;
  padding: 1.7rem 2rem 1.5rem;
  background: rgba(14, 18, 22, 0.26);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
}

/* ── 3 · THE KICKER  (top Post Meta → Categories) ──────────────────────────
   White pill, brand-red text, red hairline. Inverted from the solid red pill,
   which was stark: a saturated block of brand colour on a photograph is the
   loudest thing a hero can contain, and it was competing with the headline
   rather than introducing it.

   WHY !important, WHICH I WOULD RATHER NOT USE.

   Two passes set the colour and lost. Blocksy paints meta links through its
   own custom properties, wraps the term in a span inside the anchor, and
   carries hero-specific overrides that outrank a plain descendant selector.
   Any of those beats a normal declaration, and from here I cannot see which,
   so each polite guess costs a paste and a screenshot.

   This is a prototype stylesheet in Additional CSS, which is the last thing to
   load and answers to nothing. Winning outright here is cheap. When this moves
   into the plugin I will have a page I can inspect properly, and these come
   back out.

   The colour is set on the anchor, on everything nested in it, and through the
   three custom properties Blocksy reads, so it does not matter which one is
   doing the painting. */
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type {
  justify-content: center;
  margin-bottom: 1.05rem;
}
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type a {
  display: inline-flex !important;
  align-items: center;
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid #ce122d !important;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
}
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type,
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type li,
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type a,
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type a *,
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type a:hover,
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type a:hover * {
  color: #ce122d !important;
  --theme-link-initial-color: #ce122d;
  --theme-link-hover-color: #a30f24;
  --theme-text-color: #ce122d;
}
/* Blocksy renders the separator between terms; it has no pill to sit in. */
.hero-section[data-type="type-2"] .entry-header .entry-meta:first-of-type li::after {
  display: none;
}

/* ── 4 · THE HEADLINE ──────────────────────────────────────────────────────
   600, not 700. Three things were at maximum weight — pill, title, meta —
   which flattens a hierarchy rather than creating one. With the other two
   stepped back the title reads as more confident at 600, not less.

   24ch centred: wide enough that a long title breaks to two lines rather than
   three, narrow enough that the lines stay a shape instead of a slab. */
.hero-section[data-type="type-2"] .entry-header .page-title {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ── 5 · THE STANDFIRST ────────────────────────────────────────────────────
   Blocksy sets the description a step below body copy, which is why it read
   as a caption. This is the sentence the article turns on.

   The mobile problem is NOT fixable here. Blocksy emits .ct-hidden-sm and the
   rule is `display:none !important`, so it comes off in the Customizer:
   expand the Excerpt element, turn off hide-on-mobile. */
.hero-section[data-type="type-2"] .entry-header .page-description {
  margin-top: 1rem;
}
.hero-section[data-type="type-2"] .entry-header .page-description p {
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.6;
  font-weight: 400;
  color: #fff;
  max-width: 62ch;
  margin-inline: auto;
}

/* ── 6 · READING TIME ──────────────────────────────────────────────────────
   With the date switched off, Blocksy's lower meta row renders nothing, so
   this is not styling an element the theme provides. The Fly Away plugin
   (1.7.2+) reads `_flyaway_reading_minutes` off the post and hands it to CSS
   as --fw-readtime; the number comes from the article model, computed against
   the finished text rather than recounted from the rendered HTML.

   `var(--fw-readtime, none)` is the whole safety story. When the property is
   absent — plugin not installed, meta not written, a legacy post — `content`
   resolves to `none` and no pseudo-element is generated at all. Nothing to
   hide, no empty box, no orphaned margin. */
.hero-section[data-type="type-2"] .entry-header::after {
  content: var(--fw-readtime, none);
  display: block;
  margin-top: 1.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Kept for whenever a meta element IS enabled in that slot, so turning the
   date back on does not land unstyled. */
.hero-section[data-type="type-2"] .entry-header .entry-meta:last-of-type {
  justify-content: center;
  margin-top: 1.9rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hero-section[data-type="type-2"] .entry-header .entry-meta:last-of-type a {
  color: inherit;
  text-decoration: none;
}

/* ── 7 · SMALL SCREENS ─────────────────────────────────────────────────────
   No overlay rule here either, for the same reason as section 1: the theme
   owns that value at every width, and Blocksy's own control is responsive.
   Two places setting it is what produced mud the first time.

   Padding only. 4.5rem top and bottom is most of the viewport on a 400px
   screen, and the title wants a shorter measure before it starts breaking
   words. */
@media (max-width: 689px) {
  .hero-section[data-type="type-2"] .entry-header {
    max-width: none;
    padding: 1.9rem 1.5rem 1.7rem;
    /* Blur is expensive on a phone GPU and buys little at this width, where
       the panel spans the frame anyway. Opacity carries it instead. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(14, 18, 22, 0.38);
  }
  .hero-section[data-type="type-2"] .entry-header .page-title {
    max-width: 20ch;
  }
  .hero-section[data-type="type-2"] .entry-header .page-description {
    margin-top: 1.2rem;
  }
}

/* ── 8 · THE COMPARISON TABLE ──────────────────────────────────────────────
   Blocksy borders every table and cell on all four sides:

       table, th, td { border: var(--theme-table-border-width, 1px) }

   The kit draws only horizontal rules, so what rendered was a full grid with
   our rule painted on top of the theme's: two border systems stacked, which is
   what made the component look dated beside the cards around it. The empty
   corner cell was the visible symptom, but clearing that one cell was never
   going to be enough.

   Blocksy exposes the width as a variable, so the width is set to zero rather
   than each side being fought individually, and the kit's own rules are
   restated because the shorthand above outranks them on the sides it sets.

   Verified on the live page before shipping. Cells went 1/1/1/1 to 0/0/1/0,
   and the first row keeps the top rule that closes the table.
   ─────────────────────────────────────────────────────────────────────────── */
.fw-compare-wrap,
.fw-compare,
.fw-compare th,
.fw-compare td {
  --theme-table-border-width: 0px;
}
.fw-compare,
.fw-compare thead th {
  border: 0;
}
.fw-compare tbody th,
.fw-compare tbody td {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid var(--fw-rule-2);
}
.fw-compare tbody tr:first-child td {
  border-top: 1px solid var(--fw-rule-2);
}