/* ==========================================================================
   By Jillian Rose — Homepage
   Only loaded on the homepage template (see functions.php), never
   site-wide. Uses exclusively existing design-system tokens — no new
   colors/spacing/radius values invented here.
   ========================================================================== */

.home-hero { padding: var(--space-4) 0 0; }
/* .home-hero-inner deliberately does NOT carry the .wrap class (unlike
   every other section) — that's what let .home-hero-media go fully
   edge-to-edge: .home-hero-inner has no width rule of its own, and its
   ancestor .site-inner is unconstrained (verified earlier — only
   .wrap/.content-sidebar-wrap get a max-width), so the image naturally
   spans the true viewport width with no 100vw/negative-margin hack
   needed (which would risk a horizontal-scrollbar mismatch). */
.home-hero-inner {
  position: relative;
}
.home-hero-media {
  display: block;
  /* No border-radius here anymore — a flush edge-to-edge image with
     rounded corners at the true viewport edge would look inconsistent;
     the card below keeps its own rounded corners untouched. */
  overflow: hidden;
  min-height: 420px;
}
.home-hero-media img { border-radius: 0; margin: 0; width: 100%; height: 420px; object-fit: cover; }
.home-hero-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
}
.home-hero-media-placeholder .icon { width: 40px; height: 40px; color: var(--color-text-secondary); }
/* No bottom/height is set here — top:50% + translateY(-50%) already
   centers the card without forcing it to stretch. The "fills the full
   height" symptom traced to .home-hero-title/.home-hero-excerpt having no
   font-size of their own, so they inherited the site-wide h1 (clamp up to
   44px) and body-paragraph (17px/1.75 line-height) sizing — tuned for
   full-width page content, not a narrow 360px card. That much text at
   that size wrapped into enough lines to make the card's natural content
   height balloon until it read as edge-to-edge. Card-specific, more
   compact sizing below lets it genuinely shrink to its own content, so
   the existing centering leaves photo visible above and below. */
.home-hero-card {
  position: absolute;
  /* Previously just "var(--space-4)" — that worked because this element's
     positioning ancestor also carried .wrap, so the offset was implicitly
     measured from inside .wrap's own padding. Now that .home-hero-inner
     is unconstrained (for the full-bleed image above), this reconstructs
     the same visual position explicitly: the gap to reach where the
     content column would start (0 on viewports narrower than
     --container-width, via max()), plus .wrap's own left padding, plus
     the original --space-4 offset within it — so the card lands in the
     same spot as before, this section's positioning is just no longer
     borrowing .wrap for free. */
  left: calc( max( (100% - var(--container-width)) / 2, 0px ) + var(--space-3) + var(--space-4) );
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-bg);
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 340px;
}
/* Typography hierarchy, three distinct levels: eyebrow (.eyebrow,
   global — already small/uppercase/wide-tracked, untouched here) ->
   headline (serif display, bigger + heavier than the earlier compact
   fix) -> description (small, muted). Card's own padding/max-width are
   untouched — this only changes what's inside it, not its footprint. */
.home-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  margin: var(--space-1) 0 0;
}
.home-hero-title a { color: var(--color-text); text-decoration: none; }
.home-hero-title a:hover { color: var(--color-accent-dark); }
/* Heart divider: real cropped graphic (attachment #1457), not a CSS-only
   line — sized by width with height:auto on its real (cropped) ~9.56:1
   ratio, centered via margin:auto. */
.home-hero-divider {
  display: block;
  width: 150px;
  height: auto;
  margin: 14px auto;
}
.home-hero-excerpt {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.home-start-here { padding: var(--space-6) 0; }
.home-start-here-inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-4);
}
/* Real photo (attachment #1521), portrait-oriented to match its real
   ~2:3 cropped aspect ratio, replacing the old 140x140 square
   placeholder box — width up from 140px to read as a proper tall photo
   rather than a small icon-square, height following from aspect-ratio
   rather than a second fixed value. */
.home-start-here-photo {
  width: 220px;
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.home-start-here-text p { color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.home-start-here-list { list-style: none; margin: 0; padding: 0; background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.home-start-here-list li { border-bottom: 1px solid var(--color-border); }
.home-start-here-list li:last-child { border-bottom: none; }
.home-start-here-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.home-start-here-list a:hover { color: var(--color-accent-dark); background: var(--color-bg-secondary); }
.home-start-here-list .icon { width: 15px; height: 15px; color: var(--color-accent-dark); }

@media (max-width: 900px) {
  .home-hero-media { min-height: 320px; }
  .home-hero-media img { height: 320px; }
  .home-hero-card { position: static; transform: none; margin: var(--space-3) var(--space-3) 0; max-width: none; }
  .home-start-here-inner { grid-template-columns: 1fr; text-align: center; }
  .home-start-here-photo { margin: 0 auto; }
}

.section-divider-heart {
  display: flex;
  justify-content: center;
  color: var(--color-accent);
  margin: var(--space-2) 0;
}
.section-divider-heart .icon { width: 18px; height: 18px; }

/* Explicit fixed size/weight instead of inheriting the fluid serif h2
   default (clamp() scales with viewport width) — guarantees every section
   heading renders identically regardless of surrounding container/context,
   rather than relying on cascade inheritance to happen to match. */
.home-section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-4);
}

.home-recent, .home-topics { padding: var(--space-6) 0; }
.home-recent { background: var(--color-bg-secondary); }
/* "Latest on the Blog" only (not "Featured Articles" above it, which
   shares the same .home-recent class but wasn't part of this request) —
   forces exactly 4 equal columns instead of the shared .card-grid
   component's default repeat(auto-fit, minmax(240px, 1fr)), which was
   dropping to 3 columns and wrapping the 4th card to its own row once
   4 real cards no longer fit at that 240px minimum. Scaling the cards
   down via a fixed 4-column grid keeps all 4 on one row instead. Only
   above 900px (matching this page's other breakpoints below) — under
   that, the shared component's own responsive auto-fit stacking takes
   over, same as everywhere else it's used. */
@media (min-width: 901px) {
  .home-latest .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.home-intro { padding: var(--space-6) 0; }
/* align-items:stretch (grid's own default — previously overridden to
   "center") so the photo cell stretches to the row's full height, which
   is driven by .home-intro-text's real content (script image -> title ->
   "by" mark -> bio -> button). Same technique as the Start Here hero's
   photo column (.start-here-hero-inner / .start-here-hero-photo in
   start-here.css): grid stretch + the image's own height:100% below,
   not a fixed pixel height, so the photo's top/bottom edges track
   whatever the text column's real height happens to be — top aligned
   with "Hi, I'm Jillian," bottom aligned with the "Read my story"
   button, per the reference markup. */
.home-intro-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.home-intro-photo {
  width: 210px;
  height: 100%;
  object-fit: cover;
  /* Real photo (attachment #1519) is a tall seated portrait with her
     head in the upper third — a centered crop cut off the top of her
     head. Shifted the focal point up (low Y%) so the crop keeps the
     full head in frame with room to breathe above it, same fix used on
     the single-post "About the Author" photo. */
  object-position: center 15%;
  border-radius: var(--radius); /* was 50% (circle) — now matches the soft rounded-corner radius used on the hero photo, cards, and .home-start-here-photo elsewhere on this page */
  box-shadow: var(--shadow-soft);
  display: block;
}
.home-intro-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
  box-shadow: none;
}
.home-intro-photo-placeholder .icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-secondary);
}
/* Vertical stack: label -> title -> "by" image -> bio -> CTA, each an
   even .home-intro-text flex gap apart. align-items:flex-start keeps
   every child (including the fixed-width signature image) left-aligned
   rather than flex's default stretch behavior. The .eyebrow/paragraph's
   own margins are zeroed below so they don't double up with the gap. */
.home-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.home-intro-text .eyebrow { margin-bottom: 0; }
/* Real signature image (attachment #1461), replacing the text eyebrow —
   sized by width on its real cropped ~3.97:1 aspect. Matches the
   sign-off graphic's 190px scale for visual consistency between the
   two signature-style elements. */
.home-intro-eyebrow-img {
  display: block;
  width: 240px;
  height: auto;
}
/* Matches .home-hero-excerpt exactly (14.5px/1.5/muted) — same
   typographic weight for the "description" level in both sections. */
.home-intro-text p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0;
}

/* Matches .home-hero-title exactly (serif/600/32px/1.15) — same headline
   presence in both sections, per request. */
.home-intro-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
/* Heart divider removed per request — reverted to "by" mark only. No
   align-self override left behind: everything in .home-intro-text
   (label, headline, this image, paragraph, link) now inherits the
   parent's align-items:flex-start with nothing overriding it to center,
   so all five share the same left edge. */

/* Real "by" graphic (extracted from the approved logo, with its own
   wavy line flourish baked in) instead of a font-rendered attempt —
   guarantees an exact match to the logo rather than an approximation.
   Now attachment #1458 — cropped locally to its real visible content
   before upload (the original 1536x1024 canvas was mostly invisible
   padding: the actual glyph only occupied a ~34%-65% vertical band, real
   aspect ~3.48:1, not the full canvas's ~1.5:1). That baked-in padding —
   not just insufficient CSS margin — was the main source of the "too
   much empty space" complaint: at the enlarged 150px width, the old
   uncropped file rendered a ~100px-tall box though the visible glyph
   only filled a thin strip of it. Same width preserved (enlarged size
   unchanged, per request); height now naturally ~43px at the real
   aspect ratio instead of ~100px. Small negative margin on top of that
   pulls it closer still to its neighbors — flex `gap` on
   .home-intro-text applies uniformly to every pair, so this is the only
   way to tighten spacing around just this one element without changing
   spacing elsewhere in the stack. */
.home-intro-signature-img {
  width: 150px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  margin: -14px 0;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
/* Restructured per explicit request: the photo now IS the card (full
   bleed, its own shadow/radius on .topic-tile-photo-wrap below) instead
   of sitting inside a padded white box together with the icon and
   label — that's what previously left visible white space below the
   photo. The label now sits below the photo card as a plain caption,
   not stacked inside the same white box. */
.topic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease;
}
.topic-tile:hover { transform: translateY(-2px); }

/* The photo card itself — fixed aspect-ratio (not just on the <img>)
   so this box has a real height for the photo to fill edge-to-edge,
   with nothing left over below it for the icon/label to occupy inside
   the same box. overflow:hidden clips the photo/placeholder to the
   card's own rounded corners. */
.topic-tile-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .18s ease;
}
.topic-tile:hover .topic-tile-photo-wrap { box-shadow: var(--shadow-lift); }

.topic-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback only — every tile currently has a real photo (including
   Resources, attachment #1520), but this stays in place as the same
   clearly-non-fabricated placeholder treatment used elsewhere on the
   site (.card-thumb-placeholder, .instagram-tile-placeholder) in case a
   topic is ever added before its photo is ready. */
.topic-tile-photo-placeholder {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 12px);
  background-color: var(--color-bg-secondary);
}

/* Icon badge — moved off the photo, now a normal stacked element
   between the photo and the label (photo -> badge -> name), positioned
   by .topic-tile's own flex column + centered by its align-items:center,
   no absolute positioning needed anymore. Same circular treatment
   already built for the Contact page (.bjr-contact-icon-badge in
   contact.css) and Start Here's Explore More list (.start-here-icon-
   badge in start-here.css): 42px circle, 1px solid --color-accent
   border, --color-accent-dark icon at 17px — no background fill here
   either, matching those two exactly now that it's no longer sitting on
   top of a photo. */
.topic-tile-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topic-tile-icon-badge .icon { width: 17px; height: 17px; color: var(--color-accent-dark); }

.topic-tile .topic-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .03em;
  color: var(--color-text);
}

.home-instagram { padding: var(--space-6) 0; }
.home-instagram-note {
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* .home-newsletter and its .newsletter-form styling moved to
   components.css (site-wide) alongside bjr_home_newsletter() itself,
   since page-templates/legal.php now calls the same component and this
   stylesheet is never loaded there. */

@media (max-width: 780px) {
  .home-hero-inner, .home-intro-inner { grid-template-columns: 1fr; }
  /* Stacked single-column layout at this breakpoint (grid-template-
     columns:1fr above) — there's no row to stretch to anymore, so this
     reverts to an explicit fixed height rather than the desktop's
     height:100%, which would collapse to 0 with nothing to stretch
     against. */
  .home-intro-photo { width: 100%; max-width: 280px; height: 280px; margin: 0 auto; }
}