/* subscription — "Save up to $236 a year with a TUDO subscription" (brief/subscription.md)
   Figma: desktop 1817:4821 (1920 x 890) · mobile 1817:5507 (390 x 1133).
   Pattern A (D-SU-1): `.subscription.container` paints its own off-white bg; inline gutter = .container --gutter;
   vertical padding as LONGHANDS only.
   Mobile-first: base = mobile (390 anchor) · 768–1023 pseudo-tablet (split row, 5fr : 8fr) · 1024+ desktop (vw-base 1920).
   Δ = (var(--max-vw) - 390px) * 0.015 · T = (var(--max-vw) - 768px) * 0.025 · s = var(--max-vw) / var(--vw-base) */

/* ============ MOBILE (base) ============ */
.subscription {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 80px);
  padding-top: clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 80px);
  padding-bottom: clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 80px);
  background-color: var(--color-off-white);
  color: var(--color-ink);
}

/* ---- image (art-directed <picture>, BA-SU-1 / D-SU-3) ---- */
.subscription__media {
  display: block;
  width: 100%;
}
.subscription__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---- panel ---- */
.subscription__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 40px);
  width: 100%;
  min-width: 0;
}

/* ---- title + inline badge (D-SU-2) ---- */
.subscription__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-ink);
}
.subscription__br { display: none; }

.subscription__badge {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  height: 1.1563em;          /* 37 @32 */
  margin-top: -0.125em;      /* box starts 4px above the line top */
  padding-top: 0.0938em;     /* 3 — glyphs share the title baseline */
  padding-inline: 0.25em;    /* 8 */
  background-color: var(--color-accent);
  color: var(--color-white);
  line-height: inherit;
  text-align: center;
}
.subscription__badge-text { display: inline; }

/* ---- bundle (list + CTA) ---- */
.subscription__bundle {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
}
.subscription__list {
  display: flex;
  flex-direction: column;
}

.subscription__list-head {
  display: flex;
  align-items: center;
  height: clamp(54px, calc(66px + (var(--max-vw) - 390px) * 0.015), 66px);
  border-bottom: var(--stroke-rule);
}
.subscription__list-title,
.subscription__total-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  color: var(--color-ink);
}
.subscription__list-title { width: 100%; }

.subscription__rows {
  display: flex;
  flex-direction: column;
}
.subscription__row {
  display: flex;
  align-items: center;
  gap: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 40px);
  padding-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  padding-bottom: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.subscription__row-label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: var(--weight-regular);
}
.subscription__row-value {
  flex: none;
  margin: 0;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-align: right;
}

/* ---- Total row (D-SU-5: wraps the price group to a right-aligned 2nd line when it cannot fit) ---- */
.subscription__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 40px);
  row-gap: 4px;
  padding-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  padding-bottom: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 20px);
  border-top: var(--stroke-rule);
}
.subscription__total-label {
  flex: 1 0 auto;
}
.subscription__price {
  display: flex;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(5px, calc(6px + (var(--max-vw) - 390px) * 0.015), 8px);
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  white-space: nowrap;
  color: var(--color-ink);
}
.subscription__price-old {
  color: var(--color-ink-40);
  text-decoration: line-through;
}
.subscription__price-new strong { font-weight: var(--weight-medium); }

/* ---- CTA block ---- */
.subscription__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  width: 100%;
}
.subscription__cta {
  display: flex;
  width: 100%;
  /* site .btn = 16 padding + 1px border → 58 with the 24px icon; Figma draws 56 (16 + 24 + 16, no stroke) */
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: clamp(12px, calc(15px + (var(--max-vw) - 390px) * 0.015), 15px);
  line-height: var(--lh-button);
  letter-spacing: 0.0467em;
}
.subscription__note {
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-tag-label);
  line-height: var(--lh-tag-label);
  letter-spacing: var(--ls-tag-label);
  text-transform: uppercase;
  color: var(--color-ink);
}
.subscription__note-text { white-space: nowrap; }

/* ============ PSEUDO-TABLET (768–1023): split row from 768, image | panel = 5 : 8 ============ */
@media (min-width: 768px) {
  .subscription {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 80px);
    padding-top: clamp(53.66px, calc(53.66px + (var(--max-vw) - 768px) * 0.025), 80px);
    padding-bottom: clamp(53.66px, calc(53.66px + (var(--max-vw) - 768px) * 0.025), 80px);
  }
  /* image stretches to the panel height (portrait centre crop of the MOBILE photo — BA-SU-1, D-SU-8) */
  .subscription__media {
    position: relative;
    flex: 5 1 0;
    min-width: 0;
    width: auto;
  }
  .subscription__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 50%;
  }
  .subscription__panel {
    flex: 8 1 0;
    width: auto;
    gap: clamp(21.66px, calc(21.66px + (var(--max-vw) - 768px) * 0.025), 40px);
  }
  .subscription__bundle { gap: 20px; }
  .subscription__list-head { height: 66px; }
  .subscription__row {
    gap: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .subscription__total {
    column-gap: clamp(21.66px, calc(21.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .subscription__price { gap: 8px; }
  .subscription__cta-block { gap: 16px; }
  .subscription__cta { font-size: 15px; }
}

/* ============ DESKTOP (1024+): image 730 | gap 80 | panel 630, top-aligned ============ */
@media (min-width: 1024px) {
  .subscription {
    align-items: flex-start;
    gap: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    padding-top: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
    padding-bottom: clamp(43px, calc(80px * (var(--max-vw) / var(--vw-base))), 80px);
  }
  .subscription__media {
    position: static;
    flex: none;
    width: clamp(389px, calc(730px * (var(--max-vw) / var(--vw-base))), 730px);
  }
  .subscription__image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .subscription__panel {
    flex: 1 1 0;
    gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
  }
  .subscription__br { display: inline; }

  .subscription__badge {
    height: 1em;               /* 48 */
    margin-top: -0.0833em;     /* −4 */
    padding-top: 0.0729em;     /* 3.5 */
    padding-inline: 0.25em;    /* 12 */
    min-width: 2.6042em;       /* drawn fixed 125 */
  }

  .subscription__bundle { gap: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px); }
  .subscription__list-head { height: clamp(35px, calc(66px * (var(--max-vw) / var(--vw-base))), 66px); }
  .subscription__row {
    gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    padding-top: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    padding-bottom: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  }
  .subscription__total {
    column-gap: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
    padding-top: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    padding-bottom: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  }
  /* both halves flex: 1 (Figma 295 | 295) — prices right-aligned in the right half */
  .subscription__total-label { flex: 1 1 0; min-width: 0; }
  .subscription__price {
    flex: 1 1 0;
    gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px);
  }
  .subscription__cta-block { gap: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px); }
  .subscription__cta { font-size: clamp(8px, calc(15px * (var(--max-vw) / var(--vw-base))), 15px); }
}