/* =============================================================================
   Home page hero: the browse list.

   The approved design (preview /home-hero/, "Option D"): short one-word labels,
   hairline divided, no fills, anchored to the bottom of the photograph so the
   image still carries the hero.

   Labels are one word each on purpose. The destination is obvious from the
   section name, and "Bulls for Sale" repeated four times down a phone screen is
   noise.
   ============================================================================= */

/* ⚠️ A ZERO-HEIGHT ANCHOR, not a negative margin.

   The list has to finish flush with the bottom of the hero photograph. It used
   to be pulled up with a fixed `margin-top: -13.5rem`, under a comment claiming
   that lifted it "by its own height whatever that turns out to be". It did not:
   -13.5rem is 216px, the list is 246px, so it hung 30px BELOW the photograph at
   every width and dragged its own darkening gradient onto the pale section
   underneath. Measured on a real phone at 412px.

   The anchor is a zero-height block sitting exactly where the photograph ends,
   so `bottom: 0` on the list puts its bottom edge on that same line. The list
   is then always inside the photograph, whatever its height — which matters,
   because a fifth link went in the same day and a sixth will cost nothing.

   Absolute positioning also takes the list out of flow, which is what we want:
   it is an overlay on the hero, not a row of the page. */
.pbs-browse-anchor {
  position: relative;
  height: 0;
}

.pbs-browse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;   /* the gap either side stays click-through to the hero */
}

.pbs-browse__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 22px;
  pointer-events: auto;
}

/* Darkens the grass under the list without touching the sky or the title.
   The photograph is bright green at the foot, so white text needs this. */
.pbs-browse::before {
  content: '';
  position: absolute;
  inset: -3.5rem 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.72) 100%);
}

.pbs-browse__lbl {
  position: relative;
  font: 600 10px 'Be Vietnam Pro', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.9);
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.pbs-browse__row {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pbs-browse__row a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 14px 'Be Vietnam Pro', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  text-decoration: none;
  /* 13px each side of a 14px label is a 40px row; 15px makes it 44px, which is
     the touch floor. The list is the whole point of the change, so the targets
     have to be hittable. */
  padding: 15px 2px;
  border-top: 1px solid rgba(255,255,255,.26);
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  transition: background-color .15s ease, padding-left .15s ease;
}

.pbs-browse__row a:last-child {
  border-bottom: 1px solid rgba(255,255,255,.26);
}

.pbs-browse__row a span {
  opacity: .55;
  font-size: 15px;
}

.pbs-browse__row a:hover,
.pbs-browse__row a:focus-visible {
  background: rgba(255,255,255,.08);
  padding-left: 8px;
}

.pbs-browse__row a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Wider than a phone, the four sit in a row: a stacked list down the middle of
   a 1200px hero is a column of mostly empty space. */
@media (min-width: 769px) {
  .pbs-browse::before { inset: -3rem 0 0; }
  .pbs-browse__row {
    flex-direction: row;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.26);
  }
  .pbs-browse__row a {
    flex: 1;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.26);
    padding: 16px 14px;
  }
  .pbs-browse__row a:first-child { border-left: 0; padding-left: 0; }
  .pbs-browse__row a:last-child  { border-bottom: 0; }
  .pbs-browse__row a:hover,
  .pbs-browse__row a:focus-visible { padding-left: 14px; }
  .pbs-browse__row a:first-child:hover,
  .pbs-browse__row a:first-child:focus-visible { padding-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pbs-browse__row a { transition: none; }
}