/* ═══════════════════════════════════════════════════════
   ARTICLE / NEWS DETAIL PAGE — Shared Template Styles
   Reused across individual article & news posts.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Header ─────────────────────────────────────── */
/* 16 Sept: matched to Article or News Page.png: the article sits on the light off-white, not the sand. */
.ar-header,
.ar-body {
  background: var(--color-surface-light);
}

.ar-header {
  padding-top: clamp(120px, 12.3vw, 139.4px);
  padding-bottom: clamp(1.5rem, 2.46vw, 1.64rem);
}

.ar-header__back {
  display: inline-block;
  font-size: 0.9225rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-copper);
  margin-bottom: 1.25rem;
  transition: opacity 0.3s ease;
}

.ar-header__back:hover {
  opacity: 0.7;
}

.ar-header__title {
  font-family: var(--font-serif);
  font-size: clamp(1.856rem, 2.3042vw, 2.7675rem);
  font-weight: 700;
  line-height: 1.08;
  max-width: 600px;
  margin-bottom: 1.25rem;
}

/* 16 Sept: matched to Article or News Page.png: date on the left; author right-aligned at the end of the text
   column with SHARE underlined beneath it; no rule. */
.ar-header__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  row-gap: 0.4rem;
  max-width: 60%;
}
.ar-header__date,
.ar-header__author {
  font-size: 0.86rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.ar-header__author { text-align: right; }

.ar-header__share {
  grid-column: 2;
  justify-self: end;
  font-size: 0.86rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ── 2. Body: content + sidebar ───────────────────── */
.ar-body {
  padding-top: clamp(2rem, 3.28vw, 2.05rem);
}

/* 16 Sept: matched to Article or News Page.png: a ~700px text column (60%) with the sidebar alongside, and images
   at the full width of that column, left-aligned. The narrower column is
   what makes the images read narrower than before (10 Sept review). */
.ar-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 60%) 1fr;
  column-gap: 8%;
  align-items: start;
}

.ar-content__img {
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 16/9;
  margin: 0 0 2rem;
}

.ar-content__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ar-content p {
  font-size: clamp(1.05rem, 1.24vw, 1.3rem);   /* 16 Sept: matched to Article or News Page.png: ~17px at 1366 */
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 1.6rem;
}

.ar-content h1,
.ar-content h2,
.ar-content h3,
.ar-content h4,
.ar-content h5,
.ar-content h6 {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.17vw, 1.25rem);  /* ~16px at 1366 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin: 2.2rem 0 0.1rem;   /* 16 Sept: matched to Article or News Page.png: heading sits right on its paragraph */
}

/* Articles come out of the CMS with whatever heading level the author used, so the
   subheading treatment has to cover them all; without this Webflow renders rich-text
   headings in the body face. */
.ar-content > :first-child:is(h1, h2, h3, h4, h5, h6),
.ar-content h2:first-of-type {
  margin-top: 0.5rem;
}

/* ── Sidebar ───────────────────────────────────────── */
.ar-sidebar {
  position: sticky;
  top: 120px;
}
/* 16 Sept: matched to Article or News Page.png: copper uppercase heading with a rule under it, plain titles, and a
   small underlined VIEW in charcoal. */
.ar-sidebar__heading {
  font-size: 0.86rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-copper);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.08;
}

.ar-sidebar__list {
  display: flex;
  flex-direction: column;
}

.ar-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.ar-sidebar__item:hover {
  color: var(--color-copper);
}

.ar-sidebar__view {
  font-size: 0.86rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
  flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .ar-body__grid {
    grid-template-columns: 1fr;
  }

  .ar-header__meta { max-width: none; }

  .ar-sidebar {
    position: static;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .ar-header__meta {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
  }

  .ar-header__share {
    margin-left: 0;
  }
}

/* ── CMS article template ──────────────────────────── */
/* 21 Sept: on the CMS template the author line is bound to the Author field alone, so the byline prefix
   comes from CSS. Scoped to .cms-container so the hand-built article page keeps its literal
   "Written by …" text. */
.cms-container .ar-header__author::before {
  content: "Written by ";
}

/* The related-insights rows are built from a Collection List, so the title sits in its own block rather
   than a bare span; it must be allowed to shrink so VIEW stays pinned right. */
.ar-sidebar__title {
  min-width: 0;
}

.ar-sidebar .w-dyn-list,
.ar-sidebar .w-dyn-items {
  width: 100%;
}

/* An article with no Author set should not be left with a bare "Written by". */
.ar-header__author.w-dyn-bind-empty::before {
  content: none;
}