/* ============================================================
   Single post — modern article view + newsroom-style related cards
   Loaded after style.css on single-post.php, overrides the legacy layout.
   On-brand: gold (#c19114) / red (#c62307) / dark.
   ============================================================ */

/* ── Breadcrumb: lighter, gold-accented trail ── */
.single-post .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 5% 6px !important;
  font-size: 0.74em;
  letter-spacing: 1.5px;
  color: #8d8d8d;
}
.single-post .breadcrumb a {
  color: #c19114;
  transition: color .2s ease;
}
.single-post .breadcrumb a:hover {
  color: #fff;
}
.single-post .breadcrumb span:not(:last-child) {
  color: #555;
}
.single-post .breadcrumb span:last-child {
  color: #cfcfcf;
  text-transform: none;
  letter-spacing: 0.2px;
}

/* ── Article header: tighter, accent-bar title + meta line ── */
.single-post .sec1 .article > h2.title {
  position: relative;
  padding-left: 20px;
  font-size: 2.7em;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.5px;
  margin: 6px 0 14px;
  color: #fff;
}
.single-post .sec1 .article > h2.title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d9a521, #a87d0f);
}
/* The date line under the headline. Its text has to start on the same
   vertical as the headline's first letter — the live-news dot therefore sits
   in the gutter the title's accent bar occupies, rather than pushing the date
   9px to the right of everything else. */
.single-post .sec1 .article > p:first-of-type,
.single-post .sec1 .article > p {
  position: relative;
  display: block;
  padding-left: 20px;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: left;
  color: #9a9a9a;
}
.single-post .sec1 .article > p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c62307;
}

/* ── Featured media: rounded, framed, soft shadow ── */
.single-post .sec1 .article .left {
  margin-top: 22px;
}
.single-post .sec1 .article .left img,
.single-post .sec1 .article .gallery img,
.single-post .sec1 .article .gallery video {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* The featured image ships with width="100%" height="auto" — a browser hint,
   not real pixel dimensions — so it had no reserved box before the image
   loaded and the article text jumped down under it once it did (this is the
   article's biggest layout-shift contributor). Locking the box to 16:9
   up front means the space is there before a single byte of the image
   arrives, whatever the source photo's actual ratio turns out to be. */
.single-post .sec1 .article .left img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.single-post .sec1 .article .yt-embed {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Reading column typography ── */
.single-post .sec1 .article .right .description {
  font-size: 1.04em;
  line-height: 1.75;
  color: #d2d2d2;
  max-width: 760px;
}
.single-post .sec1 .article .right .description p {
  color: #d2d2d2;
}
/* Editor-embedded images now carry real width/height attributes so the
   browser can reserve their space before they load (see
   nna_img_rewrite_html() in includes/img.php). These two lines keep those
   attributes acting purely as an aspect-ratio hint rather than a fixed
   size, so the pictures still scale with the reading column. */
.single-post .sec1 .article .right .description img {
  max-width: 100%;
  height: auto;
}

/* Topics → gold tag pill row */
.single-post .sec1 .article .right .info {
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.single-post .sec1 .article .right .info > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82em;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #cfcfcf;
}
.single-post .sec1 .article .right .info b {
  color: #c19114;
  letter-spacing: 1px;
}

/* ============================================================
   Related Articles — newsroom cards (mirrors news-modern.css)
   ============================================================ */
.single-post .related {
  padding: 36px 5% 60px;
}
.single-post .related h3 {
  position: relative;
  display: inline-block;
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0 0 22px;
  padding-bottom: 10px;
}
.single-post .related h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9a521, #a87d0f);
}

.single-post .related .grid5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Card shell — vertical, dark, rounded, lift on hover */
.single-post .related .grid5 .product {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  row-gap: 0;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.single-post .related .grid5 .product:hover {
  top: auto;
  transform: translateY(-6px);
  border-color: rgba(193, 145, 20, 0.5);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
}

/* Featured image on top (16:9) */
.single-post .related .grid5 .product .img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Body */
.single-post .related .grid5 .product .title {
  margin: 14px 16px 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.single-post .related .grid5 .product:hover .title {
  color: #c19114;
}
.single-post .related .grid5 .product .date {
  margin: 12px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  color: #888;
}
.single-post .related .grid5 .product .date::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c62307;
}

/* ── Tablet / mobile ── */
@media screen and (max-width: 1100px) {
  .single-post .related .grid5 { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
  .single-post .sec1 .article > h2.title { font-size: 1.9em; }
  .single-post .related { padding: 30px 5% 45px; }
  .single-post .related .grid5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .single-post .related .grid5 .product .img { height: auto; aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 480px) {
  .single-post .related .grid5 { grid-template-columns: 1fr; }
}

/* ============================================================
   SIDEBAR RAIL — runs the full height of the article.
   Ad positions alternate with editorial blocks so the column
   reads as part of the paper, not a stack of adverts.
   ============================================================ */
.single-post .sec1 .side-rail {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 25%;
  min-width: 300px;
  max-width: 336px;
  /* .sec1 carries the page's .center class — the rail reads as a column of
     headlines, so it opts back out of that. */
  text-align: left;
  /* The rail is taller than the viewport now, so it scrolls with the
     article and only the last unit pins — see .ad-sticky below. */
  position: static;
  align-self: stretch;
}

/* ── Ad positions ── */
.single-post .ad-slot {
  min-width: 0;
}
.single-post .ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}
/* Google marks a unit it couldn't fill with data-ad-status="unfilled" and
   collapses the <ins> to nothing by itself. Only the "Advertisement" caption
   needs dealing with, so it isn't left captioning an empty space.

   NB: do NOT hide the whole .ad-slot here. Fill rates are never 100%, so a
   rule like that takes real ad positions off the page the first time Google
   has nothing to serve — which reads as "the ads have gone". */
.single-post .ad-slot:has(.adsbygoogle[data-ad-status="unfilled"]) .ad-label,
.single-post .grid-ad:has(.adsbygoogle[data-ad-status="unfilled"]) .ad-label {
  display: none;
}
.single-post .ad-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6e6e6e;
}
.single-post .ad-sticky {
  position: sticky;
  top: 100px;
}
.single-post .ad-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.single-post .ad-video a {
  display: block;
  text-decoration: none;
}
.single-post .ad-video-title {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: #9d9d9d;
}

/* ── Shared module shell ── */
.single-post .side-module {
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background:
    radial-gradient(420px 200px at 92% -40%, rgba(193, 145, 20, 0.12), transparent 62%),
    linear-gradient(160deg, #1a1c22 0%, #121319 100%);
}
.single-post .side-module-title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 13px;
  font-size: 1.05em;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
}
.single-post .side-module-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d9a521, #a87d0f);
}

/* ── Latest on NNA ── */
.single-post .side-story {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.single-post .side-story:first-of-type {
  padding-top: 0;
  border-top: none;
}
.single-post .side-story-thumb {
  flex-shrink: 0;
  width: 74px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background-color: #222;
  background-size: cover;
  background-position: center;
}
.single-post .side-story-text {
  min-width: 0;
}
.single-post .side-story-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.4;
  color: #e4e4e4;
  transition: color .2s ease;
}
.single-post .side-story:hover .side-story-title {
  color: #dbbc6c;
}
.single-post .side-story-ago {
  display: block;
  margin-top: 5px;
  font-size: 0.78em;
  color: #808080;
}

/* ── Live channel card ──
   Leads the rail. It starts as a still with a play button and only becomes a
   YouTube player when the reader presses it, so the article page is not
   carrying an embed nobody asked for. */
.single-post .side-live {
  border-top: 3px solid #c19114;
}
.single-post .side-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.single-post .side-live .side-module-title {
  margin-bottom: 0;
}
/* The same slate pill with a gold dot the live channel pages use, so "live"
   reads identically whether the reader is on a channel page or beside a story.
   It used to be a red badge, which appeared nowhere else on the TV side. */
.single-post .side-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  background: #2f506f;
  color: #fff;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 1px;
}
.single-post .side-live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dbbc6c;
  animation: side-live-pulse 1.6s ease-in-out infinite;
}
@keyframes side-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.single-post .side-live-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 12px;
}
/* Two to a row. One per row wastes the rail's height when there are five
   channels; side by side they read as a channel picker. With an odd count the
   last button grows to fill its own row — that bottom slot is NNA News. */
.single-post .side-live-tab {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: #cfcfcf;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.single-post .side-live-tab:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.single-post .side-live-tab.active {
  border-color: #c19114;
  background: linear-gradient(180deg, #d9a521, #b3850e);
  color: #14150f;
}

/* The frame is 16:9 because that is what the player becomes. The poster is two
   real <img> layers rather than a lazily-set background that could leave the
   border drawn around an empty box: the artwork fitted whole and centred, over
   a blurred over-scaled copy that carries colour out to all four corners. */
.single-post .side-live-player {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin: 16px 0 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, #16181e 0%, #0c0e13 100%);
}
/* Over-scaled so the blur's own soft edge never reaches the border. */
.single-post .side-live-back {
  position: absolute;
  inset: -10%;
  display: block;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(20px) saturate(115%) brightness(.5);
}
/* The artwork itself, whole and centred. The shadow separates it from the wash
   behind it so the composition reads as a poster set into the frame. */
.single-post .side-live-thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 22px rgba(0, 0, 0, .6));
}
.single-post .side-live-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.15) 0%, rgba(8, 10, 14, 0.6) 100%);
  transition: opacity .2s ease;
}
.single-post .side-live-player.playing::after {
  display: none;
}
.single-post .side-live-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* justify-content is not decoration here: style.css gives every button on the
   site `min-width: 200px`, so this one is 200px wide and the 58px disc sat
   against its left edge, 71px off centre. Centring the content puts the disc in
   the middle of the frame and leaves the wider click target alone. */
.single-post .side-live-play {
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .2s ease;
}
/* Gold disc rather than the YouTube mark — the card is NNA's channel, and gold
   is the site's action colour. */
.single-post .side-live-play-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e3bd54, #b3850e);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7),
              0 0 0 6px rgba(193, 145, 20, 0.18);
  transition: box-shadow .2s ease;
}
.single-post .side-live-play svg {
  width: 26px;
  height: 26px;
  display: block;
  margin-left: 3px;   /* optical centring: the triangle's mass sits left */
  fill: #14150f;
}
.single-post .side-live-player:hover .side-live-play {
  transform: scale(1.06);
}
.single-post .side-live-player:hover .side-live-play-dot {
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .75),
              0 0 0 9px rgba(193, 145, 20, 0.26);
}

/* "Tap for sound" — shown only while a silent stream is running. It sits under
   the frame rather than over it so it cannot cover the picture or fight with
   YouTube's own controls. */
.single-post .side-live-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: -6px 0 12px;
  padding: 9px 14px;
  border: 1px solid rgba(193, 145, 20, 0.65);
  border-radius: 8px;
  background: rgba(193, 145, 20, 0.12);
  color: #dbbc6c;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.single-post .side-live-sound:hover {
  background: rgba(193, 145, 20, 0.24);
  border-color: #c19114;
  color: #f0d488;
}
.single-post .side-live-sound[hidden] {
  display: none;
}
.single-post .side-live-sound svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.single-post .side-live-note {
  margin: 0 0 14px;
  font-size: 0.88em;
  line-height: 1.55;
  color: #9a9a9a;
}
.single-post .side-live-note:empty {
  display: none;
}
.single-post .side-live-btn {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.single-post .side-live-btn:hover {
  background: linear-gradient(180deg, #d9a521, #b3850e);
  border-color: #c19114;
  color: #14150f;
}

/* ── Today's schedule, folded away under the watch button ──
   The running order is what decides whether a reader tunes in now or later, so
   it belongs on the card — but closed, so it cannot push the rail's next slot
   down the page for readers who only wanted the stream. */
.single-post .side-live-sched {
  margin-top: 10px;
}
.single-post .side-live-sched-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(193, 145, 20, 0.35);
  border-radius: 8px;
  background: rgba(193, 145, 20, 0.08);
  color: #dbbc6c;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.single-post .side-live-sched-toggle:hover {
  background: rgba(193, 145, 20, 0.16);
  border-color: #c19114;
  color: #f0d488;
}
.single-post .side-live-sched-chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .25s ease;
}
.single-post .side-live-sched-toggle[aria-expanded="true"] .side-live-sched-chev {
  transform: rotate(180deg);
}
/* A full day is 10–14 slots. Capped and scrolled so the card keeps its size
   whether the channel runs six shows or sixteen. */
.single-post .side-live-sched-body {
  max-height: 236px;
  margin-top: 8px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(193, 145, 20, 0.5) transparent;
}
.single-post .side-live-sched-body::-webkit-scrollbar {
  width: 5px;
}
.single-post .side-live-sched-body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(193, 145, 20, 0.5);
}
.single-post .side-live-sched-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-post .side-live-sched-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.single-post .side-live-sched-row:last-child {
  border-bottom: 0;
}
.single-post .side-live-sched-time {
  flex: 0 0 auto;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: #8f8f8f;
}
.single-post .side-live-sched-show {
  font-size: 0.85em;
  line-height: 1.45;
  color: #d9d9d9;
}
/* The slot on air right now — the one piece of information a reader glancing at
   this list actually wants. */
.single-post .side-live-sched-row.on-now .side-live-sched-time {
  color: #dbbc6c;
}
.single-post .side-live-sched-row.on-now .side-live-sched-show {
  color: #fff;
  font-weight: 700;
}
.single-post .side-live-sched-now {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(193, 145, 20, 0.18);
  border: 1px solid rgba(193, 145, 20, 0.45);
  color: #dbbc6c;
  font-size: 0.72em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.single-post .side-live-sched-empty {
  margin: 10px 2px 4px;
  font-size: 0.85em;
  color: #8f8f8f;
}

/* ── App / Ultra Stream card ── */
.single-post .side-app {
  border-top: 3px solid #c19114;
}
/* Same artwork as the Ultra Stream hero, washed down so the logo reads
   over it and the card still sits quietly next to the story. */
.single-post .side-app-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #10131a;
  background-size: cover;
  background-position: center;
}
.single-post .side-app-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.32) 0%, rgba(8, 10, 14, 0.74) 100%);
}
.single-post .side-app-logo {
  position: relative;
  z-index: 1;
  width: 68%;
  max-width: 190px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75));
}
/* The card now carries one line under the artwork instead of a kicker and a
   heading, so it takes the weight the heading used to. */
.single-post .side-app-note {
  margin: 0 0 18px;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
}
.single-post .side-app-btn {
  display: block;
  padding: 11px 16px;
  border: 1px solid rgba(193, 145, 20, 0.55);
  border-radius: 8px;
  background: rgba(193, 145, 20, 0.08);
  color: #dbbc6c;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.single-post .side-app-btn:hover {
  background: #c19114;
  border-color: #c19114;
  color: #000;
}

/* ── In-article ads ── */
.single-post .in-article-ad {
  margin: 40px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  clear: both;
}
.single-post .in-article-ad .ad-label {
  margin-bottom: 10px;
}

.single-post .grid-ad .ad-label {
  margin-bottom: 10px;
}

/* ── Tablet: the rail drops under the story ──
   .single-post .sec1 (style.css) is display:flex with no flex-wrap, so it
   defaults to nowrap. Below used to only widen .side-rail to 100% without
   telling the row to wrap — with .article still flex:1 in that same
   never-wrapping row, .side-rail's 100% width left the article column almost
   no space, and its min-width: 0 let it actually collapse to a sliver
   instead of refusing to shrink. Text then wrapped one word per line for
   thousands of lines rather than the rail simply dropping underneath. */
@media screen and (max-width: 1100px) {
  .single-post .sec1 {
    flex-wrap: wrap;
  }
  .single-post .sec1 .article {
    flex-basis: 100%;
  }
  .single-post .sec1 .side-rail {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .single-post .ad-sticky {
    position: static;
  }
}

@media screen and (max-width: 768px) {
  .single-post .sec1 .side-rail {
    gap: 22px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .single-post .side-module {
    padding: 18px 16px;
  }
  .single-post .in-article-ad {
    margin: 30px 0;
  }
}

/* ============================================================
   SHARE BAR — sits directly under the author block, the way
   news publications place it. Outline circles, gold on hover.
   ============================================================ */
.single-post .share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -6px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.single-post .share-bar .share-label {
  margin-right: 2px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b59155;
}
.single-post .share-bar .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  padding: 6px;
}
.single-post .share-bar .share-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.single-post .share-bar .share-btn:hover {
  background: rgba(193, 145, 20, 0.16);
  border-color: #c19114;
  color: #dbbc6c;
  transform: translateY(-2px);
}

/* The row that sits at the FOOT of the story — the share buttons and the app
   badges. Identical to the row under the byline, except that the rule
   separating it from the article sits ABOVE it rather than below: up there the
   line closes off the byline, down here it closes off the story.

   Positional, not by content: `.at-foot` is whatever ends up at the bottom, so
   the two rows can be swapped in the markup without touching this. */
.single-post .share-bar.at-foot {
  margin: 24px 0 6px;
  padding: 18px 0 0;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Store badges + Google follow buttons — App Store, Google Play, "Add as a
   preferred source" and "Follow on Google News" — one uniform set of four
   pills, all .app-btn, all in one .share-stores group. They used to be two
   visually different families (gold NNA badges vs white Google-branded
   chips), which is exactly what the client flagged as inconsistent and prone
   to breaking the row on smaller screens: four differently-sized items wrap
   unpredictably where four identical ones wrap as clean pairs. Giving all
   four the same class means "uniform" is enforced by having one rule instead
   of relying on two rules to keep matching by hand. The Google icons keep
   their brand colours — each path/rect carries its own fill= attribute, which
   wins over the shared `fill: #dbbc6c` on the svg — everything else (box,
   border, icon size, label layout) is identical across all four.

   This group's real available width is the article column, not the
   viewport — the sidebar rail (see SIDEBAR RAIL above) eats up to ~340px, so
   a fixed viewport-width breakpoint (e.g. "wrap below 1286px") lands at the
   wrong place. An auto-fit grid that recalculates its own column count made
   that worse, not better: however many badges fit at their minimum width is
   however many it drew per row, so a container a few pixels short of "4"
   landed on 3-then-1 instead of a clean pair. The client's ask was explicit
   — always two on top, two below, identically sized — so this is now a
   fixed 2-column grid rather than a fluid one, and .share-stores always
   wraps to its own full-width line under the share icons (flex: 1 0 100%)
   instead of sometimes sharing the icon row: one row width, one column
   count, everywhere. */
.single-post .share-bar .share-stores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1 0 100%;
  max-width: 460px;
  margin: 6px 0 0 auto;
}
.single-post .share-bar .app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  /* 0.65 alpha, not lower: this ring is the button's only boundary and has to
     clear 3:1 against the page for WCAG 1.4.11. */
  border: 1px solid rgba(193, 145, 20, 0.65);
  border-radius: 10px;
  background: rgba(193, 145, 20, 0.12);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.single-post .share-bar .app-btn:hover {
  background: rgba(193, 145, 20, 0.28);
  border-color: #c19114;
  transform: translateY(-2px);
}
.single-post .share-bar .app-btn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: #dbbc6c;
}
.single-post .share-bar .app-btn:hover svg {
  fill: #f0d488;
}
.single-post .share-bar .app-btn .app-btn-text {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}
/* "Download on" / "Get it on" / "Add as a" / "Follow on" — the same kicker
   treatment for all four, store-style. */
.single-post .share-bar .app-btn .app-btn-text small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #dbbc6c;
}

@media screen and (max-width: 768px) {
  .single-post .share-bar {
    gap: 8px;
    margin-bottom: 18px;
  }
  .single-post .share-bar .share-btn {
    width: 34px;
    height: 34px;
  }
  .single-post .share-bar .share-stores {
    max-width: none;
    margin-left: 0;
  }
  .single-post .share-bar .app-btn {
    gap: 8px;
    padding: 7px 12px;
  }
  .single-post .share-bar .app-btn .app-btn-text {
    font-size: 12px;
  }

  /* "FOLLOW US ON SOCIAL MEDIA" is nearly a phone's whole line by itself, so
     sharing a row with it left only three icons beside it and dropped the
     other two onto a second row. The label takes its own line here and the
     five icons run centred underneath it — 5 x 34px plus gaps is about 210px,
     which fits the narrowest phone comfortably. Centred rather than flushed
     left because the label above them reads as a heading for the group, and a
     heading with its row hanging off to one side looks like a mistake. */
  .single-post .share-bar.follow-bar {
    justify-content: center;
  }
  .single-post .share-bar.follow-bar .share-label {
    flex: 0 0 100%;
    margin: 0 0 4px;
    text-align: center;
  }
}

/* Small phones: the label is allowed to break where it likes and every pill
   shrinks together rather than any one of them pushing its row off the
   screen. Measured against a 360px viewport. */
@media screen and (max-width: 560px) {
  .single-post .share-bar .app-btn {
    gap: 6px;
    padding: 6px 8px;
  }
  .single-post .share-bar .app-btn svg {
    width: 16px;
    height: 16px;
  }
  .single-post .share-bar .app-btn .app-btn-text {
    font-size: 10.5px;
    white-space: normal;
  }
}