/* === Single Post (Insight Article) ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   Figma source: Insight Page Example 1 (node 548:836), 1512px frame
   ========================================================================== */

.cc-single {
  padding-top: 79px;
}

/* --- Header (x=110, y=293, w=872) --- */
.cc-single-header {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 170px var(--cc-gutter) 0;
}

.cc-single-header__title-block {
  max-width: 940px;
}

/* All three insight frames put the title at x=110 against a content edge of
   x=30 — an 80px indent, landing it on the same line as the meta *values*
   (labels at 30, values at 110). Ours sat flush to the gutter. */
.cc-single-header__title {
  max-width: 872px;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  /* 44px/53px in every frame. */
  font-size: 44px;
  line-height: 1.2;
  /* The shorthand has to come before margin-left, or it resets it. */
  margin: 0 0 0 80px;
  color: var(--cc-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Article: meta in the left rail, copy in the main column --- */
.cc-single-article {
  max-width: var(--cc-max-width);
  margin: 56px auto 0;
  padding: 0 var(--cc-gutter);
}

.cc-single-article__rule {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin-bottom: 48px;
}

/* Ratio taken from both Figma insight frames, which agree: the content rule
   runs x=28..1484 (1456 wide) and the right-hand block — hero image, standfirst
   and the two body columns — starts at x=500, i.e. 472px in. A 280px meta
   column with a 40px gap started it at 320, so the whole article sat ~140px
   left of the design and never reached the right gutter. Expressed as a ratio
   rather than pixels so it holds at every width. */
.cc-single-article__grid {
  display: grid;
  grid-template-columns: minmax(0, 472fr) minmax(0, 984fr);
  gap: 0;
  align-items: start;
}

/* The meta is one rail, not three cells.
   As separate grid children the three interleaved with the content, so each
   one landed in a row as tall as the intro, hero image or body beside it and
   they ended up hundreds of pixels apart down the page. One container holds
   them together at the top of the column; the content takes column two and
   keeps its own rows. */
.cc-single-meta {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cc-single-intro__text,
.cc-single-hero__image,
.cc-single-article__body {
  grid-column: 2;
}

/* No source? The cell simply comes out of the rail; nothing else moves,
   which is what the wrapper buys us over placing six cells by hand. */
.cc-single-meta .cc-single-meta__item--empty {
  display: none;
}

.cc-single-article__body {
  /* The hero image is 984px in both frames; the body columns are 460+35+460 =
     955 and sit inside it. */
  max-width: 984px;
}

.cc-single-body__col {
  max-width: 955px;
}

.cc-single-body__standfirst {
  max-width: 738px;
}

/* Imported articles routinely end with the source pasted in as a bare URL.
   Nothing in a long URL is a break opportunity, so without this the paragraph
   sets its own min-content width and the article overflows every phone. */
.cc-single-article__body,
.cc-single-body__col,
.cc-single-body__col p,
.cc-single-body__col li,
.cc-single-body__col a,
.cc-single-body__lead p,
.cc-single-meta__item,
.cc-single-meta__value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Label and value share a line, not stacked. Figma puts the label at x=30 and
   the value it introduces at x=110 — an 80px column for the label, so the
   values line up down the rail regardless of label length. */
.cc-single-meta__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  padding-top: 4px;
  padding-right: 24px;
}

.cc-single-meta__label {
  flex: 0 0 80px;
}

/* SOURCE / PUBLISHED / AUTHOR. Figma sets the label in dark parchment and the
   value it introduces in archive grey; ours had the label grey and the value
   black, which read as the wrong half being emphasised. */
.cc-single-meta__label {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

.cc-single-meta__value {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
}

/* The article's opening paragraph, above the hero image. Figma sets it in the
   body token but in black, and holds it to roughly half the column (460-525px
   across the two frames) rather than the full measure. */
.cc-single-intro__text {
  max-width: 525px;
  margin-bottom: 40px;
}

.cc-single-hero__image--none {
  display: none;
}

.cc-single-intro__text p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink);
  margin-bottom: 20px;
}

.cc-single-intro__text p:last-child {
  margin-bottom: 0;
}

/* The intro block can contain headings too (some articles open with one). */
.cc-single-intro__text h1,
.cc-single-intro__text h2,
.cc-single-intro__text h3,
.cc-single-intro__text h4,
.cc-single-intro__text h5,
.cc-single-intro__text h6 {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink);
  line-height: 1.48;
  margin-bottom: 12px;
}

.cc-single-intro__text figure,
.cc-single-intro__text img {
  display: none;
}

.cc-single-intro__text ul,
.cc-single-intro__text ol {
  margin: 0 0 20px 0;
  padding-left: 18px;
}

.cc-single-intro__text li {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink);
  margin: 0 0 6px 0;
  padding: 0;
}

/* --- Hero image (inside the article column) --- */
/* No fixed height. The featured images are whatever the source publication ran
   with — squares, portraits, wide landscapes — and forcing them all into one
   letterbox meant a centred crop cut the subject out of most of them. The
   block now takes the image's own proportions, so nothing is lost. */
.cc-single-hero__image {
  width: 100%;
  /* No top margin: the intro above already supplies the gap, and a margin here
     pushed the image 40px below the PUBLISHED cell it is supposed to line up
     with. Figma sets the date on the image's top edge. */
  margin: 0 0 40px;
}

.cc-single-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  /* No cap and no object-fit. The 720px max-height was meant to stop a tall
     portrait dominating, but combined with `contain` it did the opposite: a
     near-square source (this one is 2560x2524) painted 720x720 inside a 969
     box and left ~250px of empty parchment down either side. Figma gives the
     image a fixed 984 width and lets the height follow the source — 716 in one
     frame, 1148 in the other — so that is what happens here. */
}

/* --- Body: one readable column --- */
/* Whatever an article opens with before its first paragraph — usually a
   standfirst heading, sometimes a "Q & A" label. It used to be discarded, so
   it had no styling of its own; it sets above the serif lead as a small
   uppercase kicker rather than competing with it. */
.cc-single-body__standfirst {
  margin-bottom: 20px;
}

.cc-single-body__standfirst h1,
.cc-single-body__standfirst h2,
.cc-single-body__standfirst h3,
.cc-single-body__standfirst h4,
.cc-single-body__standfirst h5,
.cc-single-body__standfirst h6 {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

.cc-single-body__standfirst p,
.cc-single-body__standfirst li {
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
}

.cc-single-body__lead {
  margin-bottom: 32px;
}

.cc-single-body__lead p {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.45;
  color: var(--cc-ink-2);
}

/* 14px/148%/0.02em is the body token every other page on the site uses; the
   article was the one place running 17px at a different letter-spacing, which
   is a good part of why these pages read as a different site. Figma sets the
   same token here and buys back the readability with two 460px columns rather
   than one wide measure. */
.cc-single-body__col {
  column-count: 2;
  column-gap: 35px;
}

/* Multi-column will happily strand a subheading at the foot of column one. */
.cc-single-body__col :is(h1, h2, h3, h4, h5, h6) {
  break-inside: avoid;
  break-after: avoid;
}

/* 40px above each heading is right when one introduces a block of prose. It is
   wrong seven times in a row: the tenant list on the service-station piece is
   marked up as consecutive <h5>s, and the run came out with 56px between every
   name. Adjacent headings close up into a list. */
.cc-single-body__col :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 14px;
}

/* Same for a run wrapped in list markup, which is how the first item in that
   tenant list arrives. */
.cc-single-body__col li > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: 0;
}

.cc-single-body__col :is(li, blockquote, figure, table) {
  break-inside: avoid;
}

/* A first-child heading picks up its 44px top margin at the top of the column,
   which pushes the two columns out of alignment. */
.cc-single-body__col > :first-child {
  margin-top: 0;
}

.cc-single-body__col p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 24px;
}

/* Lists inherit nothing from the global reset, so they fall back to Kadence's
   font and size. Match the body paragraph type exactly. */
.cc-single-body__col ul,
.cc-single-body__col ol {
  margin: 0 0 20px 0;
  padding-left: 18px;
  list-style-position: outside;
}

.cc-single-body__col ul {
  list-style-type: disc;
}

.cc-single-body__col ol {
  list-style-type: decimal;
}

/* Identical to .cc-single-body__col p above. When the paragraphs moved to the
   14px body token the list items were left on the old 17px/1.65/0.1px scale,
   so any article with a bulleted list jumped a size mid-column. */
.cc-single-body__col li {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin: 0 0 6px 0;
  padding: 0;
}

.cc-single-body__col li:last-child {
  margin-bottom: 0;
}

.cc-single-body__col li p {
  margin-bottom: 0;
}

.cc-single-body__col strong,
.cc-single-body__col b {
  font-weight: 500;
}

.cc-single-body__col em,
.cc-single-body__col i {
  font-style: italic;
}

/* One subheading style, whatever level the source used.
 *
 * These used to be three: h2 at 11px, h3-h6 at 10px, and h1 as 20px serif. The
 * levels in the imported articles are arbitrary — the same kind of subheading
 * is an <h2> in one piece and an <h5> in the next — so three treatments meant
 * the same thing looked different from article to article. single.php already
 * flattens h1 into h2 and turns paragraph-length "headings" back into
 * paragraphs, so everything reaching here is a genuine subheading. */
/* Austin, matching every other subheading on the site.
 *
 * This was an 11px uppercase label, which was a defence rather than a choice:
 * the imported articles use heading tags for things that are not headings, and
 * at a serif size those came out as walls of giant text — the service-station
 * piece marks its tenant list up as seven consecutive <h5>s. That is now
 * handled where it belongs, in single.php: a heading that is the whole of a
 * list item is unwrapped back into a list item, and headings containing nothing
 * but a non-breaking space are dropped. Every heading that survives to here is
 * a real one ("Industrial property", "Risks to monitor"), so it can be set like
 * one. Checked against all 94 posts before making the change. */
/* Small uppercase label, per Figma "Insight Page Example 1": the body
   subheadings there ("RETAIL VS INDUSTRIAL PROPERTY IN AUSTRALIA...", "CAP
   RATES AND RISK PERCEPTION...") are set in the SUB HEADING 1 style, not in
   the serif. This was briefly changed to Austin 22px on my reading that an
   eyebrow-sized subhead looked wrong; the design frames show otherwise, and it
   also happens to be the treatment that survives the imported markup. */
.cc-single-body__col h1,
.cc-single-body__col h2,
.cc-single-body__col h3,
.cc-single-body__col h4,
.cc-single-body__col h5,
.cc-single-body__col h6 {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink);
  margin-top: 40px;
  margin-bottom: 16px;
  line-height: 1.48;
}

/* A few articles were pasted in with inline font styles on inline elements
   (Arial, -apple-system). Force them back to the article type. */
.cc-single-body__col span[style],
.cc-single-body__col a[style],
.cc-single-body__col b[style],
.cc-single-body__col i[style],
.cc-single-body__col em[style],
.cc-single-body__col strong[style],
.cc-single-intro__text span[style],
.cc-single-intro__text a[style],
.cc-single-intro__text b[style],
.cc-single-intro__text i[style],
.cc-single-intro__text em[style],
.cc-single-intro__text strong[style] {
  font-family: var(--cc-font-body);
  font-size: inherit;
  line-height: inherit;
}

/* --- Tables --- */
.cc-single-body__col table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin: 0 0 20px 0;
  font-family: var(--cc-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--cc-ink-2);
}

.cc-single-body__col th,
.cc-single-body__col td {
  text-align: left;
  vertical-align: top;
  padding: 10px 16px 10px 0;
  border: none;
  border-bottom: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  background: none;
}

.cc-single-body__col tr:last-child td,
.cc-single-body__col tr:last-child th {
  border-bottom: none;
}

.cc-single-body__col th {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cc-single-body__col td p {
  margin-bottom: 0;
  font-size: 12px;
}

.cc-single-body__col hr {
  height: 0;
  border: none;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin: 24px 0;
}

/* Body images are hidden by design (hero image only), so a <figure> that only
   wraps one would otherwise leave an empty gap. */
.cc-single-body__col figure {
  display: none;
}

.cc-single-body__col a {
  color: var(--cc-ink-2);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-single-body__col a:hover {
  color: var(--cc-dark-parchment);
}

.cc-single-body__col img {
  display: none;
}

/* --- Navigation (prev left at x=28, back button at x=500) --- */
.cc-single-nav {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
  margin-top: 80px;
}

.cc-single-nav__divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
}

.cc-single-nav__row {
  display: grid;
  grid-template-columns: 472px 1fr;
  margin-top: 30px;
}

.cc-single-nav__left {
  padding-left: 0;
}

.cc-single-nav__prev-date {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  margin-bottom: 12px;
}

.cc-single-nav__prev-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  max-width: 349px;
  margin-bottom: 16px;
}

.cc-single-nav__prev-title a {
  color: inherit;
  text-decoration: none;
}

.cc-single-nav__prev-title a:hover {
  color: var(--cc-dark-parchment);
}

.cc-single-nav__prev-link {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-single-nav__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 472px;
  height: 54px;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  margin-top: 30px;
}

.cc-single-nav__back:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
}

.cc-single-nav__back:focus:not(:hover),
.cc-single-nav__back:active {
  outline: none;
  background: var(--cc-bg);
  color: var(--cc-archive);
  border-color: var(--cc-archive);
}

/* --- Footer Override --- */

/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* The 80px title indent is a desktop proportion; at phone widths it just
     eats the measure. */
  .cc-single-header__title {
    margin-left: 0;
  }

  .cc-single-header {
    padding-top: 120px;
  }

  .cc-single-header__title-block {
    margin-left: 0;
  }

  .cc-single-article__grid {
    /* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its content's
       min-content size, so one unbreakable string — several of these articles
       end on a bare realcommercial.com.au URL — widened the track past the
       viewport and took the whole page sideways with it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 0;
  }

  /* The rail turns on its side here: one row across the top, everything under
     it. An empty SOURCE just leaves the flex row and the other two close up —
     no placement rules needed. */
  .cc-single-meta {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    gap: 20px;
  }

  .cc-single-meta__item {
    flex: 1 1 0;
  }

  .cc-single-intro__text,
  .cc-single-hero__image,
  .cc-single-article__body {
    grid-column: 1 / -1;
  }

  /* Three ~103px tracks at 390 cannot hold an 80px label plus its value on one
     line, so the pairs stack here. */
  .cc-single-meta__item {
    flex-direction: column;
    gap: 6px;
    padding-right: 0;
  }

  .cc-single-meta__label {
    flex: 0 0 auto;
  }

  /* Two 460px columns need ~955px of measure. Below that they turn into two
     narrow ones, so drop to a single column and let the copy run. */
  .cc-single-body__col {
    column-count: 1;
  }

  .cc-single-nav__row {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }

  .cc-single-nav__back {
    width: 100%;
    max-width: 472px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-single-header {
    padding-top: 80px;
  }


  .cc-single-header__title {
    font-size: 30px;
  }

  .cc-single-body__lead p {
    font-size: 20px;
  }




  .cc-single-nav {
    margin-top: 50px;
  }

}