/* Goat page design v2 (loaded after style.css; used by pages built with page_v2 in _tools/build_goat_pages.py).
   Colors follow the sale sheet PDFs: forest green, muted gold, warm paper, and the title badge colors. */
:root {
  --t-sgch: #7a4e9c; --t-gch: #b0852a; --t-ch: #4f6f45; --t-sg: #3f6d8f;
  --paper: #FFFDF8; --band: #F6F2E8;
}
.g2 { padding-top: var(--space-6); padding-bottom: 0; }
.g2 .goat-back { margin-bottom: var(--space-4); }

/* Hero: name, headline and chips beside two photos */
.g-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow); border-top: 6px solid var(--primary); }
.g-kicker { margin: 0 0 var(--space-2); font: 700 .8rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.g2 .goat-name { font-size: 2.6rem; line-height: 1; margin: 0; color: var(--primary); letter-spacing: .04em; }
.g-reg { margin: var(--space-2) 0 var(--space-4); color: var(--fg-muted); font-size: .95rem; letter-spacing: .04em; }
.g2 .goat-headline { margin: 0 0 var(--space-4); font-size: 1.25rem; font-style: italic; color: var(--fg); }
.g-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.g-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--band); border: 1px solid var(--border);
  font: 700 .75rem/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.g-hero-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.g-hero-photos .goat-photo img { aspect-ratio: 1; box-shadow: 0 2px 10px rgba(46,42,36,.18); border: 4px solid #fff; }

/* Section headings with a gold rule */
.g2 h2 { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-12) 0 var(--space-4); font-size: 1.35rem; color: var(--primary); }
.g2 h2::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }

/* At a glance tiles */
.g-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: 0; }
.g-tile { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.g-tile dt { font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-2); }
.g-tile dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--fg); }

/* What sets her apart: numbered cards */
.g-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: why; }
.g-why li { position: relative; counter-increment: why; background: var(--paper); border: 1px solid var(--border);
  border-left: 5px solid var(--accent); border-radius: var(--radius); padding: var(--space-4) var(--space-4) var(--space-4) 4.2rem;
  box-shadow: 0 1px 2px rgba(46,42,36,.05); line-height: 1.55; }
.g-why li::before { content: counter(why); position: absolute; left: var(--space-4); top: var(--space-4); width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--primary); color: var(--primary-contrast); display: flex; align-items: center; justify-content: center;
  font: 700 1rem/1 Georgia, serif; }
.g-why b { color: var(--primary); }

/* Pedigree */
.g-ped { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.g-par { background: var(--paper); border: 1px solid var(--border); border-top: 5px solid var(--primary); border-radius: var(--radius); padding: var(--space-4); }
.g-par.sire { border-top-color: var(--accent); }
.g-par h3 { margin: 0 0 var(--space-2); font: 700 .75rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.g-par-name { margin: 0; font-weight: 700; font-size: 1.05rem; }
.g-par-color { margin: 2px 0 var(--space-4); color: var(--fg-muted); font-size: .92rem; }
.g-par ul { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px dashed var(--border); }
.g-par li { display: flex; flex-direction: column; margin-bottom: var(--space-2); font-size: .92rem; }
.g-par li span { font: 700 .68rem/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 2px; }

.g-stats { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.g-stat { background: var(--primary); color: var(--primary-contrast); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.g-stat-n { font: 700 3.4rem/1 Georgia, serif; color: var(--accent); }
.g-stat-t { font-size: 1.05rem; line-height: 1.3; }
.g-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.g-tally li { display: flex; align-items: baseline; gap: 6px; padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--border); font: 700 .8rem/1 Arial, sans-serif; letter-spacing: .1em; }
.g-tally b { font: 700 1.6rem/1 Georgia, serif; }

.g-badge { display: inline-block; min-width: 3.4rem; text-align: center; padding: 4px 8px; border-radius: 4px; color: #fff;
  font: 700 .72rem/1.2 Arial, sans-serif; letter-spacing: .08em; }
.t-sgch { background: var(--t-sgch); } .t-gch { background: var(--t-gch); } .t-ch { background: var(--t-ch); } .t-sg { background: var(--t-sg); }
.g-tally .t-sgch b { color: var(--t-sgch); } .g-tally .t-gch b { color: var(--t-gch); } .g-tally .t-ch b { color: var(--t-ch); } .g-tally .t-sg b { color: var(--t-sg); }
.g-closest { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.g-closest li { display: flex; align-items: center; gap: var(--space-4); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-4); }
.g-closest em { margin-left: auto; color: var(--fg-muted); font-size: .85rem; white-space: nowrap; }

/* Notable ancestors */
.g-fms { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.g-fm { background: var(--band); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: var(--space-4); }
.g-fm h3 { margin: 0; font-size: 1.1rem; color: var(--primary); }
.g-fr { margin: 2px 0 var(--space-2); font: 700 .72rem/1.3 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.g-fm p:last-child { margin: 0; }

/* Own record callout */
.g-own { margin-top: var(--space-8); background: #EEF3EA; border: 1px solid #CBD9C3; border-radius: var(--radius-lg); padding: var(--space-6); }
.g-own h2 { margin-top: 0; }
.g-own p { margin: 0; }

/* Call to action band */
.g-cta { margin: var(--space-12) calc(-1 * var(--space-4)) 0; padding: var(--space-12) var(--space-4); background: var(--primary); color: var(--primary-contrast); text-align: center; border-top: 4px solid var(--accent); }
.g-cta .cta-row { margin: 0 0 var(--space-4); }
.g-cta .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.g-cta .btn-primary:hover { background: #fff; border-color: #fff; }
.g-cta .secondary-link a { color: var(--primary-contrast); }

@media (min-width: 40rem) {
  .g-tiles { grid-template-columns: repeat(2, 1fr); }
  .g-why, .g-fms, .g-ped, .g-closest { grid-template-columns: repeat(2, 1fr); }
  .g-cta { margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8)); }
}
@media (min-width: 64rem) {
  .g-hero { grid-template-columns: 1fr 1.15fr; padding: var(--space-8); }
  .g2 .goat-name { font-size: 3.4rem; }
  .g-tiles { grid-template-columns: repeat(4, 1fr); }
  .g-stats { grid-template-columns: 1fr 1.4fr; align-items: center; }
  .g-cta { margin-left: 0; margin-right: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}