/* ============================================================
   MARYAM RAFIEE — HOME PAGE (index.html) STYLES
   Loaded together with base.css.
   ============================================================ */

/* ── HERO ── */
.hero { background: var(--cream); padding: 5rem 2rem 4rem; }
.hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 5rem; align-items: center;
}
.hero-title {
  font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text-dark); margin-bottom: 1.5rem;
}
.hero-title em { font-style: italic; color: var(--accent-text); }
.hero-bio {
  font-size: 1.125rem; line-height: 1.8; color: var(--text-mid);
  max-width: 520px; margin-bottom: 2rem;
}
.hero-photo-wrap { position: relative; }
.hero-photo-wrap::before {
  content: ''; position: absolute;
  top: 20px; left: 20px; right: -20px; bottom: -20px;
  border: 2px solid var(--sand-mid); border-radius: 6px; z-index: 0;
}
.hero-photo-wrap img {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  border-radius: 6px; display: block;
}
.hero-quote {
  position: relative; z-index: 1; background: var(--warm-white);
  border-left: 3px solid var(--accent); padding: 1rem 1.25rem;
  margin-top: 1.5rem; border-radius: 0 4px 4px 0; max-width: 380px;
}
.hero-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem; color: var(--text-mid); line-height: 1.6;
}
.hero-quote cite {
  display: block; font-style: normal; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-top: 0.5rem;
}

/* ── SECTIONS: full-viewport isolation ──
   Clicking a nav link (About/Books/Essays/Contact) should land on a
   section that fills the screen, so the next section doesn't show
   underneath it. min-height accounts for the 64px sticky header.
   Sections with more content than one screen (e.g. About's bio text)
   will simply be taller than the viewport — that's expected, the goal
   is just "no section starts inside another section's first screen." */
section { padding: 5rem 2rem; }

#books, #essays, #about, #contact {
  scroll-margin-top: 64px;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
}
#books   { background: var(--warm-white); }
#essays  { background: var(--cream); }
#about   { background: var(--warm-white); }
#contact { background: var(--cream); }

.section-inner { max-width: 1100px; margin: 0 auto; width: 100%; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem;
}
.view-all-link {
  font-size: 0.875rem; font-weight: 700; color: var(--accent-text);
  text-decoration: none; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0;
}
.view-all-link:hover { color: var(--accent-dark); }

/* ── FEATURED GRID: Books section (large + small card, image kept) ── */
.featured-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: stretch;
}
.feature-card-large {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr;
  text-decoration: none; transition: all 0.25s ease;
}
.feature-card-large:hover,
.feature-card-small:hover,
.feature-card-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.feature-image-large { width: 100%; height: 100%; object-fit: cover; }
.feature-body-large { padding: 2rem; display: flex; flex-direction: column; }

.feature-card-small {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column;
  transition: all 0.25s ease;
}
.feature-image-small { width: 100%; height: 240px; object-fit: cover; }
.feature-body-small { padding: 1.4rem; }

.feature-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.75rem;
}
.feature-title {
  font-family: var(--serif); font-size: 2rem; line-height: 1.15;
  margin-bottom: 0.75rem; color: var(--text-dark);
}
.feature-subtitle { font-style: italic; color: var(--text-light); margin-bottom: 1rem; }
.feature-excerpt { color: var(--text-mid); line-height: 1.8; flex: 1; }
.feature-small-title {
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25;
  margin-bottom: 0.5rem; color: var(--text-dark);
}
.feature-small-text { font-size: 0.9rem; line-height: 1.7; color: var(--text-mid); }
.feature-link { margin-top: 1.5rem; font-size: 0.85rem; font-weight: 700; color: var(--accent-text); }

/* Book purchase buttons on the featured "Was It Worth It" card —
   equal-width, wraps to "two on top, one full-width below" naturally. */
.book-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; justify-content: center; }

/* ── FEATURED STACK: Essays section right column ──
   Two equal, image-free mini cards stacked next to the one large
   featured essay. ORDERING CONVENTION when publishing a new essay:
   big card = latest essay, stack-top = previous essay, stack-bottom =
   the one before that (e.g. when essay-10 ships: big=10, top=9, bottom=8). */
.feature-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}
.feature-card-mini {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.4rem;
  display: flex; flex-direction: column;
  flex: 1;
  text-decoration: none;
  transition: all 0.25s ease;
}
.feature-card-mini .feature-mini-title {
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.25;
  margin-bottom: 0.5rem; color: var(--text-dark);
}
.feature-card-mini .feature-subtitle { font-size: 0.82rem; margin-bottom: 0.6rem; }
.feature-card-mini .feature-mini-text {
  font-size: 0.85rem; line-height: 1.6; color: var(--text-mid); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feature-card-mini .feature-link { margin-top: 1rem; font-size: 0.8rem; }


/* ── INDEX PAGE: ABOUT BLOCK ── */
.about-inner {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 5rem; align-items: start; max-width: 1100px; margin: 0 auto; width: 100%;
}
.about-inner .about-content p {
  margin-bottom: 1.5rem;
}
.about-inner .feature-link {
  display: inline-block;
  margin-top: 1rem;
}
.about-inner .about-links {
  margin-top: 2rem;
}
.about-inner .about-photo-wrap::after {
  content: ''; position: absolute; bottom: -16px; right: -16px;
  width: 60%; height: 40%;
  border: 2px solid var(--sand-mid); border-radius: 4px; z-index: 0;
}
.about-photo { position: relative; z-index: 1; width: 100%; border-radius: 6px; display: block; }

/* ── INDEX PAGE: CONTACT BLOCK ── */
.contact-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; max-width: 1100px; margin: 0 auto; width: 100%;
}
.contact-inner .contact-form-wrap { background: var(--warm-white); }
.contact-form-wrap {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 8px; padding: 2.5rem;
}
.form-row { margin-bottom: 1.25rem; }
.form-row label {
  display: block; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mid); margin-bottom: 0.5rem;
}
.form-control {
  width: 100%; padding: 0.75rem 1rem;
  border: 1.5px solid var(--border); border-radius: 4px;
  font-family: var(--sans); font-size: 0.95rem;
  color: var(--text-dark); background: var(--warm-white);
  transition: border-color 0.2s; outline: none;
}
.form-control:focus { border-color: var(--accent-dark); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-status {
  margin-top: 1rem; padding: 0.85rem 1rem;
  border-radius: 4px; font-size: 0.875rem; display: none;
}
.form-status.success { background: #f0f9f0; border: 1px solid #c3e6c3; color: #2d5a2d; display: block; }
.form-status.error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; display: block; }
.contact-info p { font-size: 1rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 1.5rem; }


/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-photo-wrap { order: -1; }
  .hero-photo-wrap::before { display: none; }
  .hero-photo-wrap img { max-width: 280px; margin: 0 auto; }
  .hero-quote { max-width: 100%; }

  .featured-grid { grid-template-columns: 1fr; }
  .feature-card-large { grid-template-columns: 1fr; }
  .feature-image-large { height: 320px; }

  /* About block: photo above text, Books/Essays links hidden to save room */
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-inner .about-photo-wrap { order: -1; }
  .about-inner .about-photo-wrap::after { display: none; }
  .about-inner .about-photo { max-width: 300px; margin: 0 auto; }
  .about-inner .about-links { display: none; }

  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }

  /* On mobile, full-viewport sections would otherwise force a lot of
     near-empty scroll space on short sections — drop the forced height
     and let content size naturally, since there's no "side peek" issue
     once everything is single-column anyway. */
  #books, #essays, #about, #contact { min-height: 0; display: block; }
  section { padding: 3rem 1.25rem; }
}

@media (max-width: 600px) {
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .contact-form-wrap { padding: 1.5rem; }
}