/* ============================================================
   Topic-subject (detail) page — single item: one hotel, one
   restaurant, one beach, one hike, etc.

   Visual register: Kayak-style detail page. Quiet article hero
   on the page background (NOT a full-bleed photo), 16:9 hero
   image inside the prose column, prose body, sectioned chrome,
   sticky sidebar with related items and topic links.

   Tokens only — every value references var(--otg-*).
   ============================================================ */

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

/* ---------- Breadcrumb bar ----------
   Shared top-of-page rhythm with region / topic breadcrumbs: scaling
   top padding (--otg-page-top), constant 12px below, no divider — the
   detail hero beneath provides the visual break. Horizontal gutters
   come from the inner .otg-container wrapper. */
.otg-subject-breadcrumbs-bar {
  background: var(--otg-bg);
  padding-top: var(--otg-page-top);
  padding-bottom: var(--otg-space-3);
}

/* ---------- Detail hero ---------- */
.otg-subject-hero {
  padding: var(--otg-space-7) 0 var(--otg-space-6) 0;
}

@media (min-width: 1024px) {
  .otg-subject-hero { padding: var(--otg-space-8) 0 var(--otg-space-7) 0; }
}

.otg-subject-hero__inner {
  max-width: var(--otg-container-md);
}

.otg-subject-hero__eyebrow {
  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-subject-hero__title {
  font-family: var(--otg-font-sans);
  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;
  max-width: 22ch;
}

.otg-subject-hero__lede {
  margin: var(--otg-space-4) 0 0 0;
  max-width: 56ch;
  font-size: var(--otg-text-body-lg);
  line-height: var(--otg-leading-body-lg);
  color: var(--otg-text-secondary);
}

/* Hero-meta row — slightly tighter than .otg-meta-row default */
.otg-subject-hero__meta {
  margin: var(--otg-space-5) 0 0 0;
  padding: var(--otg-space-4) 0 0 0;
  border-top: 1px solid var(--otg-border);
}

/* When no chip macros rendered (sparse data), the <ul> contains only
   template whitespace. Hide the row entirely — its border + padding
   were leaving a stranded hairline under the title. */
.otg-subject-hero__meta:not(:has(> li)) {
  display: none;
}

/* ---------- Meta-row item internals ---------- */
.otg-meta-row__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--otg-space-2);
}

.otg-meta-row__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-muted);
}

.otg-meta-row__value {
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-primary);
}

/* ---------- Main two-column layout ---------- */
.otg-subject-main { padding-bottom: var(--otg-space-9); }

/* This element is co-classed with .otg-container--lg, which already
   supplies the shared fluid horizontal gutters. Set ONLY vertical
   padding here so the two systems can't disagree (the previous version
   re-declared gutters that stopped at 64px and never matched the
   container's wide/superwide ramp). */
.otg-subject-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--otg-space-7);
  padding-top: var(--otg-space-6);
  padding-bottom: var(--otg-space-6);
}

@media (min-width: 1024px) {
  .otg-subject-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--otg-space-8);
    align-items: start;
  }
}

.otg-subject-layout__main { min-width: 0; }

.otg-subject-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-5);
}

@media (min-width: 1024px) {
  .otg-subject-layout__aside {
    position: sticky;
    top: 88px;            /* header height + small offset */
    align-self: flex-start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}

/* ---------- Insider tip (callout reused) ---------- */
.otg-subject-tip { margin: 0 0 var(--otg-space-6) 0; }

/* ---------- Hero figure (image inside prose column) ---------- */
.otg-subject-figure {
  margin: 0 0 var(--otg-space-7) 0;
}

.otg-subject-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--otg-surface-sunken);
  border-radius: var(--otg-radius);
}

.otg-subject-figure__caption {
  margin-top: var(--otg-space-2);
  font-size: var(--otg-text-small);
  line-height: var(--otg-leading-small);
  color: var(--otg-text-muted);
}

/* ---------- Section rhythm ---------- */
.otg-subject-section {
  padding: var(--otg-space-6) 0;
  border-top: 1px solid var(--otg-border);
}

.otg-subject-section:first-of-type,
.otg-subject-intro {
  padding-top: 0;
  border-top: 0;
}

.otg-subject-section__heading {
  font-family: var(--otg-font-sans);
  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;
}

/* ---------- Intro: lede + long description ---------- */
.otg-subject-intro {
  padding-bottom: var(--otg-space-6);
}

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

.otg-subject-prose {
  max-width: var(--otg-container-prose);
  font-size: var(--otg-text-body-lg);
  line-height: var(--otg-leading-body-lg);
  color: var(--otg-text-primary);
}

.otg-subject-prose p { margin: 0 0 var(--otg-space-4) 0; }
.otg-subject-prose p:last-child { margin-bottom: 0; }

.otg-subject-prose h2 {
  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: var(--otg-space-6) 0 var(--otg-space-3) 0;
}

.otg-subject-prose h3 {
  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-5) 0 var(--otg-space-3) 0;
}

.otg-subject-prose ul,
.otg-subject-prose ol {
  list-style: revert;
  padding-left: var(--otg-space-5);
  margin: var(--otg-space-4) 0;
}

.otg-subject-prose li + li { margin-top: var(--otg-space-2); }

.otg-subject-prose a {
  color: var(--otg-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.otg-subject-prose a:hover { color: var(--otg-accent); }

/* ---------- Generic prose list (highlights, tips, equipment, etc.) ---------- */
.otg-subject-list {
  list-style: disc;
  padding-left: var(--otg-space-5);
  margin: 0;
  max-width: var(--otg-container-prose);
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
}

.otg-subject-list--ordered { list-style: decimal; }

.otg-subject-list li + li { margin-top: var(--otg-space-2); }

/* ---------- Definition list (Good-to-know panels) ---------- */
.otg-subject-deflist {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--otg-border);
  max-width: var(--otg-container-prose);
}

.otg-subject-deflist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--otg-space-1);
  padding: var(--otg-space-3) 0;
  border-bottom: 1px solid var(--otg-border);
}

@media (min-width: 640px) {
  .otg-subject-deflist__row {
    grid-template-columns: 180px 1fr;
    gap: var(--otg-space-4);
  }
}

.otg-subject-deflist 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-subject-deflist dd {
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
  margin: 0;
}

/* ---------- Amenities grid (hotels, beaches, wellness) ---------- */
.otg-amenity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--otg-space-2) var(--otg-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--otg-container-prose);
}

@media (min-width: 480px) {
  .otg-amenity-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .otg-amenity-grid { grid-template-columns: repeat(3, 1fr); }
}

.otg-amenity-grid__item {
  position: relative;
  padding: var(--otg-space-2) 0 var(--otg-space-2) var(--otg-space-4);
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
  border-bottom: 1px solid var(--otg-border);
}

.otg-amenity-grid__item::before {
  content: "\2022";   /* bullet */
  position: absolute;
  left: 0;
  top: var(--otg-space-2);
  color: var(--otg-text-muted);
}

/* ---------- Location block ---------- */
.otg-subject-location__address {
  margin: 0 0 var(--otg-space-2) 0;
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
}

.otg-subject-location__coords {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--otg-space-3);
  margin: 0;
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
}

.otg-subject-location__latlng {
  font-variant-numeric: tabular-nums;
}

.otg-subject-location__map {
  color: var(--otg-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.otg-subject-location__map:hover { color: var(--otg-accent); }

/* ---------- External links list ---------- */
.otg-subject-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--otg-space-3);
  max-width: var(--otg-container-prose);
}

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

.otg-subject-links__row {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-1);
  padding: var(--otg-space-4) var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  color: var(--otg-text-primary);
  text-decoration: none;
  transition: border-color var(--otg-duration-3) var(--otg-ease),
              box-shadow var(--otg-duration-3) var(--otg-ease),
              transform var(--otg-duration-3) var(--otg-ease);
}

.otg-subject-links__row:hover {
  border-color: var(--otg-border-strong);
  box-shadow: var(--otg-shadow-hover);
  transform: translateY(-1px);
}

.otg-subject-links__row:focus-visible {
  outline: 3px solid var(--otg-focus-ring);
  outline-offset: 2px;
}

.otg-subject-links__label {
  font-size: var(--otg-text-body);
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-primary);
}

.otg-subject-links__host {
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
}

.otg-subject-links__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--otg-space-2) var(--otg-space-4);
  margin: var(--otg-space-4) 0 0 0;
  padding: 0;
  font-size: var(--otg-text-small);
}

.otg-subject-links__social a {
  color: var(--otg-text-muted);
  text-decoration: none;
}

.otg-subject-links__social a:hover {
  color: var(--otg-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Primary CTA panel ---------- */
.otg-subject-cta {
  padding: var(--otg-space-7) 0 0 0;
}

.otg-subject-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--otg-space-3);
  padding: var(--otg-space-6) var(--otg-space-6);
  background: var(--otg-surface-sunken);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

@media (min-width: 768px) {
  .otg-subject-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--otg-space-5);
  }
}

.otg-subject-cta__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-muted);
  margin: 0;
}

.otg-subject-cta__name {
  margin: 0;
  font-size: var(--otg-text-h3);
  line-height: var(--otg-leading-h3);
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
}

.otg-subject-cta__inner .otg-btn {
  flex-shrink: 0;
}

/* ---------- Sidebar ---------- */
.otg-subject-sidebar { font-family: var(--otg-font-sans); }

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

.otg-subject-sidebar__heading {
  margin: 0 0 var(--otg-space-4) 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);
}

/* Related items list */
.otg-subject-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-3);
}

.otg-subject-related__item {
  border-top: 1px solid var(--otg-border);
  padding-top: var(--otg-space-3);
}

.otg-subject-related__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.otg-subject-related__link {
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-1);
  text-decoration: none;
  color: var(--otg-text-primary);
}

.otg-subject-related__link:hover .otg-subject-related__name {
  color: var(--otg-accent);
}

.otg-subject-related__name {
  font-size: var(--otg-text-body);
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-primary);
}

.otg-subject-related__meta {
  font-size: var(--otg-text-small);
  color: var(--otg-text-muted);
}

.otg-subject-related__chip {
  display: inline-flex;
  align-items: center;
  margin-top: var(--otg-space-1);
  padding: 2px 8px;
  background: var(--otg-surface-sunken);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius-sm);
  font-size: var(--otg-text-micro);
  line-height: var(--otg-leading-micro);
  font-weight: var(--otg-weight-medium);
  color: var(--otg-text-secondary);
  text-transform: capitalize;
  align-self: flex-start;
}

/* Related-topics list (sibling content links) */
.otg-subject-topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--otg-space-2);
}

.otg-subject-topics__link {
  display: block;
  padding: var(--otg-space-2) 0;
  color: var(--otg-text-primary);
  text-decoration: none;
  font-size: var(--otg-text-body);
  border-bottom: 1px solid var(--otg-border);
}

.otg-subject-topics__list li:last-child .otg-subject-topics__link {
  border-bottom: 0;
}

.otg-subject-topics__link:hover { color: var(--otg-accent); }

/* ---------- Backwards-compatible related-topics partial styling ----------
   The shared _partials/related_topics_sidebar.html emits classes
   .otg-related-topics and .otg-related-topics-list. Style them as
   a sidebar block so the include matches the surrounding chrome. */
.otg-related-topics {
  padding: var(--otg-space-5);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
}

.otg-related-topics h3 {
  margin: 0 0 var(--otg-space-4) 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);
}

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

.otg-related-topics-list a {
  display: block;
  padding: var(--otg-space-2) 0;
  color: var(--otg-text-primary);
  text-decoration: none;
  font-size: var(--otg-text-body);
  border-bottom: 1px solid var(--otg-border);
}

.otg-related-topics-list li:last-child a { border-bottom: 0; }

.otg-related-topics-list a:hover { color: var(--otg-accent); }

/* ---------- Plan-your-trip callout (backwards compat with cta_box) ---------- */
.otg-subject-plan { margin: var(--otg-space-6) 0 0 0; }

.otg-subject-plan__button { margin-top: var(--otg-space-3); }

/* ---------- Print ---------- */
@media print {
  .otg-subject-breadcrumbs-bar,
  .otg-subject-layout__aside,
  .otg-subject-cta { display: none; }

  .otg-subject-layout { grid-template-columns: 1fr; }
  .otg-subject-figure__img { aspect-ratio: auto; max-height: 320px; }
}


/* ============================================================
   Subject-section helpers (per-topic article sections)

   Each subject template attaches one of these helper classes to
   an .otg-subject-section so the section keeps the shared
   border-top rhythm but can also pick up minor per-section
   tweaks (heading offsets, list spacing, etc.). They wrap the
   already-defined chrome (.otg-subject-list, .otg-amenity-grid,
   .otg-subject-deflist, .otg-subject-links*, .otg-subject-related*,
   .otg-subject-topics*, .otg-faq) — they NEVER redefine it.

   Tokens only.
   ============================================================ */

/* ---------- Shared: tighten heading rhythm where the section
              body is a simple list (no inner sub-heads). -------- */
.otg-subject-amenities > .otg-subject-section__heading,
.otg-subject-room-types > .otg-subject-section__heading,
.otg-subject-treatments > .otg-subject-section__heading,
.otg-subject-includes > .otg-subject-section__heading,
.otg-subject-dishes > .otg-subject-section__heading,
.otg-subject-equipment > .otg-subject-section__heading,
.otg-subject-highlights > .otg-subject-section__heading,
.otg-subject-tips > .otg-subject-section__heading,
.otg-subject-itinerary > .otg-subject-section__heading,
.otg-subject-transport > .otg-subject-section__heading,
.otg-subject-facts > .otg-subject-section__heading,
.otg-subject-faq > .otg-subject-section__heading,
.otg-subject-links > .otg-subject-section__heading,
.otg-subject-location > .otg-subject-section__heading,
.otg-subject-best-time > .otg-subject-section__heading,
.otg-subject-accessibility > .otg-subject-section__heading,
.otg-subject-significance > .otg-subject-section__heading {
  margin-bottom: var(--otg-space-4);
}

/* ---------- Amenities / Room types / Treatments / Includes
              (hotel, beach, wellness, food-tour grids)
              The list inside is .otg-amenity-grid OR .otg-subject-list;
              the wrapper here just owns section rhythm. ----- */
.otg-subject-amenities,
.otg-subject-room-types,
.otg-subject-treatments,
.otg-subject-includes {
  /* All chrome is owned by the inner list classes; nothing to add. */
}

/* Item-level emphasis when a list row contains a bold name */
.otg-subject-room-types .otg-subject-list strong,
.otg-subject-treatments .otg-subject-list strong,
.otg-subject-dishes .otg-subject-list strong {
  font-weight: var(--otg-weight-semibold);
  color: var(--otg-text-primary);
}

/* ---------- Equipment — plain bullet list (no special chrome). - */
.otg-subject-equipment {
  /* Owned by .otg-subject-list. */
}

/* ---------- Signature dishes — bullet list with bold name. ----- */
.otg-subject-dishes {
  /* Owned by .otg-subject-list. */
}

/* ---------- Facts panel (Good-to-know / Trail facts / Site facts)
              Owned entirely by .otg-subject-deflist. ----------- */
.otg-subject-facts {
  /* Owned by .otg-subject-deflist. */
}

/* ---------- Highlights / Tips — bullet list, tight spacing ----- */
.otg-subject-highlights .otg-subject-list,
.otg-subject-tips .otg-subject-list {
  margin: 0;
}

/* ---------- FAQ wrapper — chrome owned by .otg-faq ------------- */
.otg-subject-faq {
  /* .otg-faq inside owns visual style; this wrapper just owns rhythm. */
}

/* ---------- Location wrapper — chrome owned by
              .otg-subject-location__address/__coords/__latlng/__map */
.otg-subject-location {
  /* Owned by the .otg-subject-location__* descendants above. */
}

/* ---------- External links wrapper — chrome owned by
              .otg-subject-links__list/__row/__label/__host/__social */
.otg-subject-links {
  /* Owned by the .otg-subject-links__* descendants above. */
}

/* ---------- Transport — definition list rows (How to get there) - */
.otg-subject-transport .otg-subject-list {
  margin: 0;
}

/* ---------- Itinerary — ordered list day-by-day --------------- */
.otg-subject-itinerary .otg-subject-list--ordered {
  margin: 0;
}

.otg-subject-itinerary .otg-subject-list--ordered li {
  padding-left: var(--otg-space-1);
}

/* ---------- Best time / Accessibility / Significance
              Simple prose section: heading + paragraph. -------- */
.otg-subject-best-time p,
.otg-subject-accessibility p,
.otg-subject-significance p {
  max-width: var(--otg-container-prose);
  margin: 0;
  font-size: var(--otg-text-body);
  line-height: var(--otg-leading-body);
  color: var(--otg-text-primary);
}

/* ---------- Sidebar wrappers (Related items, Other topics) ----
   These two appear in the sidebar (NOT the article column) and
   reuse .otg-subject-sidebar__block / .otg-subject-sidebar__heading
   plus .otg-subject-related__* / .otg-subject-topics__* for chrome.
   The wrapper classes below add no extra chrome. ---------------- */
.otg-subject-related,
.otg-subject-topics {
  /* Owned by .otg-subject-sidebar__block + .otg-subject-related__*
     / .otg-subject-topics__*. */
}


/* ============================================================
   Superwide refinement (spec 07-RESPONSIVE §7.4)
   Additive media queries at >=1440px. No mobile/desktop rules
   touched. Tokens only except for the spec-mandated pixel widths
   (880/920 main, 340 sidebar). No new classes.

   The subject page uses one consistent, centred CONTENT RAIL at
   every superwide tier: main column + column gap + sidebar, with
   the breadcrumb bar and hero capped to the same width so every
   left edge lines up. Without this, the shared .otg-container--lg
   ladder keeps widening (1440 → 1600 → 1760 → 1920) while the
   article column either stretches to unreadable line lengths
   (1440–1919) or centres away from the left-pinned breadcrumbs
   and hero (1920+) — the "off-centre at >2000px" defect.
   Rail math: 1440+: 880 + 64 + 340 = 1284. 1680+: 920 + 64 + 340 = 1324.
   ============================================================ */

/* Tier 2 — 1440px+ : cap + centre the rail, +1 col on inner grids */
@media (min-width: 1440px) {
  .otg-subject-breadcrumbs-bar > .otg-container,
  .otg-subject-hero > .otg-container,
  .otg-subject-layout {
    max-width: calc(1284px + 2 * var(--otg-gutter));
  }
  .otg-subject-layout {
    grid-template-columns: minmax(0, 880px) 340px;
    justify-content: center;
    gap: var(--otg-space-8);
  }
  .otg-subject-layout__main { max-width: 880px; }
  .otg-amenity-grid { grid-template-columns: repeat(4, 1fr); }
  .otg-subject-links__list { grid-template-columns: repeat(3, 1fr); }
}

/* Tier 3 — 1680px+ : rail steps up once (main 880 → 920) */
@media (min-width: 1680px) {
  .otg-subject-breadcrumbs-bar > .otg-container,
  .otg-subject-hero > .otg-container,
  .otg-subject-layout {
    max-width: calc(1324px + 2 * var(--otg-gutter));
  }
  .otg-subject-layout {
    grid-template-columns: minmax(0, 920px) 340px;
  }
  .otg-subject-layout__main { max-width: 920px; }
}

/* Tier 4 — 1920px+ : rail holds; inner grids gain a column.
   (No further rail growth — line length is capped by design.) */
@media (min-width: 1920px) {
  .otg-amenity-grid { grid-template-columns: repeat(5, 1fr); }
  .otg-subject-links__list { grid-template-columns: repeat(4, 1fr); }
}