/* Gift guides: section-only styles. Loaded after /assets/css/site.css on /gift-guides/ pages only.
   Design pass 9 Oct 2026: shorter hero, no eyebrow, boxes for products only, icon chips,
   quiet charcoal Amazon buttons (rust stays for "Try free for 7 days"), 17px minimum text. */

/* ---- Base text size on gift pages: nothing in the content below 17px ---- */
.gift-page .prose p,
.gift-page .prose li { font-size: 1.0625rem; line-height: 1.7; }
.gift-page .crumb,
.gift-page .article-header .byline,
.gift-page .meta-aside,
.gift-page .card-meta time,
.gift-page .card-dek { font-size: 1.0625rem; }
.gift-page .hub-label { font-size: 1.0625rem; letter-spacing: 0; text-transform: none; }

/* ---- Hero: padding cut by about a third (3.5/3rem -> 2.35/2rem) ---- */
.gift-page .gift-hero { padding: 2.35rem 0 2rem; }
.gift-page .gift-hero .crumb { margin-bottom: 0.75rem; }
.gift-page .gift-hero h1 { margin-bottom: 0.75rem; }
.gift-page .article-header .byline { margin-top: 1rem; padding-top: 0.8rem; }
.gift-hero-art { display: none; margin: 0; }
@media (min-width: 900px) {
  .gift-hero.has-art .gift-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* image column ~40% */
    gap: 2.5rem;
    align-items: center;
  }
  .gift-hero-art { display: block; }
  .gift-hero-art picture { display: block; }
  .gift-hero-art img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
}

/* ---- Intro and outro sit on the cream background (no card) ---- */
.gift-intro,
.gift-outro { margin: 0; }
.gift-intro > :first-child,
.gift-outro > :first-child { margin-top: 0; }
.gift-intro > p, .gift-intro > ul, .gift-outro > p { max-width: 62ch; }
.gift-outro { margin-top: 2.75rem; }

.gift-disclosure {
  margin: 1.1rem 0 1.25rem;
  padding: 1rem 1.15rem;
  background: var(--highlight);
  border-left: 4px solid var(--copper);
  border-radius: 10px;
  color: var(--ink-warm);
}
.gift-page .gift-disclosure p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-warm); }
.gift-disclosure strong { color: var(--charcoal); }

/* ---- Jump list: in-page anchors, 44px+ tap targets ---- */
.gift-toc {
  margin: 2rem 0 0;
  padding: 1.1rem 1.25rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.gift-toc-label { margin: 0 0 0.35rem; font-size: 1.0625rem; font-weight: 800; color: var(--charcoal); }
.gift-toc ul { margin: 0; padding: 0; list-style: none; }
.gift-toc li { margin: 0; font-size: 1.0625rem; line-height: 1.35; break-inside: avoid; }
.gift-toc a {
  display: block;           /* block, not flex, so <em> titles stay inline */
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.6rem 0 0.5rem;
  font-weight: 600;
  color: var(--copper-deep);
  text-decoration: none;
}
.gift-toc a:hover { text-decoration: underline; }
/* Single column on all widths: tidier than ragged two-column breaks. */

/* ---- Sections: heading + one intro paragraph on cream, then product boxes ---- */
.gift-group { margin-top: 3rem; }
.gift-group-head { margin: 0 0 1.25rem; }
.gift-group-head h2 { margin: 0 0 0.5rem; font-size: clamp(1.55rem, 2.5vw, 1.9rem); line-height: 1.15; }
.gift-group-head p { margin: 0; max-width: 62ch; color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
.gift-figure { margin: 0 0 1.25rem; }
.gift-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* ---- Product box: icon chip beside the title, text runs full width ---- */
.gift {
  margin: 0 0 1.25rem;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(32, 38, 45, 0.06);
  scroll-margin-top: 1.5rem;
}
.gift-head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.85rem; }
.gift-chip {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--highlight);
  border: 1px solid var(--border);
  color: var(--copper-button);
}
.gift-chip svg { width: 30px; height: 30px; }
.gift-head h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.gift-body { max-width: 62ch; }
.gift-body > *:first-child { margin-top: 0; }
.gift-body p { margin: 0 0 0.85rem; font-size: 1.0625rem; line-height: 1.7; }
.gift-body .gift-for {
  padding: 0.6rem 0.8rem;
  background: var(--cream);
  border-radius: 8px;
  line-height: 1.55;
  color: var(--ink-warm);
}
.gift-for strong, .gift-note strong { color: var(--charcoal); }
.gift-body .gift-note { color: var(--ink-warm); }
.gift-body .button-row { margin: 1.1rem 0 0; }

/* Amazon buttons: quiet solid charcoal, no glow. Rust is kept for "Try free for 7 days" only. */
.gift-body .button.gift-buy {
  background: var(--charcoal);
  color: var(--white);
  box-shadow: none;
  font-size: 1.0625rem;
  min-height: 48px;
  padding: 0.8rem 1.15rem;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}
.gift-body .button.gift-buy:hover,
.gift-body .button.gift-buy:focus-visible { background: #000; color: var(--white); }

/* ---- Index page ---- */
.gift-page .section { padding-top: 2.5rem; }
.gift-index-card .card-dek + .card-dek { margin-top: 0.4rem; }
.gift-planned { margin: 0; padding-left: 1.15rem; }
.gift-planned li { color: var(--ink); }
.gift-planned .meta-aside { margin-left: 0.35rem; }

/* ---- Footer Amazon statement (gift pages only) ---- */
.affiliate-statement {
  margin: 0 0 0.8rem;
  color: #C9C3BB;
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 70ch;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .gift-page h1 { line-height: 1.1; }
  .gift-page h2,
  .gift-group-head h2 { line-height: 1.2; }
  .gift { padding: 1.25rem 1.05rem; }               /* ~17px side padding */
  .gift-head { align-items: flex-start; gap: 0.75rem; }
  .gift-chip { flex-basis: 48px; width: 48px; height: 48px; }  /* stays a small chip, never a big square */
  .gift-chip svg { width: 28px; height: 28px; }
  .gift-head h3 { font-size: 1.25rem; padding-top: 0.15rem; }
  .gift-toc { padding: 0.9rem 1.05rem; }
  .gift-toc li + li { margin-top: 0.15rem; }
  .gift-body .button.gift-buy { width: 100%; }
}
