/* ============================================================
   TBI Overrides — migrated from Site Footer Code Injection
   ============================================================
   This file holds the CSS that used to live in Ghost's Site
   Footer Code Injection. Migrated to the theme so it's
   version-controlled, searchable, and easier to edit.

   Loaded from: partials/head.hbs (after dist/plugins.min.css)
   Migrated:    2026-05-04 (Round 5a)

   Sections:
     §1  Homepage grid card spacing
     §2  Hide featured-article access-icon bubble
     §3  Single post drop-cap, top divider, meta date format
     §4  Hide JS-flagged legacy bylines
     §5  Homepage / tag / post body typography (+ I-love-SF heart)
     §6  Ghost portal button styling
     §7  Homepage card "nuclear" rules (font, title, image, mobile)
     §8  Featured / Latest story toggle UI
     §9  Tag pill hover transition
   ============================================================ */


/* ============================================================
   §1  Homepage grid card spacing
   ------------------------------------------------------------
   Tames the first-row gap on the homepage masonry grid so the
   row spacing reads consistently on desktop and tablet widths.
   ============================================================ */

/* Desktop: keep spacing consistent and tame that first-row gap */
@media (min-width: 1024px) {
  .articles.grid-posts > article { margin-bottom: 44px !important; }
  .articles.grid-posts > article:nth-child(-n+3) { margin-bottom: 40px !important; }
}
/* Tablet (2-col) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .articles.grid-posts > article { margin-bottom: 44px !important; }
  .articles.grid-posts > article:nth-child(-n+2) { margin-bottom: 40px !important; }
}


/* ============================================================
   §2  Hide featured-article access-icon bubble
   ------------------------------------------------------------
   Hides the small "Featured Article" star/lock bubble that
   Edger renders on members-visible posts. We don't surface
   member-tier badges in the listing.
   ============================================================ */

a.access-icon.visibility-members.meta-info.hide-on-mobile {
  display: none !important;
}


/* ============================================================
   §3  Single post drop-cap, top divider, meta date format
   ------------------------------------------------------------
   - Removes the auto-uppercase from the post date bubble.
   - Styles the .dc-top hairline divider that the drop-cap JS
     prepends to .main-content.
   - Renders the actual drop-cap on paragraphs JS tags with
     .has-dropcap.
   - .no-dropcap is a manual escape hatch to disable a drop-cap.
   ============================================================ */

time.meta-info {
  text-transform: none !important;
}

/* Top divider style (the one we inject) */
.post-template .main-content > hr.dc-top {
  border: 0;
  border-top: 1px solid #000;          /* solid black hairline */
  margin: 1.25rem 0 1.75rem;
}

/* One and only drop-cap target */
.post-template .main-content p.has-dropcap::first-letter {
  float: left;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 3.45rem;
  line-height: .95;
  margin: .12em .18em 0 0;
  color: #111;
}

/* Smaller on phones */
@media (max-width: 767px) {
  .post-template .main-content p.has-dropcap::first-letter {
    font-size: 3.45rem;
    line-height: 1;
  }
}

/* Manual kill switch if ever needed */
.post-template .main-content p.no-dropcap::first-letter { all: unset; }


/* ============================================================
   §4  Hide JS-flagged legacy bylines
   ------------------------------------------------------------
   The drop-cap script tags an old-style "By [Name]" italic
   paragraph at the top of legacy posts with .tbi-legacy-byline
   so we can hide it without touching the post content.
   ============================================================ */

.post-template .main-content p.tbi-legacy-byline {
  display: none !important;
}


/* ============================================================
   §5  Homepage / tag / post body typography (+ I-love-SF heart)
   ------------------------------------------------------------
   - Sets serif body type for excerpts, post content, and tag
     descriptions across the site, with line-clamping on lists.
   - Strips the trailing pseudo-ellipsis that Edger adds.
   - Inverts/rotates the I-love-SF tag's heart emoji so it points
     correctly inside the vertical desktop badge.
   ============================================================ */

.post-excerpt p {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #111 !important;
  line-height: 1.55 !important;
  text-align: left;
  overflow: visible !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 8 !important;
  white-space: normal !important;
  max-height: none !important;
  text-overflow: clip !important;
}

.post-content p {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #111 !important;
  line-height: 1.55 !important;
  text-align: left;
  overflow: visible !important;
  white-space: normal !important;
  max-height: none !important;
  text-overflow: clip !important;
}

.tag-description .right p {
  font-family: Georgia, "Times New Roman", serif !important;
  color: #111 !important;
  line-height: 1.55 !important;
  text-align: left;
  overflow: visible !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 8 !important;
  white-space: normal !important;
  max-height: none !important;
  text-overflow: clip !important;
}

/* I-love-SF tag — flip the emoji vertically (mobile) */
a.ctag-i-love-san-francisco .heart-only {
  display: inline-block;
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

/* Desktop */
@media (min-width: 768px) {
  /* In the vertical badge (vertical-lr + rotate 180), the heart's
     natural point faces down; rotate it to point right */
  a.ctag-i-love-san-francisco .heart-only {
    transform: rotate(90deg);
  }
  .post-excerpt p { font-size: 1.1rem !important; }
  .tag-description .right p { font-size: 1.1rem !important; }
  .post-content .right p { font-size: 1.1rem !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .post-excerpt .tag-description p { font-size: 0.9rem !important; }
  .tag-description .right p { font-size: 0.9rem !important; }
}

/* Clean up any leftover pseudo-ellipsis */
.post-excerpt::after,
.post-excerpt p::after { content: none !important; }


/* ============================================================
   §6  Ghost portal button styling
   ------------------------------------------------------------
   Recolors the primary action button in the Ghost membership
   portal to match TBI's gold accent.
   ============================================================ */

#ghost-portal-root .gh-portal-btn.gh-portal-btn-primary {
  background: #FFD682 !important;
  color: #000 !important;
  border: none !important;
}
#ghost-portal-root .gh-portal-btn.gh-portal-btn-primary * {
  color: inherit !important;
}


/* ============================================================
   §7  Homepage card "nuclear" rules
   ------------------------------------------------------------
   These are the !important-heavy rules that pin homepage card
   excerpts, titles, and images to TBI's preferred treatment
   regardless of how Edger or Mediavine touches them.
     - Excerpt: serif, Goldilocks size, 8-line clamp.
     - Title: no underline / box-shadow.
     - Star (access-icon): hidden.
     - Image: 1:1 aspect, cover crop.
     - Mobile: prevent right-edge bleed from Masonry width calc.
   ============================================================ */

/* 1. Excerpt font + clamp */
.articles.grid-posts article .post-excerpt p {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.14rem !important;       /* Goldilocks zone (≈18.2px) */
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 8 !important;
  overflow: hidden !important;
}
@media (max-width: 767px) {
  .articles.grid-posts article .post-excerpt p {
    font-size: 1.0rem !important;
  }
}

/* 2. Title underline removal */
.articles.grid-posts article .post-title a,
.articles.grid-posts article h2 a,
.articles.grid-posts article .title a {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* 3. Catch-all star icon hider */
.articles.grid-posts article a.access-icon {
  display: none !important;
}

/* 4. Force uniform image cropping */
.articles.grid-posts article .post-format-image img,
.articles.grid-posts article .featured-image img,
.articles.grid-posts article .post-image img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;       /* square crops */
  object-fit: cover !important;
  height: auto !important;
}

/* 5. Prevent mobile right-edge bleed from Masonry width calc */
@media (max-width: 767px) {
  body { overflow-x: hidden !important; }
  .articles.grid-posts > article {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   §8  Featured / Latest story toggle UI
   ------------------------------------------------------------
   Styles the small homepage tab bar that lets readers swap
   between "Featured stories" (curated) and "The latest"
   (chronological). The toggle JS that creates this bar is
   still in Site Footer Code Injection — that script will move
   to the theme in a later round.
   ============================================================ */

#tbi-story-toggle {
  text-align: center;
  font-family: var(--epcl-font-family, 'Libre Franklin', sans-serif);
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-top: -50px;
  padding-bottom: 14px;
}
.tbi-toggle-link {
  cursor: pointer;
  color: #999;
  text-decoration: none;
  transition: color 0.2s;
}
.tbi-toggle-link:hover { color: #333; }
.tbi-toggle-link.tbi-toggle-active {
  color: #777;
  font-weight: 800;
}
.tbi-toggle-sep {
  color: #ccc;
  font-weight: 300;
}
@media (max-width: 767px) {
  #tbi-story-toggle {
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 5px;
  }
}


/* ============================================================
   §9  Tag pill hover transition
   ------------------------------------------------------------
   Subtle background fade on hover for `.primary-tag` chips
   (the colored category badges in the homepage grid). Pairs
   with the JS that randomizes their pastel colors.
   ============================================================ */

.primary-tag {
  transition: background-color .2s ease;
  color: #111 !important;
}
.primary-tag:hover {
  filter: brightness(0.95);
}