/*
 * Clinical review block. The visible half of the medical review claim.
 *
 * New 11 August 2026. Design direction "The Rail", produced in Claude Design
 * against PHGP-Design-Kit.html and shipped from
 * "Editorial policy and clinical review/PHGP-Review-Block-Rail-Handoff.html"
 * in the project Drive. That file is the record of what was chosen and why.
 *
 * Enqueued by: inc/enqueue-css.php (handle "phgp-component-review-block"),
 * conditioned on has_meta:phgp_review_date so the CSS follows the block onto any
 * page that carries a review date, with no registry edit. Same reasoning as
 * has_pattern: on the reviews block. Rendered by inc/clinical-review-block.php.
 *
 * WHAT IT REPLACED. components/byline.css, which styled a reviewed-by line that
 * was hardcoded into the page body of Home 17432 and the 17 suburb pages. All 18
 * were migrated to [phgp_clinical_review] on 11 August 2026 and that file and its
 * registry row were deleted the same day. The one page still carrying an old style
 * review claim is the After Hours hub 16300, whose version lives inside
 * _elementor_data as a text widget in a pill shaped container, and which is being
 * left until that page comes off Elementor.
 *
 * WHAT THE SHAPE IS DOING. Two columns. The left rail carries the claim: a
 * kicker, the reviewer's face or a monogram tile of identical size, and the
 * review date set large, because the structured data claim is date anchored and
 * the reader should see the same claim the machine sees. A vertical hairline
 * separates it from the prose, which carries who and how in ordinary sentences.
 * The disclaimer runs full width beneath both columns so it stops competing with
 * the claim it used to sit inside.
 *
 * CONTRAST. Every value is --navy (12.1:1 on --paper) or --dim (6.2:1). --soft is
 * deliberately unused: at roughly 3.4:1 it fails, which is how components/prose.css
 * shipped invisible list markers on 11 August 2026. List markers here inherit the
 * li colour, so they are --dim and visible.
 *
 * BREAKPOINT. One only, the shared 960px. The handoff stacked at 560px, which left
 * a band between 561px and 960px where the 240px rail stayed while the prose column
 * fell to about 233px, roughly 25 characters a line. Stacking at 960px removes that
 * band and keeps us inside the two breakpoint convention rather than adding a third.
 *
 * Nothing moves, so there is no prefers-reduced-motion rule to write. No JavaScript.
 */

.phgp .crev {
  padding: 8px 56px 64px;
  max-width: 1280px;
  margin: 0 auto;
}

/* 860px matches .byline-inner, so the block sits on the same left edge and the
   same right edge as the thing it replaces. Changing it shifts alignment against
   the content above on all 19 pages. */
.phgp .crev-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 860px;
  margin-top: 40px;
}

.phgp .crev-left  { padding: 6px 40px 6px 0; }
.phgp .crev-right { border-left: 1px solid var(--hairline-strong); padding: 6px 0 6px 40px; }

.phgp .crev-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

.phgp .crev-id { margin-top: 16px; }

/* The monogram is a first class state, not a fallback. Same box as the photo,
   so adding a photograph later moves nothing. 8 of the 25 people on the staff
   sheet have no photo. */
/* TWO SELECTORS, and the reason matters. Imagify's WebP display method wraps
   wp_get_attachment_image() output in a <picture> and copies the class onto the
   WRAPPER, so .crev-face is a <picture> on the live site and an <img> only if
   Imagify is ever turned off. Styling the class alone therefore sized the box but
   left the photograph square and unbordered inside it. The box lives on the class,
   the visual treatment lives on the image in both arrangements. Found on the guide
   16378 proof render, 11 August 2026. */
.phgp .crev-face {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.phgp img.crev-face,
.phgp .crev-face img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline-strong);
  box-sizing: border-box;
}
.phgp .crev-mono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mint-light);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
}

.phgp .crev-date      { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); line-height: 1.2; }
.phgp .crev-datelabel { font-size: 13px; color: var(--dim); margin-top: 5px; line-height: 1.4; }
.phgp .crev-pub       { font-size: 13px; color: var(--dim); margin-top: 14px; line-height: 1.4; }

.phgp .crev-right p        { font-size: 16px; color: var(--dim); line-height: 1.65; }
.phgp .crev-right p + p    { margin-top: 12px; }
.phgp .crev-right strong   { color: var(--navy); font-weight: 600; }

.phgp .crev-right a,
.phgp .crev-links a,
.phgp .crev-sources a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong);
}
.phgp .crev-right a:hover,
.phgp .crev-links a:hover,
.phgp .crev-sources a:hover { text-decoration-color: var(--navy); }

/* Matches the only focus precedent on the site, page-team.css. */
.phgp .crev-right a:focus-visible,
.phgp .crev-links a:focus-visible,
.phgp .crev-sources a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  text-decoration-color: var(--navy);
}

.phgp .crev-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 16px;
  font-size: 14px;
}

.phgp .crev-sources { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.phgp .crev-sources h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.phgp .crev-sources ul { list-style: disc; padding-left: 20px; font-size: 14px; color: var(--dim); line-height: 1.7; }
.phgp .crev-sources li { margin: 4px 0; }
.phgp .crev-sources cite { font-style: normal; }

.phgp .crev-disclaimer {
  max-width: 860px;
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  font-size: 14px;
  color: var(--dim);
  line-height: 1.6;
}

@media (max-width: 960px) {
  .phgp .crev { padding: 8px 24px 48px; }

  /* Stacked. The identity collapses into a row so the block still opens on a
     face and a date rather than on a paragraph. */
  .phgp .crev-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .phgp .crev-left { padding: 0; }
  .phgp .crev-id   { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .phgp .crev-face,
  .phgp img.crev-face,
  .phgp .crev-face img,
  .phgp .crev-mono { width: 56px; height: 56px; margin-bottom: 0; flex-shrink: 0; }
  .phgp .crev-right {
    border-left: none;
    border-top: 1px solid var(--hairline-strong);
    padding: 20px 0 0;
    margin-top: 20px;
  }
}