/* ========================================================== Wilderness Retreat (Restoration Ridge) Phase 8 — match Home pattern (no sentinel; global header-clear) Grid: 3 → 2 → 1; optional 4 cols on wide screens ========================================================== */ /* Page scope (matches ) */ #page-retreat-wilderness { margin-inline: auto; max-width: 1400px; padding-inline: 2rem; /* No per-page title or clearance overrides. Global header-clear + _titles.css handle spacing uniformly. */ } /* Title: use global H1 sizing/spacing via `_titles.css` (.page-title) */ /* No font-size or margin overrides here. */ /* :contentReference[oaicite:5]{index=5} */ /* --- Card styles ----------------------------------------------------- */ #page-retreat-wilderness .card { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-1, 8px); min-height: 390px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } #page-retreat-wilderness .figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; } #page-retreat-wilderness .figure img { width: 100%; height: 100%; object-fit: cover; display: block; } #page-retreat-wilderness .card h2 { margin: 10px 12px 4px; line-height: 1.2; font-weight: 400; font-size: clamp(1.1rem, 2.3vw, 1.45rem); } #page-retreat-wilderness .card .prose { margin: 0 12px 12px; font-size: 0.97rem; line-height: 1.46; } /* --- Grid: 3 → 2 → 1; optional 4 on wide screens -------------------- */ #page-retreat-wilderness .grid { display: grid; gap: var(--space-3, 1.25rem); } #page-retreat-wilderness .grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { #page-retreat-wilderness .grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #page-retreat-wilderness .grid.grid-3 { grid-template-columns: 1fr; } } /* Optional: enable 4 cols >=1280px by adding .grid-4-desktop to the section */ @media (min-width: 1280px) { #page-retreat-wilderness .grid.grid-4-desktop { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Two-up blocks (if you add any later) */ #page-retreat-wilderness .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 860px) { #page-retreat-wilderness .grid-2 { grid-template-columns: 1fr; } } #page-retreat-wilderness .grid-2 .figure { aspect-ratio: 4 / 3; border-radius: 12px; } #page-retreat-wilderness .grid-2 .figure img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Local guard vs any global 'prose' width caps */ #page-retreat-wilderness.prose { max-width: none; } #page-retreat-wilderness :where(h1,h2,h3,p,ul,ol,figure,blockquote) { max-width: none; }