/* ── Scoped port of the "approved campaign concept" (2026-09-09) ──────────
 * The owner's decision (2026-09-15) keeps the WordPress LOOK — hero, header,
 * section order and programme cards are NOT restyled — but customers prefer
 * two pieces of the newer concept: the seasonal-offer slider's savings
 * treatment and localized artwork, and the trainer photo presentation. Both
 * are wired here rather than in site-extra.css so they can be reviewed,
 * extended or reverted as one unit. Every rule below targets a className the
 * matching site-live.js port already writes into the DOM; nothing here
 * changes markup on its own.
 *
 * Uses only variables already defined in main.css's :root (--orange,
 * --surface2, --border, --muted, --white, --radius, --radius-lg,
 * --transition) — no new theme is introduced.
 */

/* ── Offer slider: verified custom-price savings (ported from 3a15f78,
 * 3aca55c) — buildOfferSlide() in site-live.js. ─────────────────────────── */
.campaign-offer__pricing { display: grid; gap: 4px; margin-top: 10px; }
.campaign-offer__old-price { color: var(--muted); font-size: 1rem; text-decoration: line-through; }
.campaign-offer__new-price { color: var(--orange); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 900; line-height: 1; }
.campaign-offer__saving { color: var(--white); font-size: .9rem; font-weight: 800; }
.campaign-offer__vat { color: var(--muted); font-size: .78rem; }
[dir="rtl"] .campaign-offer__pricing { direction: rtl; }

/* ── Assessment form: request-a-callback / book-an-assessment tabs (ported
 * from 572e296, c40604f). The base stylesheet's .assessment-form is a plain
 * flex column, so these panels stack like any other form-field — no grid
 * trick needed the way the full restyle required. ───────────────────────── */
.assessment-form__switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 4px 0 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}
.assessment-form__tab {
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.assessment-form__tab.active { background: var(--orange); color: var(--white); }
.assessment-form__panel { display: flex; flex-direction: column; gap: 16px; }
.assessment-form__panel[hidden] { display: none; }
.assessment-form__panel #assessCoachBox { display: flex; flex-direction: column; gap: 16px; }

/* ── Coach photo presentation (ported from the visual-reference site-extra.css,
 * coach-card rules only — no header/section restyle). A wide photo beside the
 * name/specialty/CTA column reads better with real trainer photographs (most
 * are portrait crops, not the small circular WordPress avatar) than the
 * original 96px circle, which is why customers preferred it in review. ──── */
/* summer.css caps the slider at 720px — right for the old poster-style
 * cards, too narrow for the wide (~3.2:1) banner the owner approved. Widens
 * the shared slider for every slide (curated posters just get more air). */
.summer-slider { max-width: 1100px; }

/* ── Live campaign banner (offer-banner, 2026-09-15) ───────────────────────
 * Replaces the old "card stacked above the poster" generated offer slide
 * (buildCampaignBanner() in site-live.js): a single dark, thin-green-outlined
 * banner with the offer's own photo fading into the text column, matching
 * the reference layout the owner approved 2026-09-15. Every class below is
 * written by the hydrator; nothing here changes markup on its own. Colours:
 * --campaign-green / --campaign-green-line (main.css :root) — every ink
 * combination used here is asserted in scripts/verify-a11y-static.mjs. */
.campaign-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  align-items: stretch;
  min-height: 320px;
  background: var(--campaign-green);
  border: 1px solid var(--campaign-green-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: start;
}

.campaign-banner__content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px 32px;
  min-width: 0;
  z-index: 1;
}

.campaign-banner__photo {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-height: 220px;
  background-image: url('/images/hero-athlete-real.webp');
  background-size: cover;
  background-position: center;
}
/* Fades toward the CONTENT edge (inline-start), never the outer edge — the
   photo must dissolve into the text column, not vanish at the banner's own
   corner. Two physical rules because CSS gradients take no logical keyword.
   Only for the FALLBACK photo (no offer image at all) — an offer's own
   poster (--poster below) must never be faded or overlaid. */
.campaign-banner__photo:not(.campaign-banner__photo--poster)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 38%, var(--campaign-green) 96%);
}
[dir="rtl"] .campaign-banner__photo:not(.campaign-banner__photo--poster)::after {
  background: linear-gradient(to right, transparent 38%, var(--campaign-green) 96%);
}

/* ── A1 poster (owner correction, 2026-09-15): the offer's OWN artwork,
 * shown WHOLE — never cropped, never blurred, never overlaid with text of
 * ours. A dark panel behind it (never the cover-photo background above) with
 * the image centred and scaled to fit by width or height, whichever binds,
 * so the rendered <img> box's own aspect ratio always equals the poster's
 * natural aspect (no forced crop-to-fill, no letterbox math to get wrong). */
.campaign-banner__photo--poster {
  background: #05130d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.campaign-banner__poster-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.campaign-banner__poster-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.campaign-banner__eyebrow {
  margin: 0;
  color: var(--campaign-green-line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.campaign-banner__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.campaign-banner__title-line1 {
  overflow-wrap: anywhere;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: var(--white);
}

/* A2 (owner correction): body-text line for a blanket offer (no linked
 * programmes ⇒ no price tiles) — the offer's own description, or one plain
 * sentence when it has none. Never large/orange — that was the "ugly
 * percentage headline" the owner asked removed. */
.campaign-banner__body {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.campaign-banner__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text);
  font-size: 0.9rem;
}
.campaign-banner__days-left {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-orange, #0A0A0A);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.campaign-banner__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.campaign-banner__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  min-width: 0;
}
.campaign-banner__tile-name {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-banner__tile-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.campaign-banner__tile-old {
  color: var(--text);
  font-size: 0.74rem;
  text-decoration: line-through;
  opacity: 0.75;
}
.campaign-banner__tile-new {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
}
.campaign-banner__tile-save {
  color: var(--campaign-green-line);
  font-size: 0.7rem;
  font-weight: 800;
}
.campaign-banner__more {
  align-self: center;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
}

.campaign-banner__vat {
  margin: 0;
  color: var(--text);
  font-size: 0.74rem;
  opacity: 0.85;
}

.campaign-banner__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.campaign-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .campaign-banner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .campaign-banner__photo {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  /* The fallback cover-photo above is cropped to 16:9 on purpose (it is a
   * decorative, non-text site photo — any crop is fine). An offer's own
   * poster must never be forced into a foreign aspect ratio (A1) — it sizes
   * to the image's own natural aspect, full card width, above the text. */
  .campaign-banner__photo--poster {
    aspect-ratio: auto;
    padding: 12px;
  }
  .campaign-banner__content {
    grid-column: 1;
    grid-row: 2;
    padding: 20px;
  }
  .campaign-banner__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-banner__actions { flex-direction: column; align-items: stretch; }
  .campaign-banner__cta { width: 100%; justify-content: center; }
}

@media (min-width: 700px) {
  .coach-card {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 4px 20px;
    padding: 0 20px 20px 0;
    text-align: start;
  }
  [dir="rtl"] .coach-card { padding: 0 0 20px 20px; }
  .coach-card__avatar {
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 200px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: none;
  }
  [dir="rtl"] .coach-card__avatar { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
  .coach-card__avatar img { object-position: center top; }
  .coach-card__name { align-self: end; margin-top: 16px; }
  .coach-card__specialty { flex: initial; }
  .coach-card__exp { align-self: start; margin-bottom: 0; }
  .coach-card .btn { margin-bottom: 20px; }
}