/* ==========================================================================
   LANDING — /industry/ and /blog/
   --------------------------------------------------------------------------
   THIS FILE IS DELIBERATELY SMALL. Almost everything the two landing pages
   need already exists in rebuild/css/templates/insurance-index.css, which was
   written for /insurance/ in the same sweep: the hero treatment, the band
   head, the featured-card grid, the directory band, the proof strip, the
   closing gold band and the locations strip are all .br-ix__* / .br-places-*
   components and they are REUSED here, not re-declared. Load order is
   listing.css → insurance-index.css → this file.

   So what is left is only the three things /industry/ and /blog/ need that
   /insurance/ does not:

     1. The photo hero applied to listing.html's existing masthead, so those
        pages keep ONE <h1> in one place instead of growing a second one.
     2. .br-ix__card--photo — the industry card is a photograph with the label
        over it, where the cover card is a white tile with a gold icon. Same
        component, different ground. (His site makes the same distinction, and
        it is the right one: an industry is a place you recognise; a cover
        type is a term you read.)
     3. The /blog/ index as a thumbnail card grid rather than a column of
        titles. Every post record already carries a `hero`.

   If a rule below starts to look like a component rather than a variant, it
   belongs in insurance-index.css with its siblings — move it, do not fork it.

   THE LAW. No markup or CSS lifted from his WordPress build, and none of the
   banned third-party class prefixes — `node scripts/gate.mjs` holds the list
   and is the check that matters. Every selector here is .br-*.
   ========================================================================== */

/* ==========================================================================
   1 · THE MASTHEAD, RE-SURFACED AS A PHOTO HERO

   listing.html's masthead already holds the eyebrow, the <h1>, the lede and
   the count. Handing it .br-ix__hero + .br-on-photo (on the block) and
   .br-ix__hero-inner + .br-on-dark (on the container) gives it the hero
   treatment /insurance/ uses — same overlay, same centred 54rem measure, same
   asymmetric padding — without a second heading anywhere in the tree.

   Four rules are needed on top of that, and only four:
   ========================================================================== */

/* (a) The block's own band padding has to go, or the section pads twice —
       .br-ix__hero-inner is now carrying it. */
.br-listing__head--photo { padding-block: 0; }

/* (b) The photograph, and where it is focused. Both are per-page data, passed
       as custom properties from the generator, with the shared banner and a
       centred focal point as the fallbacks so a page that sets nothing still
       gets a hero rather than a black box.

       THE FOCAL POINT IS NOT DECORATION. hero.css measured 7.4:1 worst-case
       contrast for white type against the banner under this overlay, and that
       number belongs to a REGION of the photograph, not to the file. Moving
       the focus is how a page reuses the measured photograph and still looks
       like its own page. */
.br-listing__head--photo {
  background-image: var(--br-photo-overlay), var(--br-landing-hero, url("../../assets/homebanner.jpg"));
  background-position: 0% 0%, var(--br-landing-hero-pos, 50% 50%);
}

/* Below 768 the small plate is sharper per device pixel and several times
   lighter over the wire. Falls through to the large one when a page sets only
   that, so a page never has to supply two files to get a hero. */
@media (max-width: 767px) {
  .br-listing__head--photo {
    background-image: var(--br-photo-overlay), var(--br-landing-hero-sm, var(--br-landing-hero, url("../../assets/homebanner.jpg")));
  }
}

/* (c) The three masthead lines are coloured by listing.css for the grey band
       — literal values, so .br-on-dark cannot reach them. Restated for the
       photo surface, matching .br-ix__hero-eyebrow / -title / -lede exactly:
       gold eyebrow (the #8a6d00 accent is invisible on a photograph), white
       headline (a full-width gold h1 is the dark-slab treatment, not the
       hero's), and the lede at 85% white. */
.br-listing__head--photo .br-listing__eyebrow { color: var(--br-gold); }
.br-listing__head--photo .br-listing__title { color: var(--br-text-strong); }
.br-listing__head--photo .br-listing__intro { color: var(--br-white-a85); }
.br-listing__head--photo .br-listing__count { color: var(--br-white-a85); }

/* (d) Both lines carry a measure utility (.br-measure-wide, .br-measure) whose
       max-width is correct and whose default margin is not: a centred column
       needs the box centred too, or a capped paragraph sits hard left under a
       centred headline. */
.br-listing__head--photo .br-listing__title,
.br-listing__head--photo .br-listing__intro { margin-inline: auto; }

/* base.css gives every heading `overflow-wrap: break-word`, which under
   `text-wrap: balance` lets the balancer split a word with no hyphen to even
   the lines. Same fix, same reason, as .br-hero__title and .br-ix__hero-title. */
@media (min-width: 320px) {
  .br-listing__head--photo .br-listing__title { overflow-wrap: normal; }
}

/* The standfirst — the longer positioning paragraph Warren runs under the
   lede on both landing pages. Quieter than the lede and held to the prose
   measure so it cannot become a wall of centred type. */
.br-landing__head-note {
  margin: var(--br-flow-sm) auto 0;
  max-width: 44rem;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-white-a85);
}

/* ==========================================================================
   2 · .br-ix__card--photo — THE INDUSTRY CARD

   The cover card is a white tile: gold icon, title, one line, arrow. The
   industry card is that card's information over a photograph of the industry.
   Everything structural — the grid, the stretched link, the hover lift, the
   arrow nudge, the focus ring on the card rather than the link — is inherited
   from .br-ix__card and is not restated here.

   The photograph is the one the target page already uses as its hero, so the
   grid needs no new photography and every card shows the reader where they
   are about to land.
   ========================================================================== */

.br-ix__card--photo {
  /* .br-card supplies white fill + padding; the photo replaces the fill and
     the scrim needs the padding to sit above it, so both move to the body. */
  background-color: var(--br-ink);
  background-size: cover;
  background-position: 50% 50%;
  padding: 0;
  overflow: hidden;
  min-height: 19rem;
  justify-content: flex-end;
  box-shadow: none;
  color: var(--br-white);
}

/* The scrim. Two stops weighted to the lower two thirds, so the top of the
   photograph stays a photograph and the type below it clears AA. Same ink as
   --br-photo-overlay, so the page darkens with one colour rather than two. */
.br-ix__card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 25, 2, 0.05) 0%,
    rgba(31, 25, 2, 0.40) 34%,
    rgba(31, 25, 2, 0.88) 68%,
    rgba(31, 25, 2, 0.95) 100%
  );
}

.br-ix__card--photo:hover { box-shadow: var(--br-shadow-sm); }
.br-ix__card--photo:focus-within { box-shadow: var(--br-shadow-sm); }

.br-ix__card-plate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--br-card-px);
}

/* The gold icon tile reads as a smudge over a photograph at the cover card's
   pale wash, so on this variant it takes the solid gold and the ink glyph the
   rest of the dark surfaces use — and it drops to the small size, because at
   72px over an image it is the loudest thing on the card. */
.br-ix__card--photo .br-ix__card-icon {
  width: var(--br-icon-circle-sm);
  height: var(--br-icon-circle-sm);
  background: var(--br-gold);
  color: var(--br-ink);
}
.br-ix__card--photo .br-ix__card-icon > svg {
  width: var(--br-icon);
  height: var(--br-icon);
}

.br-ix__card--photo .br-ix__card-title { color: var(--br-white); }
.br-ix__card--photo .br-ix__card-text { color: var(--br-white-a85); }
.br-ix__card--photo .br-ix__card-more { color: var(--br-gold); }

/* A photograph and a gradient are both dropped in forced colours, so the card
   has to be legible with neither. */
@media (forced-colors: active) {
  .br-ix__card--photo { background-image: none !important; border: 1px solid CanvasText; }
  .br-ix__card--photo::before { background: Canvas; }
  .br-ix__card--photo .br-ix__card-title,
  .br-ix__card--photo .br-ix__card-text,
  .br-ix__card--photo .br-ix__card-more { color: CanvasText; }
}

/* ==========================================================================
   3 · THE DIRECTORY ON A LANDING PAGE

   /blog/ only, now. It used to serve /industry/ as well, whose 31-entry "The
   complete list" was the same block on the same surface — that band came out
   on Warren's review and /industry/ passes no entries at all any more, so this
   rule has nothing to select there. /industry/ still carries
   .br-listing--landing: the class describes the page's shape, not that one
   band, and the selector is simply inert on it.
   ========================================================================== */
.br-listing--landing .br-listing__index {
  background: var(--br-bg-band);
  padding-block: var(--br-flow-sm) var(--br-section-y);
}

/* ==========================================================================
   4 · /blog/ — POST CARDS

   listing.css flows the 39 articles through CSS columns as title + excerpt.
   Every post record carries a `hero`, an author and a date, so the index can
   be the card grid his blog is at no content cost — and the thumbnail plus
   the dateline are the two things a reader actually uses to decide whether a
   piece is worth opening.
   ========================================================================== */

.br-listing--posts .br-listing__list {
  column-count: initial;
  display: grid;
  gap: var(--br-flow-2xs);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) { .br-listing--posts .br-listing__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .br-listing--posts .br-listing__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.br-listing--posts .br-listing__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 0;
  padding: 0;
  overflow: hidden;
  background: var(--br-bg-surface);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-ring-hairline);
  transition: box-shadow var(--br-dur) var(--br-ease),
              transform var(--br-dur) var(--br-ease);
}

/* listing.css tints the row on hover; a card lifts instead, exactly as
   .br-ix__card does, so the two grids behave identically under the pointer. */
.br-listing--posts .br-listing__item:has(.br-listing__link:hover),
.br-listing--posts .br-listing__item:has(.br-listing__link:active) {
  background: var(--br-bg-surface);
  box-shadow: var(--br-shadow-sm), var(--br-ring-hairline);
  transform: translateY(-2px);
}

.br-listing--posts .br-listing__item:focus-within {
  box-shadow: var(--br-shadow-sm), var(--br-ring-hairline);
  outline: var(--br-icon-stroke) solid var(--br-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .br-listing--posts .br-listing__item { transition: none; }
  .br-listing--posts .br-listing__item:has(.br-listing__link:hover) { transform: none; }
}

.br-post-card__figure {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--br-bg-band);
  overflow: hidden;
}

.br-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--br-dur-slow) var(--br-ease-emphasis);
}

.br-listing--posts .br-listing__item:has(.br-listing__link:hover) .br-post-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .br-post-card__img { transition: none; }
  .br-listing--posts .br-listing__item:has(.br-listing__link:hover) .br-post-card__img { transform: none; }
}

.br-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--br-card-px);
}

.br-listing--posts .br-listing__date { margin: 0 0 var(--br-flow-3xs); }
.br-listing--posts .br-listing__item-title { margin: 0; }

/* NOT `flex: 1 1 auto`. listing.css clamps this to two lines with
   -webkit-line-clamp, which works by capping the box's height — and a flex
   item told to grow overrides that cap, so the clamp still paints its ellipsis
   on line two and then prints line three underneath it. Measured: every card
   whose description ran past two lines shipped a third, orphaned line under
   the "…". The slack is taken up by the meta row instead. */
.br-listing--posts .br-listing__excerpt { margin-top: var(--br-flow-3xs); }

/* The stretched hit area, same device as .br-ix__card-link. The underline
   would fight the card's own hover state, and the card is the affordance. */
.br-listing--posts .br-listing__link { text-decoration: none; }
.br-listing--posts .br-listing__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.br-listing--posts .br-listing__link:focus-visible { outline: none; }  /* the card wears it */

/* `margin-top: auto` pins this to the card's floor, so the bylines in a row of
   cards line up even when one title wraps to three lines and its neighbour
   sets one. Same device as .br-ix__card-more. */
.br-post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--br-space-2);
  margin-top: auto;
  padding-block-start: var(--br-flow-xs);
  padding-top: var(--br-flow-3xs);
  border-top: 1px solid var(--br-border);
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-neutral-700);
}

.br-post-card__more {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);
  font-size: var(--br-label-size);
  line-height: var(--br-label-lh);
  font-weight: var(--br-label-weight);
  letter-spacing: var(--br-label-ls);
  color: var(--br-text-accent);
}

.br-post-card__more > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--br-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--br-dur) var(--br-ease);
}

.br-listing--posts .br-listing__item:has(.br-listing__link:hover) .br-post-card__more > svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .br-post-card__more > svg { transition: none; }
  .br-listing--posts .br-listing__item:has(.br-listing__link:hover) .br-post-card__more > svg { transform: none; }
}

@media (forced-colors: active) {
  .br-listing--posts .br-listing__item { border: 1px solid CanvasText; }
}