/* ==========================================================================
   By Jillian Rose — About Page
   Only loaded on the About page template (see functions.php), never
   site-wide. Reuses existing design-system tokens and the homepage's
   established patterns (eyebrow label, heart divider, photo-placeholder
   style, .btn-secondary) rather than inventing new ones — "should feel
   like it belongs to the same site."
   ========================================================================== */

/* ---- Shared: heart divider (same graphic/size as homepage), photo
   placeholder, placeholder copy, headline. "Script-style headline" here
   is the same serif treatment as the homepage bio headline (32px/600
   Cormorant Garamond), not the literal cursive Mrs Saint Delafield face
   — that face was deliberately reserved for the small "by" accent only,
   never running text, per an earlier decision on this project. ---- */
.about-heart-divider { display: flex; margin: var(--space-2) 0; }
.about-heart-divider-left { justify-content: flex-start; }
.about-heart-divider-center { justify-content: center; }
.about-heart-divider-img { width: 150px; height: auto; }

.about-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
  border-radius: var(--radius);
}
.about-photo-placeholder .icon { width: 40px; height: 40px; color: var(--color-text-secondary); }

.placeholder-copy { color: var(--color-text-secondary); font-style: italic; }

.about-script-headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  color: var(--color-text);
  margin: var(--space-1) 0 0;
}
.about-script-headline-center { text-align: center; }

/* Real signature graphics (attachments #1468/1469) replacing 2 headline
   lines: "The big impact." (2nd line of Section 2's headline, "The
   little things." stays real text) and "Small favorites, big joy."
   (Section 4, replaced outright with "My favorite things."). Sized by a
   shared WIDTH rather than height — unlike the single-post sidebar
   headings, these two files share nearly identical real cropped aspect
   ratios (3.81 / 3.83), so one width keeps their rendered heights
   consistent too. Alignment comes from each parent's own flex
   align-items (center for Section 2, flex-start for Section 4) — no
   extra centering margin needed on the image itself. */
.about-script-headline-img {
  display: block;
  width: 220px;
  height: auto;
  margin: var(--space-1) 0 0;
}
/* "My favorite things." (attachment #1469) only — sized up to 1.5x
   (220px -> 330px) per explicit request, while "The big impact."
   (#1468) stays at the shared 220px base above. max-width:none defeats
   base.css's sitewide `img { max-width:100% }` reset, which can cap
   this below its explicit width inside a flex column (.about-love-text)
   whose own width isn't guaranteed definite — belt-and-suspenders so
   the 330px actually renders regardless of that ambiguity. Centered
   (align-self, not the container's own left-aligned align-items) since
   this graphic has its own decorative flanking lines and reads better
   centered than left-aligned, unlike the section's list below it. */
.about-script-headline-img-love {
  width: 330px;
  max-width: none;
  align-self: center;
}

/* Real DEDICATED signature graphic (attachment #1470) for this page
   only — supersedes the earlier attempt that reused the homepage's
   eyebrow graphic (#1464). This file bundles "Hi, I'm Jillian" AND the
   heart divider into one image (real cropped aspect ~2.79:1), so it's
   sized wider than the old eyebrow-only version to keep both elements
   legible at a glance rather than shrinking the heart to illegibility. */
.about-intro-signature-img {
  display: block;
  width: 340px;
  height: auto;
}

/* ---- 1. Intro: left text / right full-height photo ---- */
.about-intro { padding: var(--space-6) 0; }
.about-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.about-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.about-intro-text .eyebrow { margin-bottom: 0; }
/* Real bio copy (3 full paragraphs) replaced one-line placeholder text —
   bare <p> carries its own bottom margin from base.css (margin:0 0
   var(--space-3)) on top of this flex column's own `gap`, which would
   double the vertical spacing between paragraphs (48px instead of the
   intended 24px). Wasn't visible with short placeholder lines; is with
   real-length copy. Zeroed here, same fix already used for .eyebrow
   above and .home-intro-text elsewhere on the site. */
.about-intro-text p { margin: 0; }
.about-intro-photo-col { display: flex; }
/* Now a real <img> (attachment #1472), not the placeholder div — height
   explicit and object-fit:cover added, rather than relying on this flex
   row's default cross-axis stretch to correctly size a replaced element
   against base.css's global `img { height:auto }` reset. Crops in from
   the edges as the box's own stretched height changes (e.g. with the
   bio text column's real content length) instead of distorting. */
.about-intro-photo {
  flex: 1;
  min-height: 420px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 2. My Everyday Why: centered, flanked by two photos ---- */
.about-why { padding: var(--space-6) 0; background: var(--color-bg-secondary); }
.about-why-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
/* Now a real <img>, not the placeholder div. Switched from a fixed
   height:260px to min-height + height:100% (matching .about-intro-photo's
   pattern) per explicit follow-up, so the photo stretches to match the
   center text column's real height instead of staying fixed — this is
   safe now that the paragraph is already shortened (text column ~320px,
   close to the original 260px), unlike the original full-length copy
   which would have stretched this to ~590px and crushed these landscape
   ~1.2:1 photos down to an unrecognizable sliver under object-fit:cover. */
.about-why-photo { width: 100%; min-height: 260px; height: 100%; object-fit: cover; }
.about-why-text { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.about-why-text .eyebrow { margin-bottom: 0; }
.about-why-text p { max-width: 46ch; }

/* ---- 3. What You'll Find Here: centered head + 6-col real grid ---- */
.about-find-here { padding: var(--space-6) 0; }
.about-find-here-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.about-find-here-head .eyebrow { margin-bottom: 0; }
.about-find-here-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Card box (white bg/radius/shadow) removed per explicit request — icons/
   labels/descriptions now sit directly on the section's own background.
   Card boundaries replaced with a thin vertical divider (border-right)
   between columns instead of a box around each tile. border-right is
   dropped on the last tile IN EACH ROW, not just the last tile overall,
   via :nth-child — otherwise the divider count would silently go wrong
   the moment the grid wraps to fewer columns at the two breakpoints
   below (6 -> 3 -> 2), which is exactly the kind of thing that looks
   "mostly right" until you actually check every viewport. */
.about-find-here-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  /* A darker --color-border-interactive divider was tried and reverted
     per explicit follow-up ("too much... prefer them lighter") — back to
     --color-border, the same soft decorative-divider token used
     elsewhere on this page (e.g. .about-newsletter's top border). */
  border-right: 1px solid var(--color-border);
  transition: color .18s ease;
}
.about-find-here-tile:nth-child(6n) { border-right: none; }
/* Icon is already --color-accent-dark by default, so a hover color swap
   there would be a no-op — the label (default --color-text) is what
   actually gives visible hover feedback now that there's no shadow/lift
   left to signal interactivity. */
.about-find-here-tile:hover .about-find-here-label { color: var(--color-accent-dark); }
.about-find-here-tile .icon { color: var(--color-accent-dark); width: 26px; height: 26px; }
.about-find-here-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  transition: color .18s ease;
}
.about-find-here-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ---- 4. A Few Things I Love: left text + heart bullets, flanked ---- */
.about-love { padding: var(--space-6) 0; background: var(--color-bg-secondary); }
.about-love-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
/* Same switch as .about-why-photo above, applied consistently rather
   than fixing one section and not the other — min-height + height:100%
   instead of a fixed height, so the photo stretches to match the text
   column (favorites list), with object-fit:cover to crop rather than
   distort. */
.about-love-photo { width: 100%; min-height: 320px; height: 100%; object-fit: cover; }
.about-love-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.about-love-text .eyebrow { margin-bottom: 0; }
.about-love-list { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.about-love-list li { display: flex; align-items: center; gap: 10px; margin: 0; }
/* fill/stroke added explicitly — the shared .icon rule in components.css
   sets fill:none/stroke:currentColor, which overrides this SVG's own
   inline fill="currentColor" stroke="none" attributes (CSS stylesheet
   rules always beat inline SVG presentation attributes, regardless of
   specificity). Without this override the bullet rendered as an outline
   heart despite its own markup already being "solid" — confirmed via
   re-audit after a screenshot showed it still looked like an outline. */
.about-love-bullet { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; fill: currentColor; stroke: none; }

/* ---- 5. Newsletter bar: thumbnail + headline/subtext + real form ---- */
.about-newsletter { padding: var(--space-5) 0; background: var(--color-white); border-top: 1px solid var(--color-border); }
.about-newsletter-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.about-newsletter-photo { width: 72px; height: 72px; border-radius: var(--radius); flex-shrink: 0; object-fit: cover; }
.about-newsletter-photo .icon { width: 24px; height: 24px; }
.about-newsletter-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--color-text);
}
.about-newsletter-text p { margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.about-newsletter-form-col { display: flex; flex-direction: column; gap: 6px; }
.about-newsletter-fineprint { font-size: 11px; color: var(--color-text-secondary); margin: 0; }
.about-newsletter-form { display: flex; gap: var(--space-2); align-items: flex-end; }
.about-newsletter-form .field { margin-bottom: 0; text-align: left; }
.about-newsletter-form label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.about-newsletter-form input { width: 180px; }
.about-newsletter-form button { white-space: nowrap; }

@media (max-width: 900px) {
  .about-intro-inner { grid-template-columns: 1fr; }
  .about-intro-photo { min-height: 280px; }
  .about-why-inner, .about-love-inner { grid-template-columns: 1fr; }
  .about-why-photo, .about-love-photo { height: 200px; }
  .about-find-here-grid { grid-template-columns: repeat(3, 1fr); }
  /* Re-scope which tile in each row loses its divider — at 3 columns
     that's every 3rd tile, not every 6th (the desktop rule above). */
  .about-find-here-tile:nth-child(6n) { border-right: 1px solid var(--color-border); }
  .about-find-here-tile:nth-child(3n) { border-right: none; }
  .about-newsletter-inner { grid-template-columns: 1fr; text-align: center; }
  .about-newsletter-form { flex-direction: column; align-items: stretch; }
  .about-newsletter-form input { width: 100%; }
}
@media (max-width: 560px) {
  .about-find-here-grid { grid-template-columns: repeat(2, 1fr); }
  .about-find-here-tile:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .about-find-here-tile:nth-child(2n) { border-right: none; }
}