/*
 * Site layer for the Vedeldning design system: what the Rails pages need on top of
 * vedeldning.css (page wrapper, content width, rich text, flash, small additions).
 * Same rules as the system: tokens only, v- prefix, transform/opacity motion.
 */

html{background:var(--surface);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh}

/* The breakpoints are container queries, so the page itself is the container.
   Fixed elements (sticky bar) live outside it. */
.v-page{container-type:inline-size;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.v-page>main{flex:1;outline:none}
.v-page>main>.v-in:last-child{padding-bottom:var(--v-page-end,64px)}
@container (max-width:600px){.v-page>main>.v-in:last-child{--v-page-end:40px}}

/* One wide content width; the coloured bands (utility bar, footer, alt sections) stay full bleed. */
.v-in{width:100%;max-width:1240px;margin-inline:auto}

/* Spacing helpers used by the page templates instead of inline styles */
.v-crumbs--page{padding-top:16px}
.v-pdp--top{padding-block:12px var(--space-8)}
.v-pdp--rule{border-top:1px solid var(--line);padding-block:var(--space-7)}
.v-stack{display:grid;gap:var(--space-5);align-content:start}
.v-center{display:flex;justify-content:center;margin-top:var(--space-6)}
.v-mt{margin-top:var(--space-5)}
.v-band__ctas--head{margin-top:6px}
.v-h2--flush{margin:0}
.v-muted{color:var(--ink-muted)}
.v-prose--sm{font-size:16px;line-height:26px}
.v-prose--sm h2:first-child{margin-top:0}
.v-article-page{display:grid;gap:20px;padding-block:var(--space-5) var(--space-7)}
.v-article-page>header{display:grid;gap:10px;max-width:68ch}
.v-article-page__img{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-alt);max-width:68ch}
.v-article-page__img img{width:100%;height:auto}
.v-narrow{max-width:68ch}
.v-split--pad{padding-bottom:var(--space-7)}
.v-split--pad-lg{padding-bottom:var(--space-8)}
.v-assure--plain{border:0;padding:0}
.v-team .v-link{min-height:0}
.v-sheet__title{font-size:18px;line-height:24px;font-weight:700}
.v-lede--sm{font-size:16px;line-height:25px}
.v-results__tools{display:flex;gap:8px;align-items:center}
.v-cats a{color:var(--ink)}
.v-filters__search{padding:0 0 12px;border-bottom:1px solid var(--line)}
.v-filters__search .v-field input{min-height:44px}
.v-filters__foot{padding-top:12px}
.v-filters__foot a{color:var(--brand);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:10px}
.v-filters fieldset.is-scroll>.v-filters__opts{max-height:252px;overflow:auto;overscroll-behavior:contain;display:grid;gap:4px;padding-right:4px}
.v-chipsrm a{display:inline-flex;align-items:center;gap:6px;font:600 13px/18px var(--font-sans);color:var(--ink);background:var(--surface-alt);border-radius:var(--radius-sm);padding:8px 10px;min-height:36px}
@container (max-width:1000px){.v-chipsrm a{min-height:44px;padding:13px 12px}}
.v-chipsrm__clear{background:none!important;color:var(--brand)!important;text-decoration:underline;text-underline-offset:3px}

/* Campaign cards on the campaigns page (article-card pattern with a date line) */
.v-campaigns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.v-campaigns .v-article .im{aspect-ratio:16/9}
@container (max-width:760px){.v-campaigns{grid-template-columns:1fr}}

/* Photo grid captions (gallery page and home preview) */
.v-photos li{display:grid;gap:6px;align-content:start}
.v-photos__cap{font-size:13px;line-height:18px;color:var(--ink-muted)}
.v-lb__cap{padding:0 12px 12px;font-size:14px;line-height:21px;color:var(--ink-muted)}
.v-lb__cap b{color:var(--ink);font-weight:600}
.v-lb__cap:empty{display:none}

/* Image placeholder when a product has no photo */
.v-noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-muted);font-size:13px;background:var(--photo-ground)}

/* Rich text from Action Text (guides, product and campaign descriptions) */
.v-prose .trix-content{display:grid;gap:16px}
.v-prose :where(ul,ol){padding-left:1.4em;display:grid;gap:6px}
.v-prose ul{list-style:disc}
.v-prose ol{list-style:decimal}
.v-prose h3{font-size:18px;line-height:25px;font-weight:700;margin-top:8px}
.v-prose blockquote{margin:0;padding-left:16px;border-left:2px solid var(--line-strong);color:var(--ink-muted)}
.v-prose img{border-radius:var(--radius-md);height:auto}
.v-prose figure{margin:0}
.v-prose figcaption{font-size:13px;color:var(--ink-muted);margin-top:6px}
.v-prose strong{font-weight:700}
.v-prose--sm h1,.v-prose h1{font-size:22px;line-height:28px;font-weight:700}

/* Public flash (rare: only used for notices that survive a redirect) */
.v-notice{margin-top:16px}

/* Footer CTA text stays readable when the footer CTA sits on the dark band */
.v-ftr__cta p{color:var(--footer-muted)}

/* Thank-you page */
.v-thanks{min-height:min(60vh,560px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-block:var(--space-6)}
.v-done--page{width:min(640px,100%);justify-items:center}
.v-thanks__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}

/* About: initials avatar beside each owner until real photos exist */
.v-team__card{display:flex;gap:16px;align-items:flex-start}
.v-team__av{flex:none;width:80px;height:80px;border-radius:var(--radius-full);background:var(--brand-soft);color:var(--brand-on-soft);display:grid;place-items:center;font-weight:700;font-size:22px}

/* Filter sheet: keep the first field clear of the sticky header */
.v-sheet__body{padding-top:16px}

/* Keep fixed bottom bar from covering focused elements */
html{scroll-padding-top:72px}

/* Honeypot for the booking form (bots fill it, people never see it) */
.v-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Errors from the server on the booking form */
.v-errsum:focus{outline:2px solid var(--focus);outline-offset:2px}
.v-ftr__mail{margin-top:12px}
.v-seg--gap{margin-bottom:16px}

/* Footer on iPad: keep four link columns down to 760px, two below that */
@container (min-width:761px) and (max-width:1000px){.v-ftr__cols{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:20px}}

/* Product cards on small phones: one row of chips so cards in a row stay even */
@container (max-width:420px){.v-card__specs{flex-wrap:nowrap;overflow:hidden}.v-card__specs li{flex:none}}