/* =========================================================================
   blog.css — the episode library at /blog.

   Measured off the live page at 1280:

     hero section    blush, pad 154 / 36, marquee full bleed, then the
                     heading and intro copy on the left with the image
                     234x312 hard right
     list section    ROSE, pad 36 / 303, content 92% of the wrapper
     cards           3 columns, 354 wide, 50px gutter, no card chrome at
                     all -- transparent, no border, no radius, no image
     card title      Shrikhand 34.43 (--display-xs), line-height 1.2,
                     white, 25px under it
     card excerpt    Inter 14.4 uppercase, white

   THE HEADING IS BROWN HERE, not rose. The hero sits on blush under a
   "light-bold" theme on the original, and that theme colours headings
   #665854; the same words on the home page sit on white and come out
   rose. It is the section that decides, not the text.

   THE CARDS HAVE NO BOX. The first pass gave them white fills, borders
   and rounded corners on a white page, which is a different design.
   On the original they are text on the rose field, and the only thing
   that moves on hover is the title.

   ALL THIRTY-FIVE ARE IN THE DOCUMENT. Search and "load more" decide
   which of the existing cards are shown rather than fetching anything,
   so the library works with the script switched off, and nothing is
   hidden until blog-listing.js has run.
   ========================================================================= */

/* -------------------------------------------------------------------------
   hero
   ------------------------------------------------------------------------- */

.blog-head {
  background: var(--blush);
  /* same reasoning as the home hero: the original header is absolute
     and overlays this, so ours only owes the difference */
  padding-top: clamp(34px, 30px + 0.5vw, 46px);
  padding-bottom: 36px;
  position: relative;
  overflow: hidden;
}

/* Measured on the original: the marquee band runs 154->289 and the
   image starts at 191, so the image overlaps the band by about 98px
   and the marquee passes BEHIND it. The copy picks up 11px after the
   band ends, not 36. */
.blog-head .marquee {
  margin-bottom: 11px;
  position: relative;
  z-index: 0;
  /* the band is brown here, not rose -- same light-bold section theme
     that darkens the heading */
  color: var(--brown);
}

.blog-head__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

/* copy left, a gap, the image hard right — the same shape as the
   "get the tea" block on the front page */
@media (min-width: 880px) {
  .blog-head__grid {
    /* the fourth track is the right gutter: measured, the image ends
       129px short of the content edge rather than flush against it */
    grid-template-columns: 38.5% auto 21% 11.6%;
    gap: 0;
    align-items: start;
  }
  .blog-head__copy { grid-column: 1; }

  /* Pulled up into the marquee band and painted over it. 1.756 x the
     display size lands the top edge at the measured 191px and keeps
     that relationship as the type scales. */
  .blog-head__art {
    grid-column: 3;
    margin-top: calc(var(--display-lg) * -1.756);
    position: relative;
    z-index: 1;
  }
}

.blog-head__copy { display: grid; gap: 16px; justify-items: start; }

.blog-head h1 {
  font-size: var(--display-lg);
  line-height: var(--lh-lg);
  color: var(--brown);
}

.blog-head__copy p { color: var(--brown); }

/* Square, like the one on the front page. */
.blog-head__art {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.blog-head__art img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   search — not on the original, which had no way to find anything in
   thirty-five posts. Kept visually quiet so it reads as part of the
   rose field rather than a control panel bolted on top of it.
   ------------------------------------------------------------------------- */

.blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 36px;
}

.blog-search {
  position: relative;
  flex: 1 1 20rem;
  max-width: 26rem;
}

.blog-search input {
  width: 100%;
  padding: 8px 40px;
  border: 1px solid var(--white);
  border-radius: 300px;
  background: transparent;
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--white);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}

.blog-search input::placeholder { color: var(--white); opacity: 0.7; }

.blog-search input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.blog-search input::-webkit-search-cancel-button { display: none; }

.blog-search__icon,
.blog-search__clear {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: var(--white);
  display: grid;
  place-items: center;
}

.blog-search__icon { left: 14px; pointer-events: none; width: 16px; height: 16px; }

.blog-search__clear {
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.blog-search__clear:hover { background: rgba(255, 255, 255, 0.2); }

.blog-count {
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--white);
  flex: none;
}

/* -------------------------------------------------------------------------
   grid — 3 columns, 50px gutter, measured
   ------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  gap: 50px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  text-decoration: none;
  color: var(--white);
}

/* Measured: the text block is 283 of the card's 354. That inset only
   makes sense once the cards are in their three columns -- on a phone
   the card is the column, and squeezing it to 80% just wastes the
   screen and turns the titles into ladders. */
@media (min-width: 1000px) {
  .card { width: 80%; }
}

.card h2 {
  font-size: var(--display-xs);
  line-height: 1.2;
  letter-spacing: var(--track);
  color: var(--white);
  margin-bottom: 25px;
  transition: opacity 0.18s ease;
}

.card:hover h2 { opacity: 0.72; }

.card__meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  opacity: 0.75;
  margin-bottom: 10px;
}

.card__excerpt {
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--white);
}

.card__more {
  margin-top: 20px;
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.card:hover .card__more { text-decoration-thickness: 2px; }

/* the <li> is what the script hides, so the gap closes with it */
.blog-grid li[hidden] { display: none; }

/* -------------------------------------------------------------------------
   empty state and load more
   ------------------------------------------------------------------------- */

.blog-empty {
  text-align: center;
  padding: 70px 1rem;
  color: var(--white);
}

.blog-empty h2 {
  font-size: var(--display-sm);
  line-height: var(--lh-sm);
  color: var(--white);
  margin-bottom: 16px;
}

.blog-more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* The 404 borrows the hero but has no marquee and no image beside it. */
.blog-head--plain {
  padding-bottom: var(--pad-s);
  text-align: center;
}

.blog-head--plain .btn { margin-top: 20px; }