/* The printed page. Geometry here must match layout.js exactly. */

.page {
  width: 816px;
  height: 1056px;
  background: #fff;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  /* The page's body face is Public Sans, matching adcompsystems.com. Before
     this rule the page inherited the CHROME font from body — an accident.
     Montserrat headings declare themselves per rule and are unaffected. */
  font-family: "Public Sans", "Source Sans 3", system-ui, sans-serif;
  box-shadow: 0 10px 40px rgba(10, 30, 70, .22);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.masthead { height: 84px; position: relative; overflow: hidden; }
.masthead .banner { display: block; width: 816px; height: auto; top: -5px;
    position: relative;}

/* The three title lines the printed issues carry in white over the navy
   band (feedback N2). The band starts about 300px in, past the diagonal;
   the text is right-aligned so it never runs into the logo. */
.masthead-meta {
  position: absolute;
  top: 0; right: 40px; bottom: 6px; left: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  color: #fff;
  font-family: Montserrat, sans-serif;
  line-height: 1.15;
}
/* The update line and the month print in the literature teal, as the rest of
   AdComp's print pieces do; the title stays white on the navy band. */
.masthead-meta .update { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.masthead-meta .title  { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 1px 0; }
.masthead-meta .month  { font-size: 12px; font-weight: 500; color: var(--teal); }

#flow {
  height: 905px;                 /* FLOW_HEIGHT */
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the page can never grow, whatever happens */
}

.block {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;                /* height is set from layout.js, never by content */
  --k: 1;                        /* fit scale, set per block */
  /* The container the conference-card query measures. It must be the BLOCK:
     .inner's layout width is 100% / --k, so a container inside it moves with
     the fit scale — content measured side by side at --k:1 could then render
     stacked (taller) once the scale was applied, clipping the bottom card.
     The block's width never depends on --k, so measure and render agree. */
  container-type: inline-size;
}

/* Everything inside a block scales together, so a bigger box reads bigger. */
.block > .inner {
  transform: scale(var(--k));
  transform-origin: top left;
  width: calc(100% / var(--k));
}

/* Dividers take NO layout height. If they occupied space, the blocks would
   share less than FLOW_HEIGHT and `sum(minimums) < 876` would stop being the
   condition for "every section can be switched on at once" — with seven
   sections and six 10px dividers, that invariant fails outright. The grab
   area is an overlay straddling the boundary instead. */
.divider {
  height: 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.divider::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: -5px;
  height: 10px;
  cursor: row-resize;
  border-radius: 2px;
  background: transparent;
}
/* Drag handles are chrome sitting on top of the page, and are hidden in
   print — so they take the chrome accent, not the printed blue. */
.divider:hover::after,
.divider.active::after { background: var(--accent); }

.row {
  display: grid;
  grid-template-columns: 1fr;    /* overridden inline for a set split */
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.row.two { grid-template-columns: 1fr 1fr; }   /* 50/50 until she drags */

.column {
  display: flex;
  flex-direction: column;
  min-width: 0;                  /* let a grid column actually shrink */
  overflow: hidden;
}

/* Between two rows. Zero height for the same reason block dividers are:
   space it occupied would come out of the page the solver already allocated. */
.rowdivider {
  height: 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.rowdivider::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; top: -5px;
  height: 10px;
  cursor: row-resize;
  border-radius: 2px;
  background: transparent;
}
.rowdivider:hover::after,
.rowdivider.active::after { background: var(--accent); }

/* Between the two columns of a row. Zero WIDTH, same reasoning. */
.splitter {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 0;
  z-index: 3;
}
.splitter::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -5px;
  width: 10px;
  cursor: col-resize;
  border-radius: 2px;
  background: transparent;
}
.splitter:hover::after,
.splitter.active::after { background: var(--accent); }

/* Labels and headings space themselves with PADDING, not margin: a heading
   background colour must cover the space around its text, and margins would
   leave white gaps between a coloured label and the coloured headline under
   it. The margin reset needs `.block` in front: eyebrow and subhead are <p>,
   and `.block p` below outweighs a bare class. */
.eyebrow {
  font-family: Montserrat, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}
.block .eyebrow { 
margin: 0 var(--bw);
    padding: 3px 4px;
    line-height: 1.2;
    font-size: 12.5px;
    width: calc(100% - var(--bw));
}

.footer {
  padding: 0 40px;
  border-top: 3px solid var(--green);
  background: var(--navy);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%;
}

/* Conference cards. Side by side when there is room, one per line when the
   block is narrower than 420px — how the .docx lays them out in a narrow
   column (feedback N6). The green line goes BETWEEN cards, never before the
   first: the old border-left on every card drew one there.
   The query container is .block (above), not .conf-cards — see the comment
   there for why. */
.conf-cards {
    display: block;
    bottom: 2px;
    min-height: fit-content;
    padding-top:2px;
    position: relative;
}
.conf-cards .cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 14px;
}
.conf-card {
  font-family: Montserrat, sans-serif;
  padding: 0 0 0 12px;
  border-left: 3px solid var(--green);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.conf-card:first-child { border-left: 0; padding-left: 0; }
.conf-card b    { font-size: 13px; font-weight: 700; color: var(--conf-name, var(--navy)); line-height: 1.2; }
.conf-card span { font-size: 11.5px; line-height: 1.25; color: var(--ink); }
.conf-card .city  { color: var(--conf-city, var(--ink)); }
.conf-card .dates { color: var(--conf-dates, var(--ink)); }

/* The flip only runs on 'auto' — a forced layout must not fight it. */
@container (max-width: 420px) {
  .conf-cards.conf-auto .cards { grid-auto-flow: row; gap: 0; }
  .conf-cards.conf-auto .conf-card {
    border-left: 0; padding: 6px 0;
    display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline;
  }
  .conf-cards.conf-auto .conf-card:first-child { padding-top: 0; }
  .conf-cards.conf-auto .conf-card + .conf-card { border-top: 1px solid var(--green); }
  .conf-cards.conf-auto .conf-card b { grid-column: 1 / -1; }
}

/* Forced stacked layout: identical to the narrow-column flip above.
   Duplicated because a container query cannot be re-entered by class —
   keep the two blocks in step. (conf-row needs no rules: side by side is
   the base layout.) */
.conf-cards.conf-stack .cards { grid-auto-flow: row; gap: 0; }
.conf-cards.conf-stack .conf-card {
  border-left: 0; padding: 6px 0;
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline;
}
.conf-cards.conf-stack .conf-card:first-child { padding-top: 0; }
.conf-cards.conf-stack .conf-card + .conf-card { border-top: 1px solid var(--green); }
.conf-cards.conf-stack .conf-card b { grid-column: 1 / -1; }

.rating-score {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: var(--rating-score, var(--blue));
  line-height: 1;
}

/* ---------- page typography ----------
   render.js has emitted these classes since the first build; no rules were
   ever written for them, so the page printed in browser defaults (feedback
   N2, N3, N10). Sizes are the unscaled values; --k scales them. */
.block p { margin: 2px 0 9px; font-size: 14.5px; line-height: 1.45; }
.block p:last-child { margin-bottom: 0; }

/* Markdown lists share the paragraph rhythm and scale with --k like text. */
.block ul, .block ol { margin: 2px 0 9px; padding-left: 22px; font-size: 14.5px; line-height: 1.45; }
.block li { margin: 0 0 3px; }
.block ul:last-child, .block ol:last-child { margin-bottom: 0; }

.headline {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin: 0;
  padding: 0 0 6px;
}
.subhead {
  font-family: Montserrat, sans-serif;
  font-size: 13.5px;
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.block .subhead { margin: 0; padding: 0 0 10px; }
.feature-body { margin: 0 0 10px; }
.rating-period { font-size: 13px; color: var(--rating-period, var(--ink)); margin-top: 2px; }

/* ---------- photos (feedback N3, T3) ----------
   --pw: width as a share of the column. Wrapping floats the figure so the
   text runs beside it; .body ends with a clearfix so the block's measured
   height includes the float. */
.photo { margin: 0 0 8px; width: var(--pw, 100%); }
.photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
.photo.pa-left   { margin-right: auto; }
.photo.pa-center { margin-left: auto; margin-right: auto; }
.photo.pa-right  { margin-left: auto; }
.photo.pa-wrap-left  { float: left;  margin: 0 12px 6px 0; }
.photo.pa-wrap-right { float: right; margin: 0 0 6px 12px; }
.body { padding: 0 10px; }
.body::after { content: ""; display: block; clear: both; }

.photo.shape-4-3 img, .photo.shape-16-9 img, .photo.shape-square img {
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}
.photo.shape-4-3 img    { aspect-ratio: 4 / 3; }
.photo.shape-16-9 img   { aspect-ratio: 16 / 9; }
.photo.shape-square img { aspect-ratio: 1; }
.photo.shape-4-3, .photo.shape-16-9, .photo.shape-square { cursor: grab; }
.photo.dragging { cursor: grabbing; }
@media print { .photo { cursor: default; } }

.quote {
  border-left: 3px solid var(--green);
  padding-left: 12px;
  font-style: italic;
}
.quote p::before { content: "\201C"; }
.quote p:last-child::after { content: "\201D"; }
.more {
  display: inline-block;
  margin-top: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}

.signature { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; }
.signature b { font-family: Montserrat, sans-serif; color: #FFF; }
.signature.contact { text-align: right; }

.callout {
  background: var(--pale);
  border-left: 4px solid var(--green);
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
}
.callout.feedback { border-left-width: 0; }
.callout b { color: var(--navy); }
.callout a { color: var(--blue); }

/* A link pinned to the block's foot, outside the scaled .inner. The block
   reserves LINK_BAND for it in layout.js/render.js, and hands it down here
   as --band (set in render.js) so the two never drift apart. */
.block.has-more > .inner { max-height: calc((100% - var(--band, 0px)) / var(--k)); }
.more.pinned {
  position: absolute; left: 0; bottom: 4px;
  margin: 0;
  background: inherit;
  padding-right: 6px;
  width: calc(100% - 16px);
  text-align: center;
}
/* On a block with no section colour the link inherits transparent; back it
   with the page's white so a clipped tail never shows through the glyphs. */
.block.bg-none > .more.pinned { background: #fff; }
/* .inner steps in by 10px when a border or section background is on (below);
   the pinned link sits outside .inner, so it needs the same inset or it
   hangs 10px further left than everything above it. */
.block:not(.bg-none) > .more.pinned,
.block:not(.bd-none) > .more.pinned { left: 10px; }

/* ---------- section appearance (feedback N4, N5, N7) ----------
   Two independent colours per section: `bg-*` paints the whole block, `hbg-*`
   paints a band behind the label and headline — so a blue heading can sit on
   a grey body. Background and border are drawn by the block, not its
   contents, so they are unaffected by --k. */
.block.bg-navy  { background: var(--navy); }
.block.bg-blue  { background: var(--blue); }
.block.bg-green { background: var(--green); }
.block.bg-pale  { background: var(--pale); }
.block.bg-grey  { background: var(--grey); }
.block.bg-teal  { background: var(--teal); }

.block.hbg-navy  .headline, .block.hbg-navy  .eyebrow { background: var(--navy); }
.block.hbg-blue  .headline, .block.hbg-blue  .eyebrow { background: var(--blue); }
.block.hbg-green .headline, .block.hbg-green .eyebrow { background: var(--green); }
.block.hbg-pale  .headline, .block.hbg-pale  .eyebrow { background: var(--pale); }
.block.hbg-grey  .headline, .block.hbg-grey  .eyebrow { background: var(--grey); }
.block.hbg-teal  .headline, .block.hbg-teal  .eyebrow { background: var(--teal); }
/* The band keeps its bottom spacing as padding, so a coloured label runs
   flush into a coloured headline with no white seam between them. */
.block:not(.hbg-none) .eyebrow  { padding: 4px 8px 8px; }
.block:not(.hbg-none) .headline { padding: 4px 8px 6px; }

/* `dark` = the section colour needs white text; `dark-head` = the heading
   band does. A light band on a dark section takes its own ink back. */
.block.dark .inner,
.block.dark .inner * { color: #fff; }
.block.dark .quote { border-left-color: #fff; }
.block.dark .callout { background: transparent; border-left-color: #fff; }
.block.dark .more.pinned { color: #fff; }
.block.hbg-pale .headline, .block.hbg-grey .headline { color: var(--navy); }
.block.hbg-pale .eyebrow,  .block.hbg-grey .eyebrow  { color: var(--blue); }
/* Teal is a light band, but the default --blue eyebrow vanishes on it —
   both lines take navy. */
.block.hbg-teal .headline, .block.hbg-teal .eyebrow { color: var(--navy); }
.block.dark-head .headline, .block.dark-head .eyebrow { color: #fff; }

/* Per-field colour picks (round 3). A 'default' pick emits no var, so the
   fallbacks below keep today's colours — including white on dark sections.
   An explicit pick is her deliberate choice and wins even on dark. These
   tie on specificity with the hbg and dark rules above, so they MUST stay
   after them in the file. */
.block[data-block-id="rating"] .eyebrow { color: var(--rating-header, var(--blue)); }
/* On a teal heading band the default falls to navy, not blue — same reason
   as the hbg-teal rule above, restated here because this section wins ties. */
.block.hbg-teal[data-block-id="rating"] .eyebrow { color: var(--rating-header, var(--navy)); }
.block.dark[data-block-id="rating"] .eyebrow,
.block.dark-head[data-block-id="rating"] .eyebrow { color: var(--rating-header, #fff); }
.block.dark .conf-card b      { color: var(--conf-name, #fff); }
.block.dark .conf-card .city  { color: var(--conf-city, #fff); }
.block.dark .conf-card .dates { color: var(--conf-dates, #fff); }
.block.dark .rating-score  { color: var(--rating-score, #fff); }
.block.dark .rating-period { color: var(--rating-period, #fff); }

/* The border is an absolutely positioned overlay: zero layout cost, which is
   what keeps the height invariants true, and each side can be switched off
   on its own (bds-*) — two bordered sections side by side need not double
   the line where they meet. */
.block:not(.bd-none)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0 solid;
}
.block.bd-navy::before  { border-color: var(--navy); }
.block.bd-blue::before  { border-color: var(--blue); }
.block.bd-green::before { border-color: var(--green); }
.block.bd-teal::before  { border-color: var(--teal); }
.block.bds-t::before { border-top-width:    var(--bw, 1px); }
.block.bds-r::before { border-right-width:  var(--bw, 1px); }
.block.bds-b::before { border-bottom-width: var(--bw, 1px); }
.block.bds-l::before { border-left-width:   var(--bw, 1px); }

/* Content steps in from a coloured or bordered edge. Padding inside .inner
   scales with --k, which is right: a bigger section gets a bigger inset. */
.block:not(.bg-none) > .inner,
.block:not(.bd-none) > .inner { padding: 0px; }

.al-left { text-align: left; }
.al-center { text-align: center; }
.al-right { text-align: right; }
.al-center .conf-cards .cards { justify-items: center; }

/* Printing: the page's own handles must not print. The page geometry rules
   live with the chrome in brand.css. */
@media print {
  @page { size: letter; margin: 0; }
  .divider, .rowdivider, .splitter { display: none !important; }
  .page { box-shadow: none; margin: 0; }
}