/* ============================================================
   Topic page — adventure / beaches / hotels / etc.
   Kayak-quality category landing for one topic in one country.
   Layout-level styling only — cards / chips / callouts /
   tables / FAQ / breadcrumbs / buttons live in components/.
   ============================================================ */

.otg-topic-page {
  background: var(--otg-bg);
  color: var(--otg-text-primary);
}

/* ---------- Page shell — single centred column ---------- */
.otg-topic-shell {
  max-width: var(--otg-container-lg);
  margin: 0 auto;
  padding: 0 var(--otg-gutter);
}

/* ---------- Breadcrumb row ---------- */
.otg-topic-breadcrumbs {
  padding-top: var(--otg-page-top);
  padding-bottom: var(--otg-space-3);
}

/* ---------- Page head (eyebrow + H1 + lede) ---------- */
.otg-topic-head {
  padding: var(--otg-space-4) 0 var(--otg-space-7);
  border-bottom: 1px solid var(--otg-border);
  margin-bottom: var(--otg-space-8);
}

.otg-topic-head__eyebrow {
  display: block;
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-3) 0;
}

.otg-topic-head__title {
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-display-lg);
  line-height: var(--otg-leading-display-lg);
  font-weight: var(--otg-weight-semibold);
  letter-spacing: var(--otg-tracking-display);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-4) 0;
  max-width: 40ch;
}

.otg-topic-head__lede {
  font-size: var(--otg-text-body-lg);
  line-height: var(--otg-leading-body-lg);
  color: var(--otg-text-secondary);
  margin: 0;
  max-width: var(--otg-container-prose);
}

/* ---------- Article container ----------
   Fills the shell — prose width is reapplied per-element so
   long-form paragraphs stay readable. Grid-driven sections
   (cards, tiers, severity rows, meta strips) get the full
   width they need. */
.otg-topic-article {
  max-width: none;
  margin: 0 auto;
  padding-bottom: var(--otg-space-9);
}

.otg-topic-article > * + * { margin-top: var(--otg-space-8); }

/* Per-element prose caps inside the now-full-width article. */
.otg-topic-article .otg-topic-intro,
.otg-topic-article .otg-topic-section__lede,
.otg-topic-article .otg-topic-head__lede {
  max-width: var(--otg-container-prose);
}
.otg-topic-article .otg-topic-section > p { max-width: 72ch; }

/* ---------- Intro prose under hero ---------- */
.otg-topic-intro {
  max-width: var(--otg-container-prose);
}

.otg-topic-intro p {
  font-size: var(--otg-text-body-lg);
  line-height: var(--otg-leading-body-lg);
  color: var(--otg-text-secondary);
  margin: 0;
}

.otg-topic-intro p + p { margin-top: var(--otg-space-4); }

/* ---------- Topic section ---------- */
.otg-topic-section {
  padding: 0;
}

.otg-topic-section > * + * { margin-top: var(--otg-space-5); }

.otg-topic-section__heading {
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-display-md);
  line-height: var(--otg-leading-display-md);
  font-weight: var(--otg-weight-semibold);
  letter-spacing: var(--otg-tracking-display);
  color: var(--otg-text-primary);
  margin: 0;
}

.otg-topic-section__lede {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
  max-width: var(--otg-container-prose);
  margin: 0;
}

.otg-topic-section__subheading {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: var(--otg-space-7) 0 var(--otg-space-4);
}

/* ---------- Grid: 3-up desktop / 2-up tablet / 1-up mobile ---------- */
.otg-topic-grid {
  display: grid;
  gap: var(--otg-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .otg-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .otg-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.otg-topic-grid--2 {
  display: grid;
  gap: var(--otg-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .otg-topic-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.otg-topic-grid--4 {
  display: grid;
  gap: var(--otg-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .otg-topic-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .otg-topic-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Card link wrapper (preserves card behaviour) ---------- */
.otg-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.otg-card-link:focus-visible {
  outline: 3px solid var(--otg-focus-ring);
  outline-offset: 2px;
  border-radius: var(--otg-radius);
}

/* ---------- Stats / facts grid ---------- */
.otg-topic-stats {
  display: grid;
  gap: var(--otg-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .otg-topic-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.otg-topic-stat {
  padding: var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

.otg-topic-stat__label {
  display: block;
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-stat__value {
  display: block;
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0;
}

/* ---------- Numbered list (Top N items) ---------- */
.otg-topic-numbered {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.otg-topic-numbered__item {
  display: flex;
  gap: var(--otg-space-5);
  padding: var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--otg-duration-3) var(--otg-ease),
              transform var(--otg-duration-3) var(--otg-ease),
              box-shadow var(--otg-duration-3) var(--otg-ease);
}

a.otg-topic-numbered__item:hover {
  border-color: var(--otg-border-strong);
  box-shadow: var(--otg-shadow-hover);
  transform: translateY(-2px);
}

.otg-topic-numbered__rank {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--otg-surface-sunken);
  border-radius: var(--otg-radius);
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
}

.otg-topic-numbered__body { flex: 1 1 auto; min-width: 0; }

.otg-topic-numbered__title {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-numbered__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-3);
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-numbered__desc {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
  margin: 0;
}

.otg-topic-numbered__note {
  margin-top: var(--otg-space-3);
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
}

/* ---------- Card body extras (price / rating / tags) ---------- */
.otg-card__body { padding: var(--otg-space-5); }

.otg-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-3);
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
  margin: 0;
}

.otg-card-meta > * + *::before {
  content: "·";
  margin-right: var(--otg-space-3);
  color: var(--otg-text-muted);
}

.otg-price,
.otg-price-range {
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-primary);
}

.otg-rating {
  color: var(--otg-text-secondary);
  font-variant-numeric: tabular-nums;
}

.otg-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-2);
  margin-top: var(--otg-space-2);
}

.otg-card-tip {
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-secondary);
  padding: var(--otg-space-3) 0 0 0;
  border-top: 1px solid var(--otg-border);
  margin-top: var(--otg-space-3);
}

.otg-card-tip strong {
  color: var(--otg-text-primary);
  font-weight: var(--otg-weight-medium);
}

.otg-card-address {
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
  margin-top: var(--otg-space-2);
}

/* ---------- Booking CTA inside a card ---------- */
.otg-card-booking-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--otg-space-4);
  padding: 10px 16px;
  background: transparent;
  color: var(--otg-text-primary);
  border: 1px solid var(--otg-border-strong);
  border-radius: var(--otg-radius);
  font-family: var(--otg-font-sans);
  font-size: 13px;
  font-weight: var(--otg-weight-medium);
  text-decoration: none;
  transition: background-color var(--otg-duration-2) var(--otg-ease),
              border-color var(--otg-duration-2) var(--otg-ease),
              color var(--otg-duration-2) var(--otg-ease);
}

.otg-card-booking-cta:hover {
  background: var(--otg-surface-sunken);
  border-color: var(--otg-text-primary);
  color: var(--otg-text-primary);
}

/* ---------- Tier / category section (luxury / mid / budget hotels) ---------- */
.otg-topic-tier {
  padding: var(--otg-space-6) 0 0;
}

.otg-topic-tier + .otg-topic-tier {
  margin-top: var(--otg-space-6);
  border-top: 1px solid var(--otg-border);
}

.otg-topic-tier__heading {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-5) 0;
}

.otg-topic-tier__lede {
  font-size: var(--otg-text-body);
  color: var(--otg-text-secondary);
  margin: 0 0 var(--otg-space-5) 0;
  max-width: var(--otg-container-prose);
}

/* ---------- Tips list (vertical column of callouts) ---------- */
.otg-topic-tips {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-4);
}

.otg-topic-tips .otg-callout { margin: 0; }

/* ---------- Definition / two-column key-value list ---------- */
.otg-topic-deflist {
  display: grid;
  gap: var(--otg-space-3) var(--otg-space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

@media (min-width: 640px) {
  .otg-topic-deflist {
    grid-template-columns: minmax(160px, 200px) 1fr;
  }
}

.otg-topic-deflist dt {
  font-size: var(--otg-text-small);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
}

.otg-topic-deflist dd {
  margin: 0;
  font-size: var(--otg-text-body);
  color: var(--otg-text-primary);
}

/* ---------- Two-column do/don't lists ---------- */
.otg-topic-do-dont {
  display: grid;
  gap: var(--otg-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .otg-topic-do-dont { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.otg-topic-do-dont__col {
  padding: var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

.otg-topic-do-dont__heading {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-3) 0;
}

.otg-topic-do-dont__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-2);
}

.otg-topic-do-dont__list li {
  position: relative;
  padding-left: var(--otg-space-5);
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
}

.otg-topic-do-dont__list li::before {
  content: "·";
  position: absolute;
  left: var(--otg-space-2);
  top: 0;
  color: var(--otg-text-muted);
  font-weight: var(--otg-weight-semibold);
}

/* ---------- Difficulty / severity rows ---------- */
.otg-topic-severity {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-3);
}

.otg-topic-severity__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--otg-space-4);
  padding: var(--otg-space-4) var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-left: 3px solid var(--otg-accent);
  border-radius: 0 var(--otg-radius) var(--otg-radius) 0;
}

.otg-topic-severity__label {
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-secondary);
  align-self: center;
}

.otg-topic-severity__body {
  font-size: var(--otg-text-body);
  color: var(--otg-text-primary);
  margin: 0;
}

.otg-topic-severity__item--low { border-left-color: var(--otg-border-strong); }
.otg-topic-severity__item--medium { border-left-color: var(--otg-warning); }
.otg-topic-severity__item--high { border-left-color: var(--otg-danger); }
.otg-topic-severity__item--critical {
  border-left-color: var(--otg-danger);
  background: var(--otg-surface-sunken);
}

/* ---------- Phrase / vocabulary list ---------- */
.otg-topic-phrases {
  display: grid;
  gap: var(--otg-space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .otg-topic-phrases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.otg-topic-phrase {
  padding: var(--otg-space-4);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

.otg-topic-phrase__native {
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-1) 0;
}

.otg-topic-phrase__english {
  font-size: var(--otg-text-small);
  color: var(--otg-text-secondary);
  margin: 0;
}

.otg-topic-phrase__pronunciation {
  font-size: var(--otg-text-small);
  font-style: italic;
  color: var(--otg-text-muted);
  margin-top: var(--otg-space-1);
}

/* ---------- Monthly weather grid ---------- */
.otg-topic-months {
  display: grid;
  gap: var(--otg-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .otg-topic-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .otg-topic-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.otg-topic-month {
  padding: var(--otg-space-4);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

.otg-topic-month__name {
  font-size: var(--otg-text-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-month__temp {
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0;
}

.otg-topic-month__note {
  font-size: var(--otg-text-small);
  color: var(--otg-text-secondary);
  margin-top: var(--otg-space-1);
}

/* ---------- Info / advisory block ---------- */
.otg-topic-advisory {
  padding: var(--otg-space-6);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-left: 4px solid var(--otg-accent);
  border-radius: 0 var(--otg-radius) var(--otg-radius) 0;
}

.otg-topic-advisory__label {
  font-size: var(--otg-text-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-secondary);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-advisory__level {
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-3) 0;
}

.otg-topic-advisory__body {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
  margin: 0;
}

.otg-topic-advisory__date {
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
  margin-top: var(--otg-space-3);
}

/* ---------- Final CTA — Get the guide ---------- */
.otg-topic-final-cta {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-4);
  align-items: flex-start;
  padding: var(--otg-space-7);
  background: var(--otg-surface-sunken);
  border-radius: var(--otg-radius);
}

@media (min-width: 768px) {
  .otg-topic-final-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--otg-space-6);
  }
}

.otg-topic-final-cta__body {
  flex: 1 1 auto;
  min-width: 0;
}

.otg-topic-final-cta__heading {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-2) 0;
}

.otg-topic-final-cta__copy {
  font-size: var(--otg-text-body);
  color: var(--otg-text-secondary);
  margin: 0;
  max-width: var(--otg-container-prose);
}

/* ---------- Related topics footer ---------- */
.otg-topic-related {
  margin-top: var(--otg-space-8);
  padding-top: var(--otg-space-7);
  border-top: 1px solid var(--otg-border);
}

.otg-topic-related__heading {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-4) 0;
}

.otg-topic-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-2) var(--otg-space-3);
}

.otg-topic-related__list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-small);
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-secondary);
  text-decoration: none;
  transition: border-color var(--otg-duration-2) var(--otg-ease),
              color var(--otg-duration-2) var(--otg-ease),
              background-color var(--otg-duration-2) var(--otg-ease);
}

.otg-topic-related__list a:hover {
  border-color: var(--otg-text-primary);
  color: var(--otg-text-primary);
  background: var(--otg-surface-sunken);
}

/* ---------- FAQ wrapper heading ---------- */
.otg-topic-faq__heading {
  font-family: var(--otg-font-display);
  font-size: var(--otg-text-display-md);
  line-height: var(--otg-leading-display-md);
  font-weight: var(--otg-weight-semibold);
  letter-spacing: var(--otg-tracking-display);
  color: var(--otg-text-primary);
  margin: 0 0 var(--otg-space-5) 0;
}

/* ---------- Gallery / multi-image rail (sparingly used) ---------- */
.otg-topic-rail {
  display: grid;
  gap: var(--otg-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .otg-topic-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .otg-topic-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobile-first prose tightening for cards in topic pages ---------- */
@media (max-width: 640px) {
  .otg-topic-head__title { letter-spacing: var(--otg-tracking-tight); }
  .otg-topic-section__heading { font-size: 1.5rem; line-height: 1.25; }
  .otg-topic-numbered__item { padding: var(--otg-space-4); gap: var(--otg-space-3); }
  .otg-topic-numbered__rank { width: 32px; height: 32px; font-size: 1rem; }
  .otg-topic-severity__item { grid-template-columns: 90px 1fr; padding: var(--otg-space-3) var(--otg-space-4); }
}

/* ============================================================
   Superwide refinement — Tier 2 (1440+), Tier 4 (1920+),
   Tier 5 (2560+). Additive only; mobile/tablet/desktop tiers
   below 1440px stay byte-equivalent. Spec: docs/specs/theme/
   static-site/07-RESPONSIVE.md §7.3.
   ============================================================ */

/* Tier 2 — 1440px+ : container widens, +1 grid col.
   Horizontal padding is the shared fluid --otg-gutter (set once above). */
@media (min-width: 1440px) {
  .otg-topic-shell {
    max-width: var(--otg-container-xl);
  }
  .otg-topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .otg-topic-grid--4 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .otg-topic-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .otg-topic-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .otg-topic-phrases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tier 3 — 1680px+ : container ladder step (1600px) */
@media (min-width: 1680px) {
  .otg-topic-shell { max-width: 1600px; }
}

/* Tier 4 — 1920px+ : container widens further, gutters bump,
   +2 grid col vs base, months become one-per-month */
@media (min-width: 1920px) {
  .otg-topic-shell {
    max-width: var(--otg-container-2xl);
  }
  .otg-topic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .otg-topic-grid--4 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .otg-topic-months { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .otg-topic-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .otg-topic-phrases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tier 5 — 2560px+ : final container step */
@media (min-width: 2560px) {
  .otg-topic-shell { max-width: var(--otg-container-3xl); }
}

/* ============================================================
   Beaches page chrome — additive, scoped via .otg-topic-page
   parent. Reuses .otg-topic-section, .otg-topic-stats,
   .otg-topic-numbered, .otg-topic-grid, .otg-callout, .otg-faq,
   .otg-chip from the existing system. Tokens only.
   ============================================================ */

/* ---------- Article width modifier ----------
   The default .otg-topic-article caps at 880px (prose-led pages).
   Pages with wide grids (beaches: quick-facts strip, 4-col practical,
   6-col packing, 4-col safety) opt in to --wide which removes the
   cap and lets sections fill the shell. Reading widths are
   re-applied per-element on prose. */
.otg-topic-article--wide {
  max-width: none;
}
.otg-topic-article--wide > * { max-width: none; }
.otg-topic-article--wide .otg-topic-intro,
.otg-topic-article--wide .otg-topic-section__lede,
.otg-topic-article--wide .otg-topic-head__lede {
  max-width: var(--otg-container-prose);
}
.otg-topic-article--wide .otg-topic-section > p {
  max-width: 68ch;
}

/* Section heading group (heading + lede share an aligned block) */
.otg-topic-section__head {
  margin: 0 0 var(--otg-space-6) 0;
  padding-bottom: var(--otg-space-4);
  border-bottom: 1px solid var(--otg-border);
}
.otg-topic-section__head > * + * { margin-top: var(--otg-space-2); }

/* ---------- Editorial meta strip (between hero and article) ----------
   Hairline-bordered horizontal row of stat pairs; replaces the boxed
   stat-card pattern for this page. On mobile: 2-col grid. Tablet+:
   inline flex with vertical hairline separators between items. */
.otg-topic-meta-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--otg-space-4);
  margin: 0 0 var(--otg-space-8) 0;
  padding: var(--otg-space-5) 0;
  border-top: 1px solid var(--otg-border);
  border-bottom: 1px solid var(--otg-border);
}
.otg-topic-meta-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-1);
  min-width: 0;
}
.otg-topic-meta-strip__item dt {
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0;
}
.otg-topic-meta-strip__item dd {
  margin: 0;
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
}
@media (min-width: 640px) {
  .otg-topic-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .otg-topic-meta-strip__item {
    flex: 1 1 0;
    padding: 0 var(--otg-space-6);
    border-left: 1px solid var(--otg-border);
  }
  .otg-topic-meta-strip__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .otg-topic-meta-strip__item:last-child { padding-right: 0; }
}

/* ---------- Intro lede (under hero, first inside article) ---------- */
.otg-topic-intro__lede {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-body-lg);
  line-height: var(--otg-leading-body-lg);
  color: var(--otg-text-primary);
  margin: 0;
  max-width: 68ch;
}
.otg-topic-intro__lede::first-letter {
  font-family: var(--otg-font-display);
  font-weight: var(--otg-weight-semibold);
}

/* ---------- Numbered card — beach gallery treatment ----------
   Editorial Top-N list. Each card is a wide horizontal row with
   rank, body (chips + title + meta + desc + highlights + note).
   On superwide, internal layout becomes 2-column so the card's
   width is used (description + highlights split horizontally). */
.otg-topic-numbered__item--static { cursor: default; }
.otg-topic-numbered__item--static:hover {
  border-color: var(--otg-border);
  box-shadow: none;
  transform: none;
}

/* Lift the numbered card padding + spacing on wider screens */
@media (min-width: 768px) {
  .otg-topic-numbered__item { padding: var(--otg-space-6); gap: var(--otg-space-5); }
  .otg-topic-numbered__rank { width: 48px; height: 48px; font-size: var(--otg-text-h3); }
}
@media (min-width: 1440px) {
  .otg-topic-numbered__item { padding: var(--otg-space-7); gap: var(--otg-space-6); }
  .otg-topic-numbered__rank { width: 56px; height: 56px; font-size: var(--otg-text-h3); }
}

/* Internal 2-col split on wider cards: main left, highlights right.
   On mobile/tablet, body is just a block container — main and side stack. */
.otg-topic-numbered__main { min-width: 0; }
.otg-topic-numbered__side {
  margin-top: var(--otg-space-5);
  padding-top: var(--otg-space-5);
  border-top: 1px solid var(--otg-border);
}
.otg-topic-numbered__side-label {
  margin: 0 0 var(--otg-space-3) 0;
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
}
@media (min-width: 1024px) {
  .otg-topic-numbered__body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--otg-space-7); row-gap: var(--otg-space-5); }
  .otg-topic-numbered__side {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    padding-left: var(--otg-space-6);
    border-left: 1px solid var(--otg-border);
  }
  .otg-topic-numbered__body:not(.otg-topic-numbered__body--split) .otg-topic-numbered__side {
    /* When body isn't split, restore the divider above the side block */
    padding-left: 0;
    border-left: 0;
    padding-top: var(--otg-space-5);
    border-top: 1px solid var(--otg-border);
  }
}
@media (min-width: 1440px) {
  .otg-topic-numbered__body--split {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  }
}

.otg-topic-numbered__title {
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  letter-spacing: var(--otg-tracking-tight);
}

.otg-topic-numbered__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-3) var(--otg-space-4);
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-3) 0;
}
.otg-topic-numbered__meta > * + *::before {
  content: "·";
  margin-right: var(--otg-space-3);
  color: var(--otg-border-strong);
}

/* Chip row inside a numbered card body */
.otg-topic-numbered__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--otg-space-4) 0;
}
.otg-topic-numbered__chips li { margin: 0; }

/* Highlight bullets inside a numbered card body */
.otg-topic-numbered__highlights {
  list-style: none;
  padding: var(--otg-space-4) 0 0 0;
  margin: var(--otg-space-4) 0 0 0;
  border-top: 1px solid var(--otg-border);
  display: grid;
  gap: var(--otg-space-2);
}
@media (min-width: 1024px) {
  .otg-topic-numbered__highlights {
    padding: 0;
    margin: 0;
    border-top: 0;
    align-self: start;
  }
}
.otg-topic-numbered__highlights li {
  position: relative;
  padding-left: var(--otg-space-5);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-secondary);
}
.otg-topic-numbered__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background: var(--otg-accent);
}

/* Note line under numbered card (Editor's tip / Best for / When to go) */
.otg-topic-numbered__note {
  margin-top: var(--otg-space-4);
  padding-top: var(--otg-space-4);
  border-top: 1px solid var(--otg-border);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-secondary);
}
.otg-topic-numbered__note strong {
  color: var(--otg-text-primary);
  font-weight: var(--otg-weight-semibold);
}

/* Empty-state line */
.otg-topic-empty {
  padding: var(--otg-space-5);
  background: var(--otg-surface-sunken);
  border: 1px dashed var(--otg-border);
  border-radius: var(--otg-radius);
  color: var(--otg-text-muted);
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
}

/* ---------- Vibe tile ----------
   Editorial slate-accented card. Top-border accent gives the row
   a clear visual hierarchy at a glance. */
.otg-topic-vibe {
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-top: 3px solid var(--otg-accent);
  border-radius: var(--otg-radius);
  padding: var(--otg-space-5) var(--otg-space-5) var(--otg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-3);
  transition: border-color var(--otg-duration-3) var(--otg-ease),
              box-shadow var(--otg-duration-3) var(--otg-ease);
}
.otg-topic-vibe:hover {
  border-color: var(--otg-border-strong);
  border-top-color: var(--otg-accent);
  box-shadow: var(--otg-shadow-hover);
}
.otg-topic-vibe__eyebrow {
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-accent);
  margin: 0;
}
.otg-topic-vibe__title {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0;
  letter-spacing: var(--otg-tracking-tight);
}
.otg-topic-vibe__desc {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
  margin: 0;
}

/* ---------- Activity card ----------
   White card with a sunken meta panel at the bottom for "Best at"
   to give the data point its own emphasis. */
.otg-topic-activity {
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  padding: var(--otg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-3);
  transition: border-color var(--otg-duration-3) var(--otg-ease),
              box-shadow var(--otg-duration-3) var(--otg-ease);
}
.otg-topic-activity:hover {
  border-color: var(--otg-border-strong);
  box-shadow: var(--otg-shadow-hover);
}
.otg-topic-activity__title {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  margin: 0;
  letter-spacing: var(--otg-tracking-tight);
}
.otg-topic-activity__desc {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-secondary);
  margin: 0;
}
.otg-topic-activity__where {
  margin: var(--otg-space-2) 0 0 0;
  padding: var(--otg-space-3) var(--otg-space-4);
  background: var(--otg-surface-sunken);
  border-radius: var(--otg-radius);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-primary);
}
.otg-topic-activity__where + .otg-topic-activity__where { margin-top: var(--otg-space-2); }
.otg-topic-activity__where .otg-meta-label {
  display: block;
  margin: 0 0 2px 0;
  color: var(--otg-text-muted);
}
.otg-topic-activity__tip {
  margin: 0;
  padding-top: var(--otg-space-3);
  border-top: 1px solid var(--otg-border);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-muted);
}
.otg-topic-activity__tip strong {
  color: var(--otg-text-primary);
  font-weight: var(--otg-weight-semibold);
}

/* ---------- Practical info card ----------
   Editorial micro-fact card: small uppercase label + body prose.
   Sunken background for visual separation from page bg. */
.otg-topic-practical-card {
  background: var(--otg-surface-sunken);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  padding: var(--otg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-3);
  position: relative;
  transition: border-color var(--otg-duration-3) var(--otg-ease);
}
.otg-topic-practical-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--otg-space-5);
  bottom: var(--otg-space-5);
  width: 2px;
  background: var(--otg-accent);
  border-radius: 0 var(--otg-radius-sm) var(--otg-radius-sm) 0;
}
.otg-topic-practical-card__title {
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0;
}
.otg-topic-practical-card__body {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
  margin: 0;
}

/* ---------- Packing list ----------
   Compact tile each with category head + body prose. Flat surface
   with hairline border. Auto-fit grid keeps tiles a reasonable
   width at any viewport. */
.otg-topic-packing {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--otg-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .otg-topic-packing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--otg-space-4); }
}
@media (min-width: 1024px) {
  .otg-topic-packing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.otg-topic-packing li {
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-left: 3px solid var(--otg-border-strong);
  border-radius: var(--otg-radius);
  padding: var(--otg-space-4) var(--otg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-2);
  transition: border-left-color var(--otg-duration-3) var(--otg-ease);
}
.otg-topic-packing li:hover { border-left-color: var(--otg-accent); }
.otg-topic-packing__head {
  font-family: var(--otg-font-sans);
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
  letter-spacing: var(--otg-tracking-tight);
}
.otg-topic-packing__body {
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-secondary);
}

/* ---------- Safety callout grid ---------- */
.otg-topic-safety {
  display: grid;
  gap: var(--otg-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .otg-topic-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.otg-topic-safety .otg-callout { margin: 0; height: 100%; }

/* ---------- FAQ source caption ---------- */
.otg-topic-faq__source {
  margin-top: var(--otg-space-3);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-muted);
  font-style: italic;
}

/* ---------- Superwide tier scaling for beach grids ----------
   Reading widths stay capped per-element. Grids fan out. */
@media (min-width: 1440px) {
  .otg-topic-safety { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--otg-space-5); }
  .otg-topic-packing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--otg-space-4); }
}
@media (min-width: 1920px) {
  .otg-topic-safety { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .otg-topic-packing { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .otg-topic-meta-strip__item dd { font-size: var(--otg-text-h3); }
}

/* ============================================================
   Editorial refinement (Tier 2 audit fixes)
   ------------------------------------------------------------
   - Section divider rhythm: hairline break between top-level
     sections so the page reads as discrete chapters, not one
     scroll.
   - Sparse-grid behavior: when an operator/by-type list has
     2-3 items, don't fan out into 4-5 columns on superwide.
   - Severity --decorative: strip the amber/red border colors
     when the severity rows are used for non-advisory content
     (adventure difficulty, hiking trail difficulty, etc.) per
     design-system §2.
   - Numbered list density on desktop+.
   - Topic head: keep the lede on a separate line on superwide
     and don't strand the title at a 40ch cap.
   ============================================================ */

/* --- Auto-editorial for image-less topic-grid cards ---------
   Any .otg-card inside a topic grid that has no .otg-card__media
   automatically receives the editorial top-accent treatment.
   Avoids a 20-template touch for the same fix. :has() is
   modern-browser only but this is a static site (no IE). */
.otg-topic-grid > .otg-card:not(:has(.otg-card__media)),
.otg-topic-grid--2 > .otg-card:not(:has(.otg-card__media)),
.otg-topic-grid--4 > .otg-card:not(:has(.otg-card__media)),
.otg-topic-grid--auto > .otg-card:not(:has(.otg-card__media)),
.otg-topic-rail > .otg-card:not(:has(.otg-card__media)) {
  border-top: 3px solid var(--otg-accent);
}

.otg-topic-grid > .otg-card:not(:has(.otg-card__media)):hover,
.otg-topic-grid--2 > .otg-card:not(:has(.otg-card__media)):hover,
.otg-topic-grid--4 > .otg-card:not(:has(.otg-card__media)):hover,
.otg-topic-grid--auto > .otg-card:not(:has(.otg-card__media)):hover,
.otg-topic-rail > .otg-card:not(:has(.otg-card__media)):hover {
  border-top-color: var(--otg-accent);
}

/* Inside an editorial card body: lift the chip so it acts as an
   eyebrow, sized + spaced for the role. */
.otg-topic-grid > .otg-card:not(:has(.otg-card__media)) .otg-card__body > .otg-chip:first-child,
.otg-topic-grid--2 > .otg-card:not(:has(.otg-card__media)) .otg-card__body > .otg-chip:first-child,
.otg-topic-grid--4 > .otg-card:not(:has(.otg-card__media)) .otg-card__body > .otg-chip:first-child,
.otg-topic-grid--auto > .otg-card:not(:has(.otg-card__media)) .otg-card__body > .otg-chip:first-child,
.otg-topic-rail > .otg-card:not(:has(.otg-card__media)) .otg-card__body > .otg-chip:first-child {
  background: transparent;
  border-color: transparent;
  padding: 0;
  margin-bottom: var(--otg-space-1);
  color: var(--otg-accent);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  font-weight: var(--otg-weight-medium);
}

.otg-topic-grid > .otg-card:not(:has(.otg-card__media)) .otg-card__title,
.otg-topic-grid--2 > .otg-card:not(:has(.otg-card__media)) .otg-card__title,
.otg-topic-grid--4 > .otg-card:not(:has(.otg-card__media)) .otg-card__title,
.otg-topic-grid--auto > .otg-card:not(:has(.otg-card__media)) .otg-card__title,
.otg-topic-rail > .otg-card:not(:has(.otg-card__media)) .otg-card__title {
  font-size: var(--otg-text-h4);
  line-height: var(--otg-leading-h4);
  letter-spacing: var(--otg-tracking-tight);
}

/* --- Section divider rhythm ---------------------------------- */
.otg-topic-article > .otg-topic-section + .otg-topic-section,
.otg-topic-article > .otg-topic-section + .otg-topic-final-cta,
.otg-topic-article > .otg-topic-section + .otg-topic-related,
.otg-topic-article > .otg-topic-final-cta + .otg-topic-related {
  margin-top: var(--otg-space-9);
  padding-top: var(--otg-space-7);
  border-top: 1px solid var(--otg-border);
}

@media (max-width: 768px) {
  .otg-topic-article > .otg-topic-section + .otg-topic-section,
  .otg-topic-article > .otg-topic-section + .otg-topic-final-cta,
  .otg-topic-article > .otg-topic-section + .otg-topic-related,
  .otg-topic-article > .otg-topic-final-cta + .otg-topic-related {
    margin-top: var(--otg-space-7);
    padding-top: var(--otg-space-6);
  }
}

/* --- Sparse-aware grid --------------------------------------
   Use this on topic grids whose item count is data-driven and
   often falls below 3. Cards keep their natural width instead
   of stretching across 5 columns on superwide. */
.otg-topic-grid--auto {
  display: grid;
  gap: var(--otg-space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: start;
}

@media (min-width: 1440px) {
  .otg-topic-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  }
}

/* --- Severity decorative override ----------------------------
   When .otg-topic-severity is used to express non-advisory
   information (e.g., adventure activity difficulty bands), opt
   into --decorative on the wrapper. All inner modifier border
   colours fall back to the neutral slate. */
.otg-topic-severity--decorative .otg-topic-severity__item,
.otg-topic-severity--decorative .otg-topic-severity__item--low,
.otg-topic-severity--decorative .otg-topic-severity__item--medium,
.otg-topic-severity--decorative .otg-topic-severity__item--high,
.otg-topic-severity--decorative .otg-topic-severity__item--critical {
  border-left-color: var(--otg-border-strong);
  background: var(--otg-surface);
}

/* --- Numbered list density on desktop+ ----------------------
   The existing tier scaling lifts padding and rank size, but
   the body's meta + description still felt airy because the
   description was sized at body-default. Tighten the meta and
   give the title a touch more presence. */
@media (min-width: 768px) {
  .otg-topic-numbered__title { font-size: var(--otg-text-h3); }
  .otg-topic-numbered__meta { margin-bottom: var(--otg-space-2); }
  .otg-topic-numbered__desc { font-size: var(--otg-text-body); max-width: 72ch; }
}

/* --- Topic head superwide ------------------------------------
   Default head caps the title at 40ch which strands it on wide
   viewports. Bump the line a touch and let the title breathe to
   ~30ch without going full display-xl (that reads as a hero, not
   an article H1, on the long topic pages). */
@media (min-width: 1280px) {
  .otg-topic-head { padding: var(--otg-space-5) 0 var(--otg-space-8); }
  .otg-topic-head__title { max-width: 30ch; }
}

/* --- Related topics: tighten label rhythm -------------------- */
.otg-topic-related__heading {
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--otg-tracking-wide);
  color: var(--otg-text-muted);
  margin: 0 0 var(--otg-space-3) 0;
}

/* --- Equal-height cards inside topic grids ------------------
   Grid items default to align-items: stretch but the inner
   .otg-card was relying on intrinsic height. Force grid items
   and their inner card (when wrapped in .otg-card-link) to
   fill the row, and push the card-tip lines to the bottom so
   variable-length content keeps a consistent baseline. */
.otg-topic-grid > *,
.otg-topic-grid--2 > *,
.otg-topic-grid--4 > *,
.otg-topic-grid--auto > * {
  height: 100%;
}

.otg-topic-grid .otg-card-link > .otg-card,
.otg-topic-grid--2 .otg-card-link > .otg-card,
.otg-topic-grid--4 .otg-card-link > .otg-card,
.otg-topic-grid--auto .otg-card-link > .otg-card {
  height: 100%;
}

.otg-topic-grid .otg-card,
.otg-topic-grid--2 .otg-card,
.otg-topic-grid--4 .otg-card,
.otg-topic-grid--auto .otg-card {
  height: 100%;
}

.otg-topic-grid .otg-card > .otg-card__body,
.otg-topic-grid--2 .otg-card > .otg-card__body,
.otg-topic-grid--4 .otg-card > .otg-card__body,
.otg-topic-grid--auto .otg-card > .otg-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.otg-topic-grid .otg-card > .otg-card__body > .otg-card-tip:last-child,
.otg-topic-grid--2 .otg-card > .otg-card__body > .otg-card-tip:last-child,
.otg-topic-grid--4 .otg-card > .otg-card__body > .otg-card-tip:last-child,
.otg-topic-grid--auto .otg-card > .otg-card__body > .otg-card-tip:last-child {
  margin-top: auto;
}