/* ==========================================================================
   Connect 2026 - Meta line                                              T-14
   --------------------------------------------------------------------------
   The "Article  August 26, 2026  7 min Read" line at the top of every reader.

   MEASURED on artboard p3:
     all three parts   6.9pt Medium x2.4 = 17px  (--cn-text-meta)
     gap between parts ~5pt = 12px, no separator character
     THE WHOLE LINE is topic-coloured, not just the type label

   The artboard draws it at ~80% opacity of the topic colour (#c44eff is
   exactly #b521ff at 80% on white). We use the solid -ink variant instead -
   this is 17px text, and the tint would push contrast further below AA.

   LISTING CARDS SHOW NO DATE in the design, only readers do. The `date` slot
   here can be switched on for listings once the client confirms - see the
   open questions in CONNECT2026.md.

   DEPENDS ON: tokens.css, components/topic.css
   ========================================================================== */

/*
   CENTRE, NOT BASELINE - because of the lockup.

   The row was align-items:baseline for the text items, with the Connect Plus
   lockup opted out to align-self:center. Two different references on one
   line: the text items settled at the top of a 31px line box that only the
   lockup was tall enough to fill, so on every premium reader "In-depth  March
   31, 2026" floated a third of the way up the logo. Reported by the test team
   with a screenshot.

   Centring everything puts the type on the lockup's own midline, which is
   what p9 draws. The three text items are one size, so they still share a
   baseline with each other.
*/
.cn-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cn-space-3);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  line-height: 1.4;
  color: var(--cn-ink-muted);
  margin-bottom: var(--cn-space-3);   /* 12 - artboard 10, meta sits tight to the hero */
}

/*
   Connect Plus lockup, premium readers only (p9, p11, p14).

   MEASURED on p9 at 6x: the lockup is 147.6 x 31.2px with a 20.4px gap before
   the type label, and its aspect is 4.731. ConnectPlusLogo.png's mark is
   1033 x 217 - aspect 4.76 - so it is the same artwork.

   WHY IT IS CROPPED AND NOT JUST SIZED. The file is a 1280 x 720 canvas with
   the mark floated in the middle of it at (115, 239). Setting width:148px on
   the image would draw a 31px lockup inside a 103px-tall block of white,
   pushing the meta line apart and floating the logo above the baseline. So the
   span is the measured box, overflow is hidden, and the image is scaled up and
   pulled back by the mark's own offset:

     scale       148 / 1033        = 0.14327
     image       1280 x 0.14327    = 183.4px wide
     offset      -115 x 0.14327    = -16.5px      -239 x 0.14327 = -34.2px
     mark height  217 x 0.14327    = 31.1px       matches the measured 31.2

   Re-derive these four numbers if the asset is ever re-exported trimmed; a
   trimmed file would need none of this and the rule becomes width + height.

   max-width:none is not optional - the global img{max-width:100%} in the page
   reset would otherwise clamp the image back to the 148px box and undo it.
*/
.cn-meta-line__plus {
  display: inline-block;
  position: relative;
  width: 148px;
  height: 31px;
  overflow: hidden;
  /*
     The row is a flex box with align-items:baseline, and a flex item with
     overflow:hidden takes its BOTTOM MARGIN EDGE as its baseline - so the
     whole 31px lockup would hang below the 17px type instead of sitting with
     it. Centring is what p9 draws and is the only alignment that survives the
     type wrapping to two lines on a phone.
  */
  /*
     p9 puts 20.4px between the lockup and the type where the row's own gap is
     12, so top up the difference rather than widening the gap for every item.
  */
  margin-right: var(--cn-space-2);
  /* Fallback only: shown if the image 404s, clipped to the same box. */
  font-size: var(--cn-text-meta);
  line-height: 31px;
  color: var(--cn-ink);
  white-space: nowrap;
}

.cn-meta-line__plus img {
  position: absolute;
  left: -16.5px;
  top: -34.2px;
  width: 183.4px;
  height: auto;
  max-width: none;
}
.cn-meta-line__plus strong {
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-cyan);
}

/* Each part inherits the topic colour from data-topic on the container. */
/*
   nowrap keeps "August 26, 2026" and "7 min Read" from breaking mid-phrase -
   they are short, fixed shapes and a break inside them reads as a typo.
*/
.cn-meta-line__item { white-space: nowrap; }

/*
   THE TYPE ITEM IS THE EXCEPTION, and it has to be.

   Everywhere else the type is one short word. On the magazine article reader
   it names the edition - "Connect Magazine August Edition 2026" - which
   measured 411px against a 343px column on a 375px phone and pushed the whole
   DOCUMENT to 427: a horizontal scrollbar on every magazine article, from one
   nowrap. Wrapping is the right behaviour for a label of unknown length.
*/
.cn-meta-line__item--type { white-space: normal; }

/*
   BRAND TONE - the two magazine readers.

   p11 and p12 both draw the meta line in cyan rather than a topic colour,
   sampled (0.288, 0.774, 0.991). A magazine issue is not filed under one of
   the fourteen topics, so there is no topic colour to take, and the fallback
   grey would read as a line that failed to resolve.

   --cn-fam-cyan-ink (#027db3), not --cn-cyan: this is 17px text and #1cb7fc
   measures 2.28:1 on white. Same rule the topic palette already follows for
   Regulation and Compliance, which is the cyan topic.

   AFTER the [data-topic] rules in topic.css? No - topic.css loads earlier, and
   this is a class against an attribute selector, so specificity (0,1,1) beats
   (0,1,0) either way. Verified rather than assumed, because a magazine article
   does carry preference tags, so data-topic can be populated here too.
*/
.cn-meta-line--brand,
.cn-meta-line--brand[data-topic] { color: var(--cn-fam-cyan-ink); }

/* Back link sits above the meta line on every reader: "< Back to Articles" */
.cn-back-link {
  display: inline-block;
  margin-bottom: var(--cn-space-4);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  color: var(--cn-ink-body);
}
.cn-back-link:hover { color: var(--cn-cyan); }

/*
   The back link is 18px tall as plain text, which fails the >=44px tap target
   rule in CONNECT2026.md 4.7. It is the FIRST control on every reader, so it
   is the one most likely to be tapped and missed. Padding rather than a
   height so the text stays put and only the hit area grows.
*/
@media (max-width: 767px) {
  .cn-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.cn-back-link::before { content: "\2039\00a0"; }

/* =========================================================== RESPONSIVE == */
/*
   T-40: the meta line already wraps (flex-wrap), so it needs no structural
   change - only a tighter gap so "Article / August 26, 2026 / 7 min Read"
   stays on one line as long as possible on a narrow screen.
*/
@media (max-width: 767px) {
  .cn-meta-line { gap: var(--cn-space-2); font-size: var(--cn-text-label); }
  .cn-back-link { font-size: var(--cn-text-label); }
}