/* Heart to Heart design system — canonical stylesheet.
 *
 * Source of truth for the claude.ai/design project AND the Rails app
 * (imported into app/assets/stylesheets when the system is applied).
 * Register: liturgical on white — Sacred Heart crimson actions, deep Marian
 * blue accents, thorn gold in small brand moments, bookish serif headings. Audience skews older: large type, high contrast,
 * generous spacing.
 */

/* ---------- Tokens ---------- */

:root {
  /* Brand */
  --crimson: #7c0000;        /* Sacred Heart red — primary actions, headings accent */
  --crimson-deep: #5c0000;   /* hover / pressed */
  --crimson-wash: #f7ecec;   /* tinted background for callouts */
  --gold: #b58f4d;           /* crown-of-thorns gold — borders, highlights, sparingly */
  --gold-soft: #e9dcc3;      /* hairline borders, dividers */
  --gold-deep: #6f5320;      /* readable gold text (episode numbers, etc.) */
  --navy: #142d52;           /* deep Marian blue — links, structural accents */
  --navy-deep: #0d1f3a;      /* hover / pressed */
  --navy-wash: #eaf0f7;      /* tinted background for quiet callouts */

  /* Surfaces & text */
  --page: #ffffff;           /* clean white page background */
  --mist: #f5f4f1;           /* subtle neutral fill for quiet elements */
  --card: #ffffff;
  --ink: #2b2320;            /* warm near-black body text */
  --ink-soft: #6b5e55;       /* secondary text */
  --line: #e5ddd1;           /* default borders */

  /* Feedback */
  --ok: #3e6b3e;
  --ok-wash: #edf3ed;
  --warn: #8a5a19;
  --warn-wash: #f9f1e2;
  --alert: #92322c;
  --alert-wash: #f9ecea;

  /* Type */
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-base: 1.125rem;     /* 18px — legibility first */
  --text-sm: 0.9375rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --leading: 1.65;

  /* Shape & depth */
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(43, 35, 32, 0.06), 0 4px 16px rgba(43, 35, 32, 0.07);
  --shadow-lift: 0 2px 4px rgba(43, 35, 32, 0.08), 0 10px 28px rgba(43, 35, 32, 0.12);

  /* Spacing scale (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
}

/* ---------- Program themes ("content roots") ----------
 * Every program (Discern & Decide, Willig Gospel Teachings, …) gets its own
 * base look while inheriting the H2H bones. Wrap a program's pages/regions in
 * `.h2h-program` and set the --program-* tokens — either with a ready-made
 * theme class (.h2h-program--willig) or inline (style="--program-accent:#5b3d8a").
 * All program-aware components below read these vars, so one scope reskins the
 * whole surface: accents, hero ground, section bands, washes, framing.
 *
 * The tokens default to the crimson/navy/gold base, so an unthemed
 * .h2h-program looks exactly like today. Override only what a program needs. */
.h2h-program {
  --program-accent: var(--crimson);        /* primary action + heading accent */
  --program-accent-deep: var(--crimson-deep);
  --program-accent-wash: var(--crimson-wash);
  --program-accent-ink: #ffffff;           /* text on top of the accent */
  --program-structure: var(--navy);        /* structural links / secondary */
  --program-structure-deep: var(--navy-deep);
  --program-structure-wash: var(--navy-wash);
  --program-crown: var(--gold);            /* the "gold moment" — rules, frames */
  --program-crown-soft: var(--gold-soft);
  --program-crown-ink: var(--gold-deep);
  --program-hero-bg: var(--navy-deep);     /* hero / cover ground */
  --program-hero-ink: #ffffff;
  --program-band: var(--mist);             /* quiet section band ground */
  --program-surface: var(--card);
  --program-display: var(--font-serif);    /* a program may swap its display face */
}

/* Ready-made program themes — set data-program on the .h2h-program scope,
 * e.g. <section class="h2h-program" data-program="lent">. These follow the
 * colours of the liturgical year, so a series is dressed by its season:
 * violet in Advent, a deeper violet in Lent, gold at Christmas and Easter,
 * green in Ordinary Time. The page stays white throughout — only accents,
 * washes, and hero grounds change. */
.h2h-program[data-program="advent"] {   /* violet — waiting, with a blue cast */
  --program-accent: #5b3d8a; --program-accent-deep: #45306b; --program-accent-wash: #efeaf6;
  --program-structure: #4a3a78; --program-structure-deep: #372a5c; --program-structure-wash: #eeecf7;
  --program-hero-bg: #362552;
}
.h2h-program[data-program="lent"] {     /* violet — penitential, deeper and redder than Advent */
  --program-accent: #6b2d6b; --program-accent-deep: #501f50; --program-accent-wash: #f3ecf3;
  --program-structure: #5a2b52; --program-structure-deep: #421f3c; --program-structure-wash: #f2eaf0;
  --program-hero-bg: #3a1d38;
}
.h2h-program[data-program="christmas"] { /* white & gold — the feast */
  --program-accent: #8a6a2f; --program-accent-deep: #6f5320; --program-accent-wash: #faf4e6;
  --program-structure: var(--navy); --program-structure-deep: var(--navy-deep); --program-structure-wash: var(--navy-wash);
  --program-crown: #c8a05c; --program-crown-ink: #6f5320;
  --program-hero-bg: #1d2c46;
}
.h2h-program[data-program="easter"] {   /* white & gold — festal, brighter than Christmas */
  --program-accent: #9c7420; --program-accent-deep: #7c5b16; --program-accent-wash: #fdf6e4;
  --program-structure: #8a6a2f; --program-structure-deep: #6f5320; --program-structure-wash: #faf4e6;
  --program-crown: #d9b567; --program-crown-ink: #6f5320;
  --program-hero-bg: #4a3410;
}
.h2h-program[data-program="ordinary"] { /* the green of growth */
  --program-accent: #2f6b3a; --program-accent-deep: #234f2c; --program-accent-wash: #eaf3ec;
  --program-structure: #2f6b3a; --program-structure-deep: #234f2c; --program-structure-wash: #eaf3ec;
  --program-hero-bg: #1d3f26;
}
.h2h-program[data-program="sparough"] { /* not liturgical — Fr. Michael's deep Marian blue */
  --program-accent: #1d3f6b; --program-accent-deep: #142d52; --program-accent-wash: #e9eff7;
  --program-structure: #1d3f6b; --program-structure-deep: #142d52; --program-structure-wash: #e9eff7;
  --program-hero-bg: #142d52;
}
.h2h-program[data-program="willig"] {   /* not liturgical — the house Sacred Heart red */
  --program-accent: var(--crimson); --program-accent-deep: var(--crimson-deep); --program-accent-wash: var(--crimson-wash);
  --program-structure: var(--crimson); --program-structure-deep: var(--crimson-deep); --program-structure-wash: var(--crimson-wash);
  --program-hero-bg: var(--crimson);
}

/* Program-aware helpers — same look as the base classes but keyed to the
 * active content root. Use inside a .h2h-program scope. */
.h2h-program .h2h-btn--program { background: var(--program-accent); color: var(--program-accent-ink); }
.h2h-program .h2h-btn--program:hover { background: var(--program-accent-deep); color: var(--program-accent-ink); }

.h2h-prg-hero { background: var(--program-hero-bg); color: var(--program-hero-ink); }
.h2h-prg-hero h1, .h2h-prg-hero h2, .h2h-prg-hero p { color: var(--program-hero-ink); }
.h2h-prg-band { background: var(--program-band); }
.h2h-prg-rule { width: 3rem; height: 3px; background: var(--program-crown); border-radius: 2px; }
.h2h-prg-eyebrow { color: var(--program-crown-ink); }
.h2h-prg-accent { color: var(--program-accent); }
.h2h-prg-structure { color: var(--program-structure); }
.h2h-prg-frame { padding: 6px; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--program-crown), var(--program-crown-soft)); box-shadow: var(--shadow); }
.h2h-prg-edge { border-left: 4px solid var(--program-accent); }
.h2h-program .h2h-display { font-family: var(--program-display); }

/* ---------- Base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover { color: var(--navy-deep); }

.h2h-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--sp-2);
}

.h2h-muted { color: var(--ink-soft); }
.h2h-small { font-size: var(--text-sm); }

/* ---------- Layout shell ---------- */

/* Narrow is for a single form — a sign-in box, a gift amount — where a wide
 * column would just stretch one field across a desk. Everything else should
 * use the screen. */
.h2h-shell { max-width: 46rem; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.h2h-shell--wide { max-width: 84rem; }
/* Admin is tables and rows of controls; it wants the whole window. */
.h2h-admin.h2h-shell, .h2h-admin.h2h-shell--wide { max-width: 96rem; }

/* Site copy, grouped by the part of the site it appears on. The jump row is
 * the whole reason the page is usable at a hundred blocks. */
.ac-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-6);
  position: sticky; top: 0; background: var(--page); padding: var(--sp-3) 0; z-index: 2; }
.ac-jump a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--text-sm);
  text-decoration: none; color: var(--ink); }
.ac-jump a:hover { border-color: var(--crimson); color: var(--crimson); }
.ac-jump__count { color: var(--ink-soft); font-size: .8rem; }
.ac-section { scroll-margin-top: 9rem; margin-bottom: var(--sp-6); }
.ac-section__head { border-top: 2px solid var(--line); padding-top: var(--sp-3); margin-bottom: var(--sp-4); }
.ac-section__head h2 { margin: 0 0 var(--sp-1); }
.ac-section__head p { margin: 0; max-width: 60rem; }
.ac-section__top { text-align: right; font-size: var(--text-sm); }
.ac-block__hint { margin-bottom: var(--sp-2); }
/* The gathering-copy map. */
.gc-list { margin: 0; padding-left: 1.1rem; }
.gc-list li { margin-bottom: .25rem; }
.gc-list code { font-size: var(--text-sm); }
.gc-passage__head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.gc-passage__head p { margin: .15rem 0 0; }
.gc-passage__body { border-left: 3px solid var(--line); padding-left: var(--sp-4);
  color: var(--ink-soft); font-size: var(--text-sm); }
.gc-passage__body p { margin: 0 0 .5rem; }
.gc-tier-label { margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; }
.gc-block { align-items: flex-start; }
.gc-block__lock { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.gc-passage__override { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.gc-passage__override summary { cursor: pointer; color: var(--ink-soft); }
.gc-passage__override[open] summary { color: var(--warn); font-weight: 600; }

.ac-block__flag { display: inline-block; margin-left: var(--sp-2); padding: .1rem .5rem;
  border-radius: 999px; background: var(--warn-wash); color: var(--warn);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Header search panel — the Search link drops a small search surface under
 * the nav instead of navigating away, so you can look something up from
 * wherever you are and stay put. */
.h2h-search { position: relative; }
.h2h-search__panel {
  position: absolute; top: calc(100% + var(--sp-3)); right: 0; z-index: 40;
  width: min(34rem, calc(100vw - 2rem));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: var(--sp-4);
}
.h2h-search__panel[hidden] { display: none; }
/* Outranks the .h2h-header nav form rule that keeps the sign-out button inline. */
.h2h-search .h2h-search__form { display: flex; gap: var(--sp-2); align-items: center; margin: 0; }
.h2h-search__form .h2h-input { flex: 1; min-width: 0; }
/* Results scroll inside the panel — a passage with thirty hits must not run
 * the panel off the bottom of the screen. */
.h2h-search__results { margin-top: var(--sp-3); max-height: min(26rem, 55vh); overflow-y: auto; }
.h2h-search__results .sr-list { gap: var(--sp-2); }
.h2h-search__results .sr-card { padding: var(--sp-3); }

.h2h-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border-bottom: 1px solid var(--gold-soft);
}

.h2h-header img { height: 44px; width: auto; }

.h2h-header nav { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--text-sm); }

/* ---------- Buttons ---------- */

.h2h-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.h2h-btn--primary { background: var(--crimson); color: #fff; }
.h2h-btn--primary:hover { background: var(--crimson-deep); color: #fff; }

.h2h-btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.h2h-btn--secondary:hover { background: var(--navy-wash); color: var(--navy-deep); }

.h2h-btn--quiet { background: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 0.75rem 0.5rem; }
.h2h-btn--quiet:hover { color: var(--ink); }

.h2h-btn--lg { font-size: var(--text-lg); padding: 0.9rem 2rem; }

/* ---------- Forms ---------- */

.h2h-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }

.h2h-label { font-weight: 600; font-size: var(--text-sm); }

.h2h-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  width: 100%;
}

.h2h-input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}

.h2h-inline-form { display: flex; gap: var(--sp-3); align-items: stretch; flex-wrap: wrap; }
.h2h-inline-form .h2h-input { flex: 1 1 16rem; }

/* ---------- Cards ---------- */

.h2h-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-5);
}

/* Pricing */

.h2h-price-card { position: relative; }

.h2h-price-card--featured {
  border: 2px solid var(--crimson);
  box-shadow: var(--shadow-lift);
}

.h2h-flag {
  position: absolute;
  top: -0.85rem;
  left: var(--sp-5);
  background: var(--crimson);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.h2h-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }

.h2h-price {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.h2h-price small { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft); }

.h2h-checklist { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.h2h-checklist li { padding-left: 1.6rem; position: relative; margin-bottom: var(--sp-2); }
.h2h-checklist li::before { content: "✦"; position: absolute; left: 0.15rem; color: var(--gold); }

/* ---------- Episode list ---------- */

.h2h-episodes { list-style: none; margin: 0; padding: 0; counter-reset: episode; }

.h2h-episode {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}

.h2h-episode__num {
  counter-increment: episode;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  background: var(--gold-soft);
  color: var(--gold-deep);
}

.h2h-episode__num::before { content: counter(episode); }

.h2h-episode__title { flex: 1; font-weight: 600; }
.h2h-episode__title a { text-decoration: none; color: var(--ink); }
.h2h-episode__title a:hover { color: var(--navy); }

.h2h-episode--done { border-left: 4px solid var(--ok); }
.h2h-episode--done .h2h-episode__num { background: var(--ok-wash); color: var(--ok); }
.h2h-episode--done .h2h-episode__num::before { content: "✓"; }

.h2h-episode--locked { opacity: 0.6; }
.h2h-episode--locked .h2h-episode__num { background: var(--page); color: var(--ink-soft); }

.h2h-badge {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.h2h-badge--done { background: var(--ok-wash); color: var(--ok); }
.h2h-badge--progress { background: var(--warn-wash); color: var(--warn); }
.h2h-badge--locked { background: var(--page); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------- Status banners ---------- */

.h2h-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border: 1px solid;
}

.h2h-banner--ok { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); }
.h2h-banner--warn { background: var(--warn-wash); border-color: var(--warn); color: var(--warn); }
.h2h-banner--alert { background: var(--alert-wash); border-color: var(--alert); color: var(--alert); }
.h2h-banner--invite { background: var(--navy-wash); border-color: var(--navy); color: var(--ink); }

.h2h-banner strong { font-weight: 700; }

/* ---------- Player ---------- */

.h2h-player {
  position: relative;
  padding-top: 56.25%;
  background: #1c1512;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  margin-bottom: var(--sp-5);
}

.h2h-player iframe, .h2h-player__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.h2h-player__placeholder {
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}

.h2h-episode-nav { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--text-sm); }

/* ---------- Email ---------- */
/* Emails inline these values (no external CSS in mail clients); the classes
 * here document the canonical email look for the design system. */

.h2h-email-wrap { background: var(--page); padding: var(--sp-6) var(--sp-4); }

.h2h-email-card {
  max-width: 33rem;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6);
}

.h2h-email-footer {
  max-width: 33rem;
  margin: var(--sp-4) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* ---------- Imagery ---------- */
/* Drop real photos in via <img>; the wrappers give consistent framing,
 * ratio, and the liturgical gold/navy treatments. Always set alt text. */

.h2h-figure { margin: 0 0 var(--sp-5); }

/* Ratio boxes — put an <img> (object-fit: cover) or iframe as the only child. */
.h2h-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--mist);
}
.h2h-media > img,
.h2h-media > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.h2h-media--16x9 { padding-top: 56.25%; }
.h2h-media--4x3  { padding-top: 75%; }
.h2h-media--1x1  { padding-top: 100%; }
.h2h-media--3x4  { padding-top: 133.33%; }

/* Plain responsive image (no fixed ratio) */
.h2h-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

.h2h-caption {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  font-style: italic;
}
.h2h-caption cite { font-style: normal; font-weight: 600; color: var(--ink); }

/* Gold-framed portrait — for the saint art / narrator headshots */
.h2h-portrait {
  border-radius: var(--radius-lg);
  padding: 6px;
  background: var(--gold-soft);
  box-shadow: var(--shadow);
}
.h2h-portrait .h2h-media,
.h2h-portrait .h2h-img { border-radius: 8px; }

/* Cover / hero — image with a legible text overlay */
.h2h-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 22rem;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-lift);
}
.h2h-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.h2h-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13,31,58,0) 30%, rgba(13,31,58,0.82) 100%);
}
.h2h-cover__body { position: relative; z-index: 2; padding: var(--sp-6) var(--sp-6); color: #fff; }
.h2h-cover__body h1,
.h2h-cover__body h2,
.h2h-cover__body p { color: #fff; }
.h2h-cover__body .h2h-eyebrow { color: var(--gold-soft); }
.h2h-cover--tall { min-height: 30rem; }

/* Full-bleed band that sits a photo behind quiet text (about / mission) */
.h2h-imgband {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.h2h-imgband .h2h-media { border-radius: 0; height: 100%; padding-top: 0; }
.h2h-imgband__text { padding: var(--sp-6) var(--sp-6); background: var(--card); align-self: center; }
@media (max-width: 640px) { .h2h-imgband { grid-template-columns: 1fr; } }