/*
 * CRAIC Tabs — brand presentation.
 *
 * Wide: a tab strip that WRAPS into further rows rather than clipping (the live Joomla site
 * justified seven tabs across a fixed width and truncated the last to "Appli…" — that failure is
 * why this exists). v1.11.1: a strip beside a floated product-lead photo, or a strip with 7-8 real
 * tabs even at full container width, was overflowing its own box and hard-clipping mid-word with no
 * scroll affordance (`overflow-x:auto` never engaged because nothing told the reader it was there) —
 * wrapping guarantees every tab is always visible, at any width, with no dependency on a runtime
 * script setting `data-overflow`. The active tab is marked by the spectral gradient, a quiet echo of
 * the homepage signature. Narrow: a clean disclosure accordion. No JS: every panel open.
 */

/* The whole widget is a CONTAINED CARD: a hairline border + barely-there lift bound the tab strip
   and its panel into one obvious group, so the product explorer never bleeds into the body copy
   that follows it. The mist strip reads as the card's header; the panel is its body. */
.craic-tabs {
  /* space-6 (not gap-section) so the gap ABOVE the tab block equals the gap BELOW it — the closing
     band sits a space-6 under the tabs, so the tabs sit a space-6 under the content. Balanced. */
  margin-block: var(--space-6, 5rem); max-width: none;
  /* On a product page the lead photo floats right beside a short intro (style.css ~L653); with no
     clear here the tab card started rendering INSIDE the float's leftover width (~523px of the real
     902px) and stayed that narrow permanently, hard-clipping the strip after the 3rd tab. The block
     must always start clean, full width, below the float. */
  clear: both;
  border: 1px solid var(--rule, rgba(20, 22, 27, 0.12));
  border-radius: var(--radius, 2px);
  background: var(--paper, #fff);
  overflow: hidden;                  /* clip the mist header to the rounded corners */
  box-shadow: 0 1px 2px rgba(20, 22, 27, 0.04), 0 12px 32px -24px rgba(20, 22, 27, 0.25);
}

/* ---- Tab strip (wide) = card header ------------------------------------- */
/* display:flex must beat the `hidden` attribute's UA display:none; keep :not([hidden]) so a
   JS-free browser — the case `hidden` exists to serve — never shows a dead strip. */
.craic-tabs__list:not([hidden]) {
  display: flex;
  /* v1.11.1: was nowrap + overflow-x:auto (scroll, never clip) — but an 8-tab strip inside a card
     whose width is set by the surrounding layout (sometimes narrowed further by a floated lead
     photo, see .craic-tabs clear:both above) had nothing telling the reader it could scroll, so it
     read as a hard clip mid-label with 3 whole tabs unreachable. Wrapping needs no runtime affordance
     — every tab is simply visible, in as many rows as the strip needs, at any width. */
  flex-wrap: wrap;
  overflow-x: auto;                  /* belt-and-suspenders: still scrolls if a single tab ever
                                         exceeds the strip's own width outright */
  overflow-y: hidden;
  gap: 0;
  padding: 0 var(--space-3, 1.25rem);
  background: var(--mist, #f2f3f6);  /* header surface — sets the group apart */
  border-bottom: 1px solid var(--rule, rgba(20, 22, 27, 0.12));
  margin-bottom: 0;                  /* the panel's own padding provides the gap now */
  /* The native bar sat under the strip as a stray grey rail that looked like a broken element and
     told the reader nothing. Hide it and signal the overflow with a fade instead (below). */
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.craic-tabs__list[hidden] { display: none; }
.craic-tabs__list::-webkit-scrollbar { display: none; }

/* Overflow affordance: the strip fades out at whichever edge still has tabs beyond it, so "there is
   more this way" is visible without a scrollbar. data-overflow is maintained by the runtime; with no
   JS the strip simply doesn't fade, and it still scrolls. */
.craic-tabs__list[data-overflow="end"]   { mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.craic-tabs__list[data-overflow="start"] { mask-image: linear-gradient(90deg, transparent 0%, #000 12%); }
.craic-tabs__list[data-overflow="both"]  { mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }

.craic-tabs__list [role="tab"] {
  position: relative;
  appearance: none; background: none; border: 0;
  padding: 0.85rem 1.15rem;
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.005em;
  color: var(--ink-soft, #565a63);
  white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  transition: color 160ms ease;
}
/* Reserve the SELECTED weight's width on every tab. The active tab goes 500 -> 600, which makes it
   measurably wider and pushes every following tab along — clicking through the strip made the whole
   row twitch, and read as uneven spacing. This hidden bold copy fixes each tab's width to its bold
   width, so selection changes weight and colour only, never layout. (::after is taken by the
   active underline, so this uses ::before.) */
.craic-tabs__list [role="tab"]::before {
  content: attr(data-label);
  display: block; height: 0; overflow: hidden;
  font-weight: 600; visibility: hidden; pointer-events: none;
}
.craic-tabs__list [role="tab"]:hover { color: var(--ink, #14161b); }
.craic-tabs__list [role="tab"][aria-selected="true"] { color: var(--ink, #14161b); font-weight: 600; }

/* Brand-red active underline — the clearest "current tab" signal. (The spectral gradient is
   deliberately ~83% grey, so at tab width it reads as a faint line; red is unambiguous.) */
.craic-tabs__list [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red, #ee2e24);
}
.craic-tabs__list [role="tab"]:focus-visible {
  outline: 2px solid var(--octagon, #4c5993); outline-offset: -2px; border-radius: 2px;
}

/* ---- Panels = card body ------------------------------------------------- */
.craic-tabs__panel { scroll-margin-top: 6rem; }
/* Tab mode: generous padding gives the active panel room to breathe inside the card. */
.craic-tabs[data-mode="tabs"] .craic-tabs__panel { padding: var(--space-5, 3.25rem) var(--space-4, 2rem); }
.craic-tabs[data-mode="static"] .craic-tabs__panels { padding: var(--space-4, 2rem); }
.craic-tabs__panel:focus-visible { outline: 2px solid var(--octagon, #4c5993); outline-offset: -4px; }
.craic-tabs__body > :first-child { margin-top: 0; }
.craic-tabs__body table { width: 100%; }

/* ---- Panel content ------------------------------------------------------ */
/* Panels are a two-column .cols grid (descriptive text | product image), built upstream by
   content-transform.py. Center the two columns to each other so a tall portrait image and a short
   text block don't strand a block of dead space — the "gap" this rewrite set out to kill. */
.craic-tabs__body .cols {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);   /* text gets the larger share */
  align-items: start;                                        /* top-align: on a long feature list the
                                                                image sits at the top, not floating mid-column */
  gap: var(--space-5, 3.25rem);
}
/* A text-only panel (e.g. Support) has a single .col and no image, so the reserved image track
   stranded half the panel as dead space. Give a lone column the full width. */
.craic-tabs__body .cols:has(> .col:only-child) { grid-template-columns: 1fr; }
.craic-tabs__body .col { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Quiet every link in a panel: ink text with a brand underline, never red body text (six red
   links stacked read as a warning block). This alone kills the "red wall" for every panel type —
   the definition link, the described-feature links in "More Innovations", the inline sentence links. */
.craic-tabs__body a {
  color: var(--ink, #14161b);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--red, #ee2e24); text-underline-offset: 0.18em;
  transition: color 160ms ease;
}
.craic-tabs__body a:hover { color: var(--red-ink, #c9231a); text-decoration-color: var(--red-ink, #c9231a); }

/* Pure link lists — every <li> is a lone <a> — are tagged .is-linklist upstream (functions.php).
   These are NAVIGATION links, so they must read as links, not as an accordion. The earlier full-width
   hairline ROWS with a chevron looked exactly like an expandable list — a click promised to expand and
   instead navigated (an affordance contract-break). So: plain underlined text links (the universal
   "this is a link" signal), sized to their text (not full-width rows), with a hover → that says
   "go to page", not "expand". */
.craic-tabs__body ul.is-linklist {
  list-style: none; margin: var(--space-3, 1.25rem) 0 0; padding: 0;
  display: grid; gap: 0.65rem; justify-items: start;
}
.craic-tabs__body ul.is-linklist li { margin: 0; }
.craic-tabs__body ul.is-linklist li a {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  color: var(--ink, #14161b);
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 0.98rem; font-weight: 500; line-height: 1.35;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--red, #ee2e24) 60%, transparent);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.craic-tabs__body ul.is-linklist li a::after {
  content: "\2192"; color: var(--red, #ee2e24); font-weight: 600; text-decoration: none;
  opacity: 0; transform: translateX(-0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}
.craic-tabs__body ul.is-linklist li a:hover {
  color: var(--red-ink, #c9231a); text-decoration-color: var(--red-ink, #c9231a);
}
.craic-tabs__body ul.is-linklist li a:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .craic-tabs__body ul.is-linklist li a::after { transition: none; } }

/* Product image column: NO grey mat. The shot sits on white, centered, grounded by a soft shadow —
   the same clean floating-print treatment used everywhere else. The mat used to fill the column to
   "balance" text and picture, but it read as a grey box around the photo, which the client disliked;
   white space beside a shorter image is quieter than a grey fill. float:none defeats the old Joomla
   align="right" that jammed the image to the edge. */
.craic-tabs__body .col:has(img) {
  align-self: start;                 /* top-align with the text start (see .cols align-items) */
  align-items: center; justify-content: center;
  justify-self: center;              /* grid-native centring — margin-inline:auto didn't take on a
                                        content-sized flex column, so a small shot sat stranded to the
                                        LEFT of a wide track with a void beside it. This centres it. */
}
/* Guard against a page-level rule reaching in here: style.css's `.entry-content .cols > .col:first-
   child { position: sticky }` (the fix for the RIGID .cols component stranding a short supporting
   column beside tall prose) is a plain descendant selector, and a panel's own .cols lives inside
   .entry-content too — so without this it would ALSO make a panel's first column sticky. This file is
   unlayered, so it always wins that one property back regardless of source order. Panels aren't the
   component that bug targets (this file already balances panel image/text columns its own way, see
   above), and a panel is rarely tall enough for sticky to do anything but confuse a reader. */
.craic-tabs__body .col:first-child { position: static; }

/* ---- Long capability list ("Key Features") ------------------------------ */
/* Some panels pair a single product shot with a 20+ item feature list. Beside the image that list
   became a tall thin ribbon and stranded the shot in a column of dead space. When the text column
   carries a long list (14+ items), stop competing for width: stack the panel, flow the list into a
   full-width multi-column capability grid, and drop the product shot below as a centered figure. */
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) {
  grid-template-columns: 1fr;
  gap: var(--space-4, 2rem);
}
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) ul:not(.is-linklist) {
  columns: 17rem; column-gap: var(--space-5, 3.25rem);
  margin-top: var(--space-3, 1.25rem);
}
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) ul:not(.is-linklist) li {
  break-inside: avoid;               /* never split a capability across two columns */
}
/* the shot is now a closing figure, centered, sized to itself — not a full-width empty mat.
   order:1 pins it AFTER the capability grid regardless of which column the source put first, so
   every product page reads the same way: lede -> features -> product shot. (The 2030PV source
   lists text first, the 508PV image first; without this they'd disagree.) */
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) .col:has(img) {
  align-self: center; max-width: 26rem; margin-inline: auto; order: 1;
}
.craic-tabs__body .col img {
  /* !important defeats leftover Joomla inline styles (margin-left:auto jams the shot right;
     stray padding-left/right; width="100%") so the image centres cleanly in its mat. */
  float: none !important; margin: 0 auto !important; padding: 0 !important;
  display: block;
  width: auto !important; max-width: 100%; max-height: 22rem; height: auto;
  border-radius: var(--radius, 2px); background: #fff;
  box-shadow: 0 10px 28px -16px rgba(20, 22, 27, 0.4);
}

/* A panel that is NOT a two-column .cols layout (e.g. the Apollo M "Introduction") had no rule for
   its lone figure, so a tall portrait product shot rendered at full natural height (~700px) and sat
   off-centre — the source sets display:block with no auto margins. Cap and centre it so imagery is
   consistent panel to panel. Lower specificity than `.craic-tabs__body .col img`, so the mat
   treatment inside .cols still wins. */
.craic-tabs__body figure { margin: var(--space-3, 1.25rem) 0; }
.craic-tabs__body figure > img {
  display: block; margin-inline: auto;
  width: auto; max-width: 100%; max-height: 24rem; height: auto;
  border-radius: var(--radius, 2px);
}

@media (max-width: 760px) {
  .craic-tabs__body .cols { grid-template-columns: 1fr; align-items: stretch; gap: var(--space-3, 1.25rem); }
  .craic-tabs__body .col:has(img) { padding: var(--space-3, 1.25rem); }
  .craic-tabs__body .col img { max-height: 16rem; }
  .craic-tabs__body figure > img { max-height: 18rem; }
}

/* ---- Disclosure accordion (narrow) ------------------------------------- */
.craic-tabs__heading { font-family: var(--font-display, system-ui), system-ui, sans-serif; margin: 0; }
.craic-tabs__disclosure {
  appearance: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; border-top: 1px solid var(--rule, rgba(20, 22, 27, 0.12));
  padding: 1rem 0;
  font: inherit; font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink, #14161b); text-align: left; cursor: pointer;
}
.craic-tabs__disclosure::after {
  content: ""; flex: 0 0 auto; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms ease;
}
.craic-tabs__disclosure[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.craic-tabs__disclosure:focus-visible { outline: 2px solid var(--octagon, #4c5993); outline-offset: 2px; }

/* ---- Mode switching ----------------------------------------------------- */
/* data-mode="static" is the server / no-JS rendering: strip hidden, all panels open, headings inert. */
.craic-tabs[data-mode="static"] .craic-tabs__disclosure::after { display: none; }
.craic-tabs[data-mode="static"] .craic-tabs__disclosure { cursor: default; }
/* Tab mode: the per-panel heading is redundant with its tab button. */
.craic-tabs[data-mode="tabs"] .craic-tabs__heading { display: none; }
/* Accordion mode: the card wraps the stacked rows. Inset them, and drop the first row's top rule
   (the card border already draws that line). No last-child bottom rule needed — the card closes it. */
.craic-tabs[data-mode="disclosure"] .craic-tabs__panels { padding: 0 var(--space-4, 2rem); }
.craic-tabs[data-mode="disclosure"] .craic-tabs__panel:first-child .craic-tabs__disclosure { border-top: 0; }
.craic-tabs[data-mode="disclosure"] .craic-tabs__body { padding-bottom: var(--space-3, 1.25rem); }

@media (prefers-reduced-motion: reduce) {
  .craic-tabs__disclosure::after, .craic-tabs__list [role="tab"] { transition: none; }
}

/* =====================================================================
   Adaptive tab layouts (CPT / [craic_tabs]) — .tabpanel-inner is placed
   inside .craic-tabs__body; the resolved template + link style drive it.

   The panel body is a QUERY CONTAINER: every template below sizes to the
   body's own width (≈48rem in a product page's main column beside the rail,
   ≈74rem in the full-width homepage section), never to the viewport. So one
   set of rules stays balanced whether the tabs are full-width or in a column.
   ===================================================================== */
.craic-tabs__body { container-type: inline-size; container-name: craictab; }
.tabpanel-inner { display: block; }
/* enclose the floated photo so the panel's height includes it */
.tabpanel-inner::after { content: ""; display: block; clear: both; }
/* Every panel's first element starts flush at the top, whatever the template — so switching
   tabs never shifts the content's start position vertically (prevents layout bounce / CLS). */
.tabpanel-inner .tabpanel-text > :first-child { margin-top: 0; }
.tabpanel-media { margin: 0; }
.tabpanel-media img {
  display: block;
  border-radius: var(--radius, 6px);
  box-shadow: 0 6px 18px rgba(20, 22, 27, .09);
  background: var(--paper, #fff);
}

/* Feature templates FLOAT the photo so the text — a short paragraph OR a long feature list —
   wraps beside it and then fills full width below, instead of stranding empty space under a
   short photo. Widths are a share of the container (capped in rem) so they shrink in a narrow
   main column but never oversize when the tabs run full-width (homepage). */

/* (1) Portrait feature — tall photo floats right. */
.tabfmt--portrait-feature .tabpanel-media {
  float: right; width: min(32%, 20rem);
  margin: .2rem 0 var(--space-4, 1.5rem) var(--space-5, 2rem); text-align: center;
}
.tabfmt--portrait-feature .tabpanel-media img { width: auto; max-width: 100%; max-height: 28rem; margin-inline: auto; }

/* (2) Landscape feature — wider photo floats right. */
.tabfmt--landscape-feature .tabpanel-media {
  float: right; width: min(42%, 26rem);
  margin: .2rem 0 var(--space-4, 1.5rem) var(--space-5, 2rem);
}
.tabfmt--landscape-feature .tabpanel-media img { width: 100%; height: auto; }

/* (3) Photo aside — small supporting photo floats left, text is primary. */
.tabfmt--photo-aside .tabpanel-media {
  float: left; margin: .2rem var(--space-5, 2rem) var(--space-3, 1rem) 0;
}
.tabfmt--photo-aside .tabpanel-media img { width: auto; height: auto; max-width: 12rem; }

/* (4) Link directory — no photo; full-width intro + link grid. */
.tabfmt--link-directory { grid-template-columns: 1fr; }

/* (5) Compact note — no photo prose. Left-aligned at a readable measure (not a centred outlier).
   Paragraphs stay the SAME size as every other template (standardised); only the CTA is sized up. */
.tabfmt--compact-note { grid-template-columns: 1fr; }
.tabfmt--compact-note .tabpanel-text { max-width: 62rem; }

/* Call-to-action line — its own second line, sized up, with the brand accent underline. */
.tabpanel-text .tab-cta { margin-top: var(--space-4, 2rem); margin-bottom: 0; }
.tabpanel-text .tab-cta a {
  display: inline-block; font-size: var(--step-1, 1.3rem); font-weight: 600;
  color: var(--ink, #16181d); text-decoration: none;
  border-bottom: 2px solid var(--octagon, #4C5993); padding-bottom: 3px;
}
.tabpanel-text .tab-cta a:hover,
.tabpanel-text .tab-cta a:focus-visible { color: var(--octagon, #4C5993); }

/* ---- Link rendering -------------------------------------------------
   Chosen by the renderer: `chips` for a genuine pure-link nav list, `flow`
   (clean inline text) for every mixed / short-phrase / feature list.
   feature-list keeps its own cards. DESCENDANT selectors (ul, not > ul) so a
   nested <ul> renders identically to a top-level one — no bullets-vs-chips drift. */
.tabpanel-text ul { list-style: none; margin: var(--space-4, 1rem) 0 0; padding: 0; }
.tabpanel-text ul ul { margin-top: .25rem; }

/* Chips — pure-link lists only: boxed + arrowed in a responsive grid. The min(100%, …) track floor
   lets a chip shrink to a full row (1-up) when the panel is narrower than the floor, instead of
   overflowing. Compact packs ~4-up on a wide panel; the .chipw--wide variant below widens the track
   so long-label lists (e.g. Raman) flow ~2-up with room to breathe. Auto-picked per tab by label
   length (craic_tab_chipwidth_classify), overridable in the editor. */
.tablinks--chips .tabpanel-text ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem;
}
.chipw--wide.tablinks--chips .tabpanel-text ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.tablinks--chips .tabpanel-text li { margin: 0; }
.tablinks--chips .tabpanel-text li > a {
  /* block (not flex) so a long word wraps instead of clipping; arrow pinned right. */
  display: block; position: relative;
  padding: .55rem 1.55rem .55rem .8rem;
  border: 1px solid var(--rule, #dcd7cf); border-radius: var(--radius, 6px);
  background: var(--paper, #fff); text-decoration: none; color: var(--ink, #16181d);
  overflow-wrap: anywhere; hyphens: auto;
}
.tablinks--chips .tabpanel-text li > a::after {
  content: "\203A"; opacity: .55;
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
}
.tablinks--chips .tabpanel-text li > a:hover,
.tablinks--chips .tabpanel-text li > a:focus-visible { border-color: var(--octagon, #4C5993); }

/* Feature list — a "Term: description" list as tidy cards. */
.tabfmt--feature-list .tabpanel-text > ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem;
}
.tabfmt--feature-list .tabpanel-text > ul > li {
  margin: 0; padding: .8rem 1rem;
  border: 1px solid var(--rule, #dcd7cf); border-radius: var(--radius, 6px);
  background: var(--paper, #fff); line-height: 1.5;
}
.tabfmt--feature-list .tabpanel-text > ul > li > strong:first-child { display: block; margin-bottom: .15rem; }
.tabfmt--feature-list .tabpanel-text > ul > li a { color: var(--ink, #16181d); text-decoration: none; }
.tabfmt--feature-list .tabpanel-text > ul > li a:hover { text-decoration: underline; }

/* Flow — feature / short-phrase / mixed lists: accent marker, inline underlined links, no boxes.
   Excludes feature-list (which keeps its cards). */
.tablinks--flow:not(.tabfmt--feature-list) .tabpanel-text li {
  margin: 0 0 .4rem; padding-left: 1.1rem; text-indent: -1.1rem; break-inside: avoid;
}
.tablinks--flow:not(.tabfmt--feature-list) .tabpanel-text li::before {
  content: "\203A\00a0"; color: var(--octagon, #4C5993);
}
.tablinks--flow:not(.tabfmt--feature-list) .tabpanel-text li a {
  color: var(--ink, #16181d); text-decoration: underline;
  text-decoration-color: var(--octagon, #4C5993); text-underline-offset: 2px;
}
/* Multi-column only when the list runs full-width (no photo beside it): compact-note / link-directory. */
.tabfmt--compact-note.tablinks--flow .tabpanel-text ul,
.tabfmt--link-directory.tablinks--flow .tabpanel-text ul {
  column-width: 15rem; column-gap: 2.5rem;
}

/* ---- Narrow container: the two-column templates stack ---------------
   Container-based (not viewport): fires whenever the PANEL is under 34rem —
   a phone, OR a desktop main column that's been squeezed — so text never
   drops below a readable width beside a photo. */
@container craictab (max-width: 34rem) {
  .tabfmt--portrait-feature .tabpanel-media,
  .tabfmt--landscape-feature .tabpanel-media,
  .tabfmt--photo-aside .tabpanel-media {
    float: none; width: auto; max-width: 100%;
    margin: 0 0 var(--space-4, 1.5rem);
  }
  .tabpanel-media img { max-height: 22rem; margin-inline: auto; }
}
/* Fallback for engines without container queries: unfloat at the phone breakpoint. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .tabfmt--portrait-feature .tabpanel-media,
    .tabfmt--landscape-feature .tabpanel-media,
    .tabfmt--photo-aside .tabpanel-media {
      float: none; width: auto; max-width: 100%; margin: 0 0 var(--space-4, 1.5rem);
    }
    .tabpanel-media img { max-height: 22rem; margin-inline: auto; }
  }
}

/* A product Features tab whose body opens with a red standfirst line and a "Key Features*" label
   in the SAME paragraph (…standfirst</span><br><strong>Key Features*</strong>…) rendered them
   touching. Make the standfirst a lead block with space below, and drop the now-redundant <br>. */
.tabpanel-text p > span[style*="red-ink"] {
  display: block; margin-bottom: var(--space-3, 1rem);
  font-size: var(--step-1, 1.2rem); line-height: 1.4; color: var(--red-ink, #b3261e);
}
.tabpanel-text p > span[style*="red-ink"] + br { display: none; }

/* A portrait-feature tab whose body is a flow LIST (a tall product shot + a long spec list) laid
   out with the photo floated leaves the single-column list stranding space to the photo's right.
   Give it two top-aligned columns instead — a MULTI-COLUMN list beside the photo — so the list is
   compact and balanced with the photo. Scoped to .tablinks--flow so the homepage chip tabs (which
   are .tablinks--chips) keep their float layout. */
.tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) {
  display: grid; grid-template-columns: minmax(0, 1fr) min(34%, 18rem);
  gap: var(--space-5, 2rem); align-items: start;
}
.tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) > .tabpanel-media {
  float: none; width: auto; margin: 0; grid-column: 2; grid-row: 1; justify-self: center;
}
.tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) > .tabpanel-text {
  grid-column: 1; grid-row: 1;
}
.tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) .tabpanel-text ul {
  column-width: 13rem; column-gap: 2rem;
}

/* Some imported tab bodies wrap each line in a bare <div> (no margins) instead of <p>/<h>, so a
   bold heading line touches the paragraph under it. Restore the standard spacing so these read the
   same as the <p>/<h> tabs, and drop the empty <figure> left when the image became featured media. */
.tabpanel-text > div { margin: 0 0 var(--space-3, 1rem); }
.tabpanel-text > div:last-child { margin-bottom: 0; }
.tabpanel-text > div > strong:only-child { display: block; }
.tabpanel-text figure:empty { display: none; }