/* Parks & Gardens (templates/core/designs/sf_parks/), in the new design. Headings, text and the table come from the site's
   shared pieces (css/designs/tables.css); this file draws the opening text and the park cards: a real photograph beside the
   name, place, story and facts, alternating sides. */
.parks-page { background: #f9f6ef; }
.parks-page .st-sec { padding: 84px 0; }
.parks-page .st-sec + .st-sec { padding-top: 0; }
.pk-lead { max-width: 72ch; }
.pk-lead p { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; color: #1f2a22; }
.pk-lead p + p { margin-top: 14px; }
.pk-lead strong { color: #0a2e1a; }

/* the opening card: deep green, the first paragraph on the left and the second on the right in white; only the park names (chips) are yellow */
.pk-intro .dz-statement { background: radial-gradient(520px 320px at 100% 0%, rgba(16, 185, 129, .22), transparent 70%), linear-gradient(135deg, #0b3d2c 0%, #042f1a 100%);
    box-shadow: 0 30px 60px -40px rgba(4, 47, 26, .7); }
.pk-intro .dz-statement { grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* one under the other: first paragraph, second paragraph, then the park names */
html body .pk-intro .dz-statement-lead { max-width: none; }
.pk-intro .dz-statement::before { display: none; }
.pk-intro .dz-statement::after { opacity: .09; filter: invert(1); }
html body .pk-intro .dz-statement-lead { color: #fff; }
html body .pk-intro .dz-statement-rest p { color: #fff; }
html body .pk-intro .dz-statement-rest strong { color: #f1c40f; }
.pk-intro .dz-statement-chips li { background: rgba(255, 255, 255, .1); color: #f1c40f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pk-intro .dz-statement-chips li svg { color: #f1c40f; }
html body .pk-intro .st-h2 { color: #0a2e1a; }

/* the table's heading row: green, with yellow text (this page only) */
html body .dz-page.parks-page .st-table thead th { background: #0b3d2c !important; color: #f1c40f !important; font-weight: 700 !important; }

/* a park: one card — the photograph filling one side (number and place on it), the story on a timeline and the facts as
   deep green tiles on the other. The card lifts and the photo slowly zooms under the pointer. */
.parks-page { counter-reset: park; }
.pk-park { counter-increment: park; }
.pk-card { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); border-radius: 20px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 46, 26, .06), 0 30px 60px -40px rgba(10, 46, 26, .35); transition: transform 300ms cubic-bezier(.16, 1, .3, 1), box-shadow 300ms; }
.pk-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(10, 46, 26, .08), 0 40px 70px -40px rgba(10, 46, 26, .45); }
.pk-park.is-right .pk-photo { order: 2; }
.pk-photo { position: relative; margin: 0; min-height: 440px; overflow: hidden; background: #e3ece1; isolation: isolate; }
.pk-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.pk-card:hover .pk-photo img { transform: scale(1.05); }
.pk-photo.is-empty img { display: none; }
.pk-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 46, 26, .35) 0%, transparent 28%, transparent 62%, rgba(10, 46, 26, .55) 100%); }
.pk-num { position: absolute; z-index: 2; top: 24px; left: 28px; font-size: 15px; font-weight: 800; letter-spacing: .06em; color: #fff; font-variant-numeric: tabular-nums; }
.pk-num::before { content: counter(park, decimal-leading-zero); }
.pk-place { position: absolute; z-index: 2; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.pk-body { padding: 48px 52px; }
html body .pk-name { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -.035em; color: #0a2e1a; }
/* the story: each labelled paragraph a step on a timeline */
.pk-story { position: relative; margin: 28px 0 0; padding: 0 0 0 28px; list-style: none; }
.pk-story::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: #e3ece1; }
.pk-step { position: relative; margin: 0 0 22px; }
.pk-step:last-child { margin-bottom: 0; }
.pk-step::before { content: ''; position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #1a472a; }
.pk-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; background: #e3ece1; color: #1a472a;
    font-size: 13px; font-weight: 700; }
.pk-label-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.pk-label-icon svg { width: 13px; height: 13px; }
.pk-step p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #374151; }
.pk-step p strong { color: #0a2e1a; }
/* the facts: deep green tiles, two to a row */
.pk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.pk-fact { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: #0a2e1a; color: #fff; }
.pk-fact .pk-fact-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #f1c40f; }   /* ".pk-fact .pk-fact-icon" (not just ".pk-fact-icon"): the icon is a <span>, so it must outrank ".pk-fact span" below or that rule's own specificity wins and turns it white */
.pk-fact strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: #8fc9a3; }
.pk-fact span { display: block; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.pk-fact span strong { display: inline; color: #fff; }

@media (max-width: 900px) {
    .parks-page .st-sec { padding: 52px 0; }
    .pk-card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
    .pk-park.is-right .pk-photo { order: 0; }
    .pk-photo { min-height: 0; aspect-ratio: 4 / 3; }
    .pk-body { padding: 28px 22px 32px; }
}
@media (prefers-reduced-motion: reduce) { .pk-photo img, .pk-card { transition: none; } .pk-card:hover { transform: none; } }
html body .pk-intro .dz-statement-lead strong { color: #f1c40f; }