/* The crop guides, /grow and /grow/{crop} (planting calendar phase G4). Drawn on top of tools.css (tt-*) and data.css (dx-wide, dx-ctabtn); loaded only by
   those pages. The approved mockup is docs/design/grow-calendar/v2-4-crop-guide-tomatoes-{1280,375}.png, built from grow.css + grow2.css there; these
   are its cg-* rules, plus the fallback hero for a crop with no photo yet (phase G6 brings photos) and the index cards. */

.cg-page { padding-bottom: 3rem; }
.cg-page .hb-crumbs { font-size: 13px; color: var(--text-muted, #4f6855); margin: 1.1rem 0 .4rem; }
.cg-page .hb-crumbs a { color: var(--accent-strong, #b8501f); text-decoration: none; }
.cg-page .hb-crumbs a:hover { text-decoration: underline; }

/* Hero: a photo with a dark foot, or the family-coloured panel with a stage drawing. */
.cg-hero { position: relative; border-radius: 18px; overflow: hidden; margin: .5rem 0 1rem; min-height: 340px; display: flex; align-items: flex-end; }
.cg-hero > img.cg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.cg-hero.cg-photo-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(12, 26, 17, .78) 100%); }
.cg-hero .in { position: relative; z-index: 1; padding: 1.5rem 1.75rem; color: #fff; max-width: 40rem; }
.cg-hero h1 { color: #fff; font-size: 42px; font-weight: 800; line-height: 1.1; margin: .2rem 0 .3rem; text-align: left; }
.cg-hero p { color: #e8efe9; margin: 0; max-width: 40rem; font-size: 16px; line-height: 1.55; }
.cg-hero .tt-eyebrow { display: inline-block; background: rgba(12, 26, 17, .7); color: #f3c46b; padding: 3px 10px; border-radius: 999px; text-align: left; margin-bottom: .35rem; }
.cg-hero.cg-draw { background: linear-gradient(115deg, var(--cg-deep) 0%, var(--cg-deep) 38%, var(--cg-fam) 100%); }
.cg-hero.cg-draw .cg-art { position: absolute; z-index: 1; right: 2.25rem; top: 50%; transform: translateY(-50%) rotate(2deg); width: 250px; height: 250px; border-radius: 16px; background: #f2f7ee; box-shadow: 0 14px 36px rgba(0, 0, 0, .28); }
.cg-hero.cg-draw .in { padding-right: 300px; max-width: none; }
.cg-credit { font-size: 11.5px; color: #6b766f; margin: -.6rem 0 1rem; text-align: right; }

/* Family colours: the fallback hero and the index cards with no photo. */
.cg-fam-fruiting { --cg-fam: #c8432f; --cg-deep: #4a1a14; }
.cg-fam-squash { --cg-fam: #d98a1f; --cg-deep: #4a2d0a; }
.cg-fam-leafy { --cg-fam: #4f9a3f; --cg-deep: #183a1a; }
.cg-fam-root { --cg-fam: #d9702a; --cg-deep: #4a2410; }
.cg-fam-legume { --cg-fam: #5f9e48; --cg-deep: #1d3a16; }
.cg-fam-allium { --cg-fam: #8a6fb0; --cg-deep: #2d2140; }
.cg-fam-brassica { --cg-fam: #3f8a7a; --cg-deep: #12332d; }
.cg-fam-bulb-flower { --cg-fam: #c2457f; --cg-deep: #45152d; }
.cg-fam-annual-flower { --cg-fam: #d99a1f; --cg-deep: #4a3508; }
.cg-fam-perennial-fruit { --cg-fam: #a8324a; --cg-deep: #3d0f1a; }
.cg-fam-cover-crop { --cg-fam: #7a9a3a; --cg-deep: #26330f; }
.cg-fam-grain { --cg-fam: #c9a227; --cg-deep: #3d3108; }
.cg-fam-perennial-vegetable { --cg-fam: #6b8f3a; --cg-deep: #222f12; }
.cg-fam-tuber { --cg-fam: #9a7046; --cg-deep: #33230f; }

/* Quick facts: one row, however many the record states. */
.cg-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.cg-fact { background: #fff; border: 1px solid #e6e4df; border-radius: 12px; padding: .7rem .8rem; }
.cg-fact i { font-size: 20px; color: #2f6b3a; }
.cg-fact b { display: block; font-size: 15px; color: #16281d; margin-top: .2rem; }
.cg-fact span { font-size: 12px; color: #56665e; }

.cg-h2 { font-size: 24px; font-weight: 700; color: #16281d; margin: 1.75rem 0 .75rem; }

/* From seed to harvest. */
.cg-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; background: #fff; border: 1px solid #e6e4df; border-radius: 14px; padding: 1rem .75rem .9rem; margin: 0; list-style: none; }
.cg-stage { text-align: center; }
.cg-stage img { width: 100%; max-width: 140px; height: auto; display: block; margin: 0 auto; }
.cg-stage b { display: block; font-size: 14px; color: #16281d; }
.cg-stage span { display: block; font-size: 12px; color: #56665e; }
.cg-stage .wk { display: inline-block; margin-top: .3rem; background: #eef5ea; color: #2f6b3a; font-weight: 700; font-size: 11.5px; border-radius: 999px; padding: 2px 9px; }

/* How to plant and grow: numbered cards. */
.cg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.cg-step { background: #fff; border: 1px solid #e6e4df; border-radius: 12px; padding: .9rem 1rem; }
.cg-step b { display: flex; gap: .55rem; align-items: center; color: #16281d; font-size: 15.5px; margin-bottom: .3rem; }
.cg-step b::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; flex: none; border-radius: 50%; background: #2f6b3a; color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.cg-step p { margin: 0; font-size: 14px; color: #43514a; line-height: 1.5; }

/* Common problems: one card each, from the problems library (phase G5). The picture column appears once phase G6 brings problem photos. */
.cg-probs { display: grid; gap: 1rem; }
.cg-prob { display: grid; grid-template-columns: 260px minmax(0, 1fr); background: #fff; border: 1px solid #e6e4df; border-radius: 14px; overflow: hidden; }
.cg-prob.cg-nophoto { grid-template-columns: minmax(0, 1fr); }
.cg-prob figure { margin: 0; position: relative; }
.cg-prob figure img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; display: block; }
.cg-prob .bd { padding: .9rem 1.1rem 1rem; }
.cg-prob h3 { font-size: 19px; font-weight: 700; margin: 0 0 .2rem; color: #16281d; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cg-prob .see { font-size: 14px; color: #43514a; margin: .2rem 0 .6rem; }
.cg-prob .see b { color: #16281d; }
.cg-kind { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; line-height: 1.4; }
.cg-kind-disease { background: #fff3cd; color: #7a5a00; }
.cg-kind-pest { background: #fde2e1; color: #9b2c22; }
.cg-kind-growing { background: #e8eef7; color: #2a4f7e; }
.cg-spraynote { font-size: 11.5px; font-weight: 600; color: #43514a; display: inline-flex; gap: .3rem; align-items: center; }
.cg-tx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cg-tx > div { border-radius: 10px; padding: .55rem .7rem; font-size: 13.5px; color: #16281d; }
.cg-tx .pv { background: #f4f6f5; } .cg-tx .og { background: #eef5ea; } .cg-tx .cv { background: #eef3fa; }
.cg-tx h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .25rem; display: flex; gap: .35rem; align-items: center; }
.cg-tx .pv h4 { color: #43514a; } .cg-tx .og h4 { color: #2f6b3a; } .cg-tx .cv h4 { color: #2a5f9e; }
.cg-tx ul { margin: 0; padding-left: 1.05rem; } .cg-tx li { margin: .1rem 0; line-height: 1.45; }
.cg-tx p { margin: 0; }
.cg-bee { margin: .6rem 0 0; font-size: 13px; color: #6b4a12; background: #fff8ea; border: 1px solid #f0dcb0; border-radius: 8px; padding: .4rem .6rem; display: flex; gap: .4rem; align-items: flex-start; }

.cg-label { font-size: 12.5px; color: #6b4a12; background: #fff8ea; border: 1px solid #f0dcb0; border-radius: 8px; padding: .45rem .65rem; margin-top: 1rem; display: flex; gap: .4rem; align-items: flex-start; }
.cg-label p { margin: 0; }

.pc-pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; background: #f4f8f2; border: 1px solid #d6e6d2; border-radius: 10px; padding: .9rem 1.1rem; margin: 1.25rem 0; }
.pc-pitch p { margin: 0; font-size: 15px; color: #16281d; max-width: 640px; }
.pc-pitch b { color: #16281d; }

.cg-sources ul { margin: 0 0 .9rem; padding-left: 1.1rem; color: #2f3d36; line-height: 1.6; }
.cg-sources li span { color: #56665e; }

/* The index. */
.cg-index .tt-hero { padding-top: 1.5rem; }
.cg-group { margin-top: 1.5rem; scroll-margin-top: 80px; }
.cg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.cg-card { display: block; border: 1px solid #e6e4df; border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: #16281d; transition: box-shadow .15s, transform .15s; }
.cg-card:hover { box-shadow: 0 6px 18px rgba(22, 40, 29, .12); transform: translateY(-1px); }
.cg-card .pic { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cg-deep) 0%, var(--cg-fam) 100%); }
.cg-card .pic img { height: 86%; width: auto; border-radius: 10px; }
.cg-card .pic img.cg-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cg-card b { display: block; padding: .55rem .7rem .65rem; font-size: 14.5px; }

@media (max-width: 760px) {
  .cg-hero { min-height: 380px; }
  .cg-hero h1 { font-size: 30px; }
  .cg-hero .in { padding: 1.25rem; }
  .cg-hero.cg-draw .in { padding-right: 1.25rem; }
  .cg-hero.cg-draw .cg-art { width: 150px; height: 150px; right: 1rem; top: 1rem; transform: rotate(3deg); }
  .cg-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .cg-steps { grid-template-columns: 1fr; }
  .cg-prob { grid-template-columns: 1fr; } .cg-prob figure img { min-height: 0; aspect-ratio: 16/9; } .cg-tx { grid-template-columns: 1fr; }
  .cg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Photo credits (phase G6): linked captions, the credits page and its links. */
.cg-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cg-prob figure { display: flex; flex-direction: column; }
.cg-prob figure img { flex: 1 1 auto; }
.cg-figcredit { margin: 0; padding: .3rem .55rem .4rem; text-align: left; line-height: 1.35; font-size: 11px; background: #f7f6f2; }
.cg-credits-link { margin: .9rem 0 0; font-size: 13px; }
.cg-credits-link a { color: #2f6b3a; }
.cg-credit-list { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; gap: .7rem; }
.cg-credit-list li { display: flex; gap: .8rem; align-items: center; }
.cg-credit-list img { width: 80px; height: 80px; flex: none; border-radius: 10px; object-fit: cover; background: #eef2ea; }
.cg-credit-list .cg-credit { display: inline; margin: 0; text-align: left; font-size: 13px; }

/* No-script fallback for a photo that fails to load: the family's stage drawing sits behind the photo, so a missing or blocked image shows the
   drawing instead of an empty box. Both the variable and its use live in this file, so the relative url resolves against grow.css either way. */
.cg-fam-allium { --cg-art: url("../img/grow/stages/allium-5.svg"); }
.cg-fam-annual-flower { --cg-art: url("../img/grow/stages/annual-flower-5.svg"); }
.cg-fam-brassica { --cg-art: url("../img/grow/stages/brassica-5.svg"); }
.cg-fam-bulb-flower { --cg-art: url("../img/grow/stages/bulb-flower-5.svg"); }
.cg-fam-cover-crop { --cg-art: url("../img/grow/stages/cover-crop-5.svg"); }
.cg-fam-fruiting { --cg-art: url("../img/grow/stages/fruiting-5.svg"); }
.cg-fam-grain { --cg-art: url("../img/grow/stages/grain-5.svg"); }
.cg-fam-leafy { --cg-art: url("../img/grow/stages/leafy-5.svg"); }
.cg-fam-legume { --cg-art: url("../img/grow/stages/legume-5.svg"); }
.cg-fam-perennial-fruit { --cg-art: url("../img/grow/stages/perennial-fruit-5.svg"); }
.cg-fam-perennial-vegetable { --cg-art: url("../img/grow/stages/perennial-vegetable-5.svg"); }
.cg-fam-root { --cg-art: url("../img/grow/stages/root-5.svg"); }
.cg-fam-squash { --cg-art: url("../img/grow/stages/squash-5.svg"); }
.cg-fam-tuber { --cg-art: url("../img/grow/stages/tuber-5.svg"); }
.cg-hero.cg-photo-hero { background: linear-gradient(115deg, var(--cg-deep, #183a1a) 0%, var(--cg-fam, #2f6b3a) 100%); }
.cg-hero > img.cg-photo, .cg-card .pic img.cg-photo { background: var(--cg-art, none) center / contain no-repeat; }
img.gc-thumb[src$=".webp"] { background: var(--cg-art, none) center / 80% no-repeat, radial-gradient(circle at 50% 40%, #fff 0%, color-mix(in srgb, var(--cg-fam, #2f6b3a) 28%, #fff) 100%); }
.cg-prob figure img { background: #eef2ea; }