/*
 * synaq-overrides.css
 * ---------------------------------------------------------------------------
 * Deliberate CSS changes that DIVERGE from the legacy site. Everything else in
 * this project reproduces www.synaq.com exactly; anything in this file is an
 * intentional fix, and each rule says what it fixes and why.
 *
 * Keep this file small. If it grows, the right answer is to fix the source in
 * clarity.min.css (once Clarity hand over the SCSS) rather than pile up
 * overrides here.
 * ---------------------------------------------------------------------------
 */

/* ---------------------------------------------------------------------------
 * Blog hero banner overflow.
 * Reported by Sam 2026-09-07. Reproduces identically on the legacy site — this
 * is a pre-existing bug being fixed, not a migration regression.
 *
 * THE CAUSE
 * /media/1776/desktop-sam-gelbart.png is 4253x1600 (2.658:1): a composite with
 * the portrait on the left and headline copy baked into the right-hand side.
 * The stock rule pins the panel at a fixed height:
 *
 *     .page-header .panel { height: 650px; background-size: cover !important; }
 *
 * At 650px tall, showing the whole 2.658:1 image needs 650 x 2.658 = 1728px of
 * panel width. Narrower than that and `cover` scales to fill the height and
 * crops horizontally — and because .blog .page-header .panel also sets
 * background-position: center, it crops from BOTH sides, cutting the portrait
 * on the left and the headline mid-word on the right. Worst between the 767px
 * mobile breakpoint and ~1728px, which is most laptop windows.
 *
 * THE FIX
 * Let the panel's height follow the image's own aspect ratio, so `cover` never
 * has to crop sideways. Clamped at both ends:
 *   min-height 300px  keeps room for the overlaid copy (h1 + p + button ~200px)
 *     on narrow desktops, where a pure ratio would give only ~289px
 *   max-height 650px  preserves the original proportions on wide screens, where
 *     the panel is already wider than the image needs
 * Below 768px the portrait mobile image and its own rules still apply, so the
 * mobile layout is untouched.
 *
 * Scope: .responsive-banner is used by exactly three pages — /blog/, /blog/2/
 * and /blog/articles/ — all sharing this one image. No other banner is affected.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .responsive-banner .panel {
    height: auto;
    aspect-ratio: 4253 / 1600;
    min-height: 300px;
    max-height: 650px;
  }
}

/* Fallback for browsers without aspect-ratio (pre-2021). They keep the stock
 * fixed height rather than getting a collapsed panel. */
@supports not (aspect-ratio: 1 / 1) {
  @media (min-width: 768px) {
    .responsive-banner .panel {
      height: 650px;
    }
  }
}

/* ---------------------------------------------------------------------------
 * Blog hero: make the whole banner clickable.
 * Reported by Sam 2026-09-07. Also true on the legacy site — the hero carries
 * exactly ONE link, the small "Read More" button, so the banner and headline
 * are dead space despite reading as a link to the featured article.
 *
 * A CSS-only ::after "stretched link" was tried first and did not work in the
 * browser. Without a way to render and inspect stacking, the honest fix is one
 * that does not depend on pseudo-element painting order: extract.py injects a
 * REAL anchor (.synaq-hero-link) as the first child of .panel, and this rule
 * stretches it over the whole banner.
 *
 * .panel is already position:relative in clarity.min.css, so the anchor
 * positions against it. z-index 10 puts it above .copy and .overlay so a click
 * anywhere in the banner navigates; the copy underneath still renders normally
 * and the Read More button remains the visible affordance.
 * ------------------------------------------------------------------------- */
.responsive-banner .panel .synaq-hero-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  /* no text of its own — the accessible name comes from aria-label */
  font-size: 0;
  text-decoration: none;
}

/* The whole banner now behaves as a link, so say so on hover. */
.responsive-banner .panel {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Blog hero: white copy on a very light artwork.
 * Reported by the independent review, 2026-09-07. Reproduces identically on the
 * legacy site — inherited, not a migration regression.
 *
 * THE CAUSE
 * /media/1776/desktop-sam-gelbart.png is a composite: a portrait on the left, a
 * headline already baked into the right. The overlaid .copy block sits in the
 * LEFT half (col-md-6) and is white — "Featured Article", the article title and
 * the Read More button — over the palest part of the photograph. The white
 * headline also competes with the headline printed inside the image itself.
 *
 * THE FIX
 * A scrim behind the copy only: a horizontal gradient, strongest at the left
 * edge and fully transparent by 62%, so the text side darkens while the baked-in
 * headline on the right is left completely untouched. Sizing the fade to the
 * copy column rather than washing the whole panel is what keeps the artwork
 * intact — a flat overlay would dull the photograph and the embedded type with
 * it, trading one problem for another.
 *
 * Layering, which matters here because three things overlap:
 *   ::before  z-index 1  the scrim, above the background image
 *   .copy     z-index 2  the text, above the scrim
 *   .synaq-hero-link z-index 10 (declared above) stays on top so the whole
 *                                banner remains clickable
 *
 * Desktop only. Below 768px a different portrait image and its own rules apply,
 * the copy is not overlaid the same way, and the review found mobile reflowed
 * correctly — so mobile is deliberately left alone.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .responsive-banner .panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(26, 20, 48, 0.78) 0%,
      rgba(26, 20, 48, 0.62) 34%,
      rgba(26, 20, 48, 0.00) 62%
    );
  }

  .responsive-banner .panel .copy {
    position: relative;
    z-index: 2;
  }
}