/* =========================================================================
   SA — Single Article layout
   Recreated from the 1200px-wide reference ("travel blog" article page).

   Desktop design grid (all numbers measured from the reference):
     container 975px = 225 (meta) + 25 + 475 (content) + 25 + 225 (aside)
     title offset 83px · wide image 725 × 400 · post-nav band 155px

   Everything is scoped under .sa so it won't leak into the rest of the theme.
   To restyle, edit the tokens in the first block.
   ========================================================================= */

.sa {
  /* ---- Colours --------------------------------------------------------- */
  --sa-accent: #e3262a;       /* red rules, icons, labels                 */
  --sa-heading: #1c1c1c;      /* title, serif headings, quote             */
  --sa-text: #333333;         /* body copy                                */
  --sa-label: #222222;        /* small caps labels (meta, captions)       */
  --sa-muted: #9b9b9b;        /* deck / subtitle, post-nav labels         */
  --sa-rule: #e7e7e7;         /* mobile meta underline                    */
  --sa-divider: #dedede;      /* post-nav vertical divider                */
  --sa-band: #f5f5f5;         /* previous / next post band                */
  --sa-img-ph: #e9e9e9;       /* neutral image placeholder                */
  --sa-bg: #ffffff;

  /* ---- Type ------------------------------------------------------------ */
  --sa-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sa-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --sa-caps: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --sa-caps-size: 7.5px;      /* tiny tracked uppercase labels            */
  --sa-caps-track: .15em;

  /* ---- Grid ------------------------------------------------------------ */
  --sa-container: 975px;
  --sa-pad: 0px;              /* min. side padding when viewport < container */
  --sa-gap: 25px;
  --sa-side: 225;             /* unitless ratio — side column              */
  --sa-main: 475;             /* unitless ratio — content column           */
  --sa-wide-ratio: 725 / 400; /* wide in-content image                     */
  --sa-thumb-ratio: 225 / 125;/* "Also recommended" thumbnail              */

  /* Side-column width expressed as a % of the content column. Used by the
     pull-quote, wide image and related card to step out of the column.     */
  --sa-out: calc(100% * var(--sa-side) / var(--sa-main));

  background: var(--sa-bg);
  color: var(--sa-text);
  font-family: var(--sa-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }

.sa .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Centred container */
.sa-wrap {
  width: min(var(--sa-container), 100% - 2 * var(--sa-pad));
  margin-inline: auto;
}

/* Tiny tracked uppercase label — shared by meta, captions, labels */
.sa-caps {
  font-family: var(--sa-caps);
  font-size: var(--sa-caps-size);
  font-weight: 500;
  letter-spacing: var(--sa-caps-track);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--sa-label);
}

/* Line icons (inline SVG) */
.sa-ico {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--sa-accent); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Neutral image placeholder (used when no image is available) */
.sa-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--sa-img-ph);
  color: var(--sa-muted);
}

/* =========================================================================
   1. Hero — title + deck
   ========================================================================= */
.sa-hero {
  position: relative;
  padding: 68px 0 0 83px;
}
.sa-hero::before {            /* short red rule left of the first title line */
  content: ""; position: absolute; left: 0; top: 97px;
  width: 57px; height: 1px; background: var(--sa-accent);
}
.sa-title {
  margin: 0; max-width: 660px;
  font: 400 52px/60px var(--sa-serif);
  letter-spacing: -.005em;
  color: var(--sa-heading);
}
.sa-deck {
  margin: 15px 0 0; max-width: 660px;
  font: italic 400 19px/30px var(--sa-serif);
  color: var(--sa-muted);
}

/* =========================================================================
   2. Article body grid — meta | content | (aside space)
   ========================================================================= */
.sa-article { padding-bottom: 51px; }

.sa-body {
  display: grid;
  grid-template-columns: minmax(0, 225fr) minmax(0, 475fr) minmax(0, 225fr);
  column-gap: var(--sa-gap);
  margin-top: 37px;
}
.sa-meta { grid-column: 1; grid-row: 1; }
.sa-content { grid-column: 2; min-width: 0; }

/* ---- Meta list (author / date / category) ---------------------------- */
.sa-meta__list { margin: 0; padding: 3px 0 0; list-style: none; }
.sa-meta__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 14px; margin-bottom: 11px;
}
.sa-meta__item a { color: inherit; text-decoration: none; transition: color .2s; }
.sa-meta__item a:hover { color: var(--sa-accent); }

/* ---- Content typography ---------------------------------------------- */
.sa-content {
  font-size: 12px; line-height: 20px; font-weight: 400;
  color: var(--sa-text);
}
.sa-content::after { content: ""; display: table; clear: both; }
.sa-content > :first-child { margin-top: 0; }
.sa-content > :last-child { margin-bottom: 0; }
.sa-content p { margin: 0 0 20px; }
.sa-content h2 { margin: 40px 0 16px; font: 400 26px/34px var(--sa-serif); color: var(--sa-heading); }
.sa-content h3 { margin: 32px 0 12px; font: 400 20px/28px var(--sa-serif); color: var(--sa-heading); }
.sa-content h4 { margin: 28px 0 10px; font: 400 16px/24px var(--sa-serif); color: var(--sa-heading); }
.sa-content a { color: var(--sa-accent); text-decoration: none; }
.sa-content a:hover { text-decoration: underline; }
.sa-content ul,
.sa-content ol { margin: 0 0 20px; padding-left: 18px; }
.sa-content li { margin-bottom: 4px; }
.sa-content img { display: block; max-width: 100%; height: auto; }
.sa-content figure { margin: 40px 0; }
.sa-content figcaption {
  margin-top: 10px;
  font-family: var(--sa-caps); font-size: var(--sa-caps-size); font-weight: 500;
  letter-spacing: var(--sa-caps-track); line-height: 1.4; text-transform: uppercase;
  color: var(--sa-label); text-align: left;
}

/* ---- Wide image (Image block → "Wide width") -------------------------
   Spans meta column + content column (725px); caption sits in the right
   column under a red rule.                                               */
.sa-content .alignwide {
  position: relative; clear: both;
  width: calc(100% + var(--sa-out) + var(--sa-gap));
  max-width: none;
  margin: 45px 0 46px calc(-1 * (var(--sa-out) + var(--sa-gap)));
}
.sa-content .alignwide img,
.sa-content .alignwide .sa-ph {
  width: 100%; height: auto;
  aspect-ratio: var(--sa-wide-ratio);
  object-fit: cover;
}
.sa-content .alignwide figcaption {
  position: absolute; top: 0; left: calc(100% + var(--sa-gap));
  width: calc((100% - var(--sa-gap)) * var(--sa-side) / (var(--sa-side) + var(--sa-main)));
  margin: 0; padding-top: 17px;
  border-top: 1px solid var(--sa-accent);
}

/* ---- Pull-quote (Quote or Pullquote block) -----------------------------
   Floats out into the left meta column, next to the paragraph after it.  */
.sa-content > blockquote,
.sa-content > .wp-block-pullquote {
  float: left; clear: left;
  width: var(--sa-out);
  margin: -10px 0 20px calc(-1 * (var(--sa-out) + var(--sa-gap)));
  padding: 18px 0 0;
  border: 0; border-top: 1px solid var(--sa-accent);
  text-align: left;
  font: 400 16px/25px var(--sa-serif);
  color: var(--sa-heading);
}
.sa-content > .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.sa-content > blockquote p,
.sa-content > .wp-block-pullquote p { margin: 0; font: inherit; }
.sa-content > blockquote cite,
.sa-content > .wp-block-pullquote cite {
  display: flex; align-items: center; gap: 12px; margin-top: 19px;
  font-family: var(--sa-caps); font-size: var(--sa-caps-size); font-weight: 500;
  font-style: normal; letter-spacing: var(--sa-caps-track); line-height: 1.4;
  text-transform: uppercase; color: var(--sa-label);
}
.sa-content > blockquote cite::before,
.sa-content > .wp-block-pullquote cite::before {   /* circled-person icon */
  content: ""; width: 13px; height: 13px; flex: none;
  background: var(--sa-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Ccircle cx='6.5' cy='6.5' r='5.9'/%3E%3Ccircle cx='6.5' cy='5.3' r='2'/%3E%3Cpath d='M3.4 10.7c.6-1.5 1.7-2.3 3.1-2.3s2.5.8 3.1 2.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Ccircle cx='6.5' cy='6.5' r='5.9'/%3E%3Ccircle cx='6.5' cy='5.3' r='2'/%3E%3Cpath d='M3.4 10.7c.6-1.5 1.7-2.3 3.1-2.3s2.5.8 3.1 2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- "Also recommended" card (injected after the wide image) ----------
   Floats out into the right column.                                      */
.sa .sa-related {
  float: right; clear: right;
  width: var(--sa-out);
  margin: 75px calc(-1 * (var(--sa-out) + var(--sa-gap))) 20px 0;
  padding-top: 15px;
  border-top: 1px solid var(--sa-accent);
}
.sa .sa-related__media {
  display: block; overflow: hidden;
  aspect-ratio: var(--sa-thumb-ratio);
  background: var(--sa-img-ph);
}
.sa .sa-related__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.sa .sa-related:hover .sa-related__media img { transform: scale(1.03); }
.sa .sa-related__label { display: block; margin-top: 15px; color: var(--sa-accent); font-weight: 600; }
.sa .sa-related__title { margin: 7px 0 0; font: 400 16px/20px var(--sa-serif); color: var(--sa-heading); }
.sa .sa-related__title a { color: inherit; text-decoration: none; transition: color .2s; }
.sa .sa-related__title a:hover { color: var(--sa-accent); text-decoration: none; }

/* =========================================================================
   3. Previous / next post band
   ========================================================================= */
.sa-postnav { background: var(--sa-band); }
.sa-postnav__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(764px, 100% - 2 * var(--sa-pad));
  margin-inline: auto; padding: 35px 0;
}
.sa-postnav__item {
  display: flex; align-items: center; min-height: 85px;
  color: var(--sa-heading); text-decoration: none;
}
.sa-postnav__item--prev { padding: 0 40px 0 0; }
.sa-postnav__item--next { padding: 0 0 0 96px; border-left: 1px solid var(--sa-divider); }
.sa-postnav__arrow {
  width: 14px; height: 10px; flex: none;
  fill: none; stroke: var(--sa-label); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s;
}
.sa-postnav__item--prev .sa-postnav__arrow { margin-right: 47px; }
.sa-postnav__item--next .sa-postnav__arrow { margin-left: auto; }
.sa-postnav__item--prev:hover .sa-postnav__arrow { transform: translateX(-4px); }
.sa-postnav__item--next:hover .sa-postnav__arrow { transform: translateX(4px); }
.sa-postnav__text { max-width: 240px; }
.sa-postnav__label { display: block; color: var(--sa-muted); }
.sa-postnav__title {
  display: block; margin-top: 5px;
  font: 400 16px/25px var(--sa-serif); transition: color .2s;
}
.sa-postnav__item:hover .sa-postnav__title { color: var(--sa-accent); }

/* =========================================================================
   4. Responsive
   ========================================================================= */

/* Laptop: same 3-column grid, fluid widths, slightly smaller title */
@media (max-width: 1059px) {
  .sa { --sa-pad: 40px; }
  .sa-hero { padding-left: 8.5%; }
  .sa-hero::before { width: 5.8%; top: 94px; }
  .sa-title { font-size: 46px; line-height: 54px; }
}

/* Tablet: right column folds away — caption drops under the image,
   the recommended card joins the content flow. Pull-quote stays left.  */
@media (max-width: 899px) {
  .sa { --sa-pad: 32px; --sa-side: 200; --sa-caps-size: 8.5px; }
  .sa-body { grid-template-columns: minmax(0, 200fr) minmax(0, 475fr); }
  .sa-hero::before { top: 90px; }
  .sa-title { font-size: 40px; line-height: 48px; }
  .sa-deck { font-size: 18px; line-height: 28px; }
  .sa-content { font-size: 14px; line-height: 23px; }
  .sa-content p { margin-bottom: 23px; }
  .sa-content .alignwide figcaption {
    position: static; width: auto; margin-top: 14px; padding-top: 12px;
  }
  .sa .sa-related {
    float: none; width: auto; margin: 40px 0;
    display: grid; grid-template-columns: minmax(0, 200px) 1fr; column-gap: 20px;
    align-items: start;
  }
  .sa .sa-related__media { grid-row: 1 / span 2; }
  .sa .sa-related__label { margin-top: 0; }
  .sa-postnav__item--next { padding-left: 56px; }
}

/* Mobile: single column, meta becomes a row, everything stacks */
@media (max-width: 639px) {
  .sa { --sa-pad: 20px; --sa-caps-size: 9.5px; }
  .sa-hero { padding: 44px 0 0; }
  .sa-hero::before { position: static; display: block; width: 40px; margin-bottom: 22px; }
  .sa-title { font-size: 32px; line-height: 40px; }
  .sa-deck { margin-top: 12px; font-size: 16px; line-height: 25px; }
  .sa-body { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .sa-meta, .sa-content { grid-column: 1; }
  .sa-meta { grid-row: auto; }
  .sa-meta__list {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    padding: 0 0 22px; margin-bottom: 26px; border-bottom: 1px solid var(--sa-rule);
  }
  .sa-meta__item { margin: 0; }
  .sa-content { font-size: 15px; line-height: 26px; }
  .sa-content p { margin-bottom: 22px; }
  .sa-content .alignwide { width: 100%; margin: 32px 0; }
  .sa-content > blockquote,
  .sa-content > .wp-block-pullquote {
    float: none; width: auto; margin: 32px 0;
    font-size: 19px; line-height: 29px;
  }
  .sa .sa-related { grid-template-columns: 1fr; }
  .sa .sa-related__media { grid-row: auto; }
  .sa .sa-related__label { margin-top: 15px; }
  .sa-postnav__inner { grid-template-columns: 1fr; padding: 10px 0; }
  .sa-postnav__item { min-height: 0; padding: 22px 0; }
  .sa-postnav__item--prev { padding-right: 0; }
  .sa-postnav__item--next { padding-left: 0; border-left: 0; border-top: 1px solid var(--sa-divider); }
  .sa-postnav__item--prev .sa-postnav__arrow { margin-right: 24px; }
  .sa-postnav__item--next .sa-postnav__arrow { margin-left: 24px; }
  .sa-postnav__text { max-width: none; flex: 1; }
  .sa-postnav__item--empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sa *, .sa *::before, .sa *::after { animation: none !important; transition: none !important; }
}