/* ==========================================================================
   builder.css: styles for sections and elements made in the website admin
   (site-render.js: intro, split, cards, gallery, cta, container elements)
   and for blog posts. Built on the design tokens in style.css.
   ========================================================================== */

.wrap-narrow { max-width: calc(780px + var(--gutter) * 2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.gift .btn-row { margin-top: 0; }

/* Prose ------------------------------------------------------------------ */
.prose { font-size: var(--fs-lead); line-height: 1.75; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-top: 1.5em; line-height: 1.1; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.3em; line-height: 1.15; }
.prose a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.section--plum .prose a { color: var(--cream); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose strong, .prose b { font-weight: 600; }
.wrap-narrow > h2 + .prose { margin-top: 26px; }

/* Photo + text ------------------------------------------------------------- */
.split { display: grid; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.is-reversed .split__media { order: 2; } }
.split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__copy { display: grid; gap: 22px; justify-items: start; }
.split__copy .prose { font-size: var(--fs-body); }

/* Page header, compact (blog posts) ----------------------------------------- */
.page-hero--compact { min-height: 62vh; min-height: 62svh; }
.page-hero--compact .page-hero__title { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 18ch; }

/* Builder grid --------------------------------------------------------------- */
.sg-grid { display: grid; gap: clamp(22px, 3vw, 44px); }
@media (min-width: 900px) { .sg-grid { grid-template-columns: var(--sg-cols, 1fr 1fr); } }
.sg-gap-small { gap: 14px; } .sg-gap-large { gap: clamp(32px, 5vw, 80px); }
.sg-v-center { align-items: center; } .sg-v-bottom { align-items: end; }
.sg-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.sg-el h2 + *, .sg-el .eyebrow + h2, .sg-el .eyebrow + h3 { margin-top: 16px; }
.sg-el .prose { font-size: var(--fs-body); }
.sg-fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.sg-fig img { width: 100%; height: 100%; object-fit: cover; }
.ratio-portrait { aspect-ratio: 4 / 5; } .ratio-landscape { aspect-ratio: 4 / 3; } .ratio-square { aspect-ratio: 1; } .ratio-wide { aspect-ratio: 16 / 9; }
.ratio-arch { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--radius) var(--radius); }
.sg-fig figcaption { padding-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.sg-gal { display: grid; gap: clamp(10px, 1.6vw, 20px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .sg-gal { grid-template-columns: repeat(3, 1fr); } }
.sg-gal .media { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.sg-gal img { width: 100%; height: 100%; object-fit: cover; }
.sg-video { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--plum-900); }
.sg-video iframe, .sg-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sg-placeholder { display: grid; place-items: center; color: var(--cream); }
.sg-quote { border-left: 2px solid var(--gold); padding: 6px 0 6px 1.3em; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.35; }
.sg-quote cite { display: block; margin-top: 12px; font: 600 var(--fs-micro) var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sg-rule { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.sg-space.is-small { height: 24px; } .sg-space.is-normal { height: 56px; } .sg-space.is-large { height: 110px; }
.sg-stats { margin-top: 0; }

/* Blog post body ---------------------------------------------------------------- */
.post-body { font-size: var(--fs-lead); line-height: 1.8; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-top: 1.6em; line-height: 1.1; }
.post-body h3 { font-size: var(--fs-h3); margin-top: 1.4em; }
.post-body a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.3em; list-style: disc; }
.post-body img { border-radius: var(--radius); width: 100%; height: auto; }
.post-body blockquote { border-left: 2px solid var(--gold); padding-left: 1.2em; font-family: var(--serif); font-style: italic; font-size: 1.2em; }
.post-lead { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.45; }
.post-meta-line { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.post-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.post-faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.25rem; }
.post-faq details p { margin-top: 10px; color: var(--muted); }
.post-cta { padding: 28px 30px; border-radius: var(--radius-lg); background: var(--sand); text-align: center; }
.post-related { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .post-related { grid-template-columns: repeat(2, 1fr); } }
.post-related a { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--radius); background: var(--ivory); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; }
.post-related a:hover { transform: translateY(-3px); border-color: var(--plum); }
.post-related b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.post-related span { color: var(--muted); font-size: var(--fs-small); }

/* Blog list -------------------------------------------------------------------- */
.post-grid { display: grid; gap: clamp(28px, 3.5vw, 48px); }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: grid; gap: 14px; align-content: start; }
.post-card .media { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); }
.post-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card:hover img { transform: scale(1.05); }
.post-card .post-cat, .post-card .post-meta { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.post-card h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.15; }
.post-card p { color: var(--muted); }
.post-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.post-grid:has(.post-card) + .post-empty { display: none; }
.post-empty a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }