/* ==========================================================================
   By Jillian Rose — Start Here Page
   Only loaded on page-templates/start-here.php (see functions.php), never
   site-wide. Uses exclusively existing design-system tokens — no new
   colors, fonts, or spacing values introduced here.
   ========================================================================== */

/* ---- Hero: split-column text/photo. Grid align-items:stretch makes
   both columns match the row's tallest content (the text column, once
   you count both script images, the heading, and both paragraphs) —
   the photo <img> has no min/max-height cap, so flex:1 + height:100% +
   object-fit:cover lets it fill that exact height instead of falling
   short and leaving empty space below it. ---- */
.start-here-hero { padding: var(--space-4) 0 var(--space-5); }
.start-here-hero-inner {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: var(--space-5);
  align-items: stretch;
}
.start-here-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
}
.start-here-hero-text p {
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 48ch;
  margin: 0;
}
/* Real script-graphic uploads (attachments #1499/#1500) — sized by
   width on each file's own real cropped aspect ratio (~3.08:1 /
   ~3.36:1 respectively — close but not identical, so a shared width,
   not a shared height, is what keeps both reading at a consistent
   visual size). */
.start-here-welcome-img {
  display: block;
  width: 230px;
  height: auto;
  margin: 0 0 2px;
}
.start-here-signoff-img {
  display: block;
  width: 260px;
  height: auto;
  margin: var(--space-1) 0 0;
}
.start-here-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, var(--text-h1));
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
.start-here-hero-photo-col { display: flex; }
/* No min/max-height here on purpose — the grid row's own height
   (driven by the text column's real content) is what the photo
   stretches to fill via height:100% + flex:1 on this flex parent. */
.start-here-hero-photo {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Shared heading treatment: "Browse by Category" / "Most-Loved
   Posts" use the real serif blog-title font (.entry-title in
   components.css: var(--font-serif), normal case), plus the same small
   heart-divider used under the Privacy Policy/Terms of Use hero title.
   .divider-motif itself is an existing site-wide component
   (components.css) — constrained to a short centered line here via
   max-width, not redefined. ---- */
.start-here-section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}
.start-here-heading-divider {
  max-width: 90px;
  margin: var(--space-2) auto var(--space-4);
}
.start-here-heading-divider .icon { width: 15px; height: 15px; color: var(--color-accent); }

/* ---- Browse by Category ---- */
.start-here-categories { padding: var(--space-6) 0; }
.start-here-categories-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.start-here-categories-head .eyebrow { margin-bottom: var(--space-1); }
.start-here-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.start-here-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border-right: 1px solid var(--color-border);
}
.start-here-category-tile:last-child { border-right: none; }
/* Real photo per category (attachments #1505-#1509) — same box
   footprint the dashed-border placeholder used before (full tile
   width, 4:3, rounded, margin-bottom), just object-fit:cover on a
   real <img> now instead of a placeholder icon. */
.start-here-category-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
}
.start-here-category-icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent-dark);
}
.start-here-category-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}
.start-here-category-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Plain-text link style shared by the category "Browse" link and the
   Most-Loved Posts card's "View Post" link — no arrow, per explicit
   request, so both read identically across the page. */
.start-here-text-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  text-decoration: none;
  margin-top: var(--space-1);
}
.start-here-text-link:hover { color: var(--color-text); }
a.start-here-text-link:hover { color: var(--color-text); }

/* ---- Most-Loved Posts: real .card/.card-grid component (components.css),
   background is the site's mauve/accent tint — same rgba(182,138,147, x)
   derivation of --color-accent already used for the affiliate-disclosure
   bubble/legal "Changes to This Policy" card, just a slightly stronger
   value since this covers a full section rather than a small card.
   Card-level overrides are scoped under .start-here-loved so the
   homepage's own use of .card is untouched. ---- */
.start-here-loved { padding: var(--space-6) 0; background: rgba(182,138,147,.12); }
.start-here-loved-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-1);
}
.start-here-loved-head .eyebrow { margin-bottom: var(--space-1); }

/* Category label ("HOME," "TRAVEL"...) moved to directly under the
   image/above the title (order:-1 puts it before the <h3>, which keeps
   its default order:0) and recolored from the shared component's grey
   (--color-text-secondary) to mauve (--color-accent-dark — the raw
   --color-accent token is decorative-only/fails text contrast per
   tokens.css, so -dark is the correct "mauve for text" token). */
.start-here-loved .card .eyebrow {
  order: -1;
  color: var(--color-accent-dark);
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}
.start-here-loved .card h3 { margin-bottom: var(--space-1); }
.start-here-loved-more { text-align: center; margin-top: var(--space-4); }

/* ---- Newsletter: page-specific "let's stay in touch." full-bleed
   banner — NOT bjr_home_newsletter() / .home-newsletter, and not the
   legal pages' .legal-newsletter either. Content block sits on the
   RIGHT (justify-content:flex-end on the wrap, right-aligned text
   block), no gradient scrim (photo shows at full opacity/clarity). ---- */
.start-here-newsletter { padding: 0; }
.start-here-newsletter-media {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.start-here-newsletter-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.start-here-newsletter-text-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.start-here-newsletter-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-2);
  max-width: 460px;
}
.start-here-newsletter-heart { width: 18px; height: 18px; color: var(--color-accent-dark); }
.start-here-newsletter-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
  color: var(--color-text);
  margin: 0;
}
.start-here-newsletter-text > p { margin: 0; color: var(--color-text); }
.start-here-newsletter-form {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 420px;
}
.start-here-newsletter-form .field { flex: 1; margin-bottom: 0; }
.start-here-newsletter-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.start-here-newsletter-form button { white-space: nowrap; }
.start-here-newsletter-fineprint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

/* ---- Explore More / Follow Along + photo stack ---- */
.start-here-explore { padding: var(--space-6) 0; }
.start-here-explore-inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-5);
  align-items: start;
}
.start-here-explore-col .widget-title { margin-bottom: var(--space-2); }
.start-here-explore-col p {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}
.start-here-explore-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.start-here-explore-list li { display: flex; align-items: center; gap: var(--space-2); }
/* Icons wrapped in .start-here-icon-badge (a <span> in the markup) —
   same circular badge treatment first built on the Contact page
   (.bjr-contact-icon-badge in contact.css), matched exactly here:
   42px circle, 1px solid --color-accent border, --color-accent-dark
   icon at 17px. */
.start-here-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;
}
.start-here-icon-badge .icon { width: 17px; height: 17px; color: var(--color-accent-dark); }
.start-here-explore-list a {
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}
.start-here-explore-list a:hover { color: var(--color-accent-dark); }
/* Free Resources / Newsletter Archive: no real destination page exists
   yet (flagged separately), so these render as plain, non-linked text
   rather than a fabricated/dead href. */
.start-here-explore-tbd { font-size: 14px; color: var(--color-text-secondary); }

/* Social icons — same circular badge treatment as the Contact page's
   "Let's Stay Connected" social row (.bjr-contact-info-social a in
   contact.css), matched exactly: 32px circle, 1px solid --color-accent
   border, --color-accent-dark icon at 15px, filled hover state. */
.start-here-explore-social { display: flex; align-items: center; gap: var(--space-2); }
.start-here-explore-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dark);
}
.start-here-explore-social a:hover { background: var(--color-button-fill); border-color: var(--color-button-fill); color: var(--color-white); }
.start-here-explore-social .icon { width: 15px; height: 15px; }

/* "Pasted photograph" polaroid stack — real, working CSS (rotation +
   overlap via absolute positioning), just no real source photos yet.
   300x270 container, each frame offset so no two overlap by more than
   roughly a third of their own width. Unchanged by this request. */
.start-here-explore-photos {
  position: relative;
  width: 300px;
  height: 270px;
}
.start-here-explore-photo {
  position: absolute;
  width: 130px;
  height: 155px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  padding: 8px 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-here-explore-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.start-here-explore-photo-1 { top: 0; left: 0; transform: rotate(-6deg); z-index: 1; }
.start-here-explore-photo-2 { top: 10px; left: 150px; transform: rotate(5deg); z-index: 2; }
.start-here-explore-photo-3 { top: 115px; left: 70px; transform: rotate(-4deg); z-index: 3; }

@media (max-width: 900px) {
  .start-here-hero-inner { grid-template-columns: 1fr; }
  .start-here-hero-photo { min-height: 280px; }
  .start-here-categories-grid { grid-template-columns: repeat(3, 1fr); }
  .start-here-category-tile { border-right: 1px solid var(--color-border); }
  .start-here-category-tile:nth-child(3n) { border-right: none; }
  .start-here-newsletter-media { min-height: 360px; }
  .start-here-newsletter-text { max-width: 100%; }
  .start-here-explore-inner { grid-template-columns: 1fr 1fr; }
  .start-here-explore-photos { grid-column: 1 / -1; margin: var(--space-3) auto 0; }
}
@media (max-width: 560px) {
  .start-here-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .start-here-category-tile:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .start-here-category-tile:nth-child(2n) { border-right: none; }
  .start-here-newsletter-text { align-items: flex-start; text-align: left; }
  .start-here-newsletter-text-wrap { justify-content: flex-start; }
  .start-here-newsletter-form { flex-direction: column; }
  .start-here-newsletter-form button { width: 100%; justify-content: center; }
  .start-here-explore-inner { grid-template-columns: 1fr; }
}