/* ============================================================
   Lake — client site styles (THE AGENCY-DEFINED LAYER)
   Brand tokens live at the top; blocks below consume them.
   Scoped to .lake-root so the same CSS drives BOTH the builder
   canvas and the live frontend → pixel-identical 1:1 preview.
   Per-client branding can override the tokens from the theme.
   ============================================================ */

.lake-root{
  /* ---- BRAND TOKENS (managed in the builder's Designer mode) ---- */
  --brand:           oklch(0.52 0.07 245);   /* primary / buttons / links */
  --brand-secondary: oklch(0.55 0.10 42);    /* secondary accents */
  --brand-accent:    oklch(0.47 0.07 155);   /* tertiary / highlights */
  --brand-ink:       oklch(0.22 0.015 260);  /* headings */
  --brand-body:      oklch(0.40 0.012 260);  /* body text */
  --brand-paper:     oklch(0.99 0.004 95);   /* light section bg */
  --brand-deep:      oklch(0.24 0.012 260);  /* dark section bg */
  --brand-line:      oklch(0.90 0.006 95);   /* borders */
  --brand-radius:    4px;
  --brand-space:     88px;                   /* vertical section rhythm */
  --brand-maxw:      1080px;
  --brand-fs:        16px;                    /* base body font size */
  --brand-lh:        1.6;                     /* base line height */
  --brand-ls:        -0.01em;                 /* heading letter-spacing */
  --brand-head:      "Spectral", Georgia, serif;
  --brand-text:      "Hanken Grotesk", system-ui, sans-serif;
  --brand-head-weight: 500;
  --brand-body-weight: 400;

  font-family: var(--brand-text);
  font-size: var(--brand-fs);
  font-weight: var(--brand-body-weight);
  color: var(--brand-body);
  background: var(--brand-paper);
  line-height: var(--brand-lh);
}
.lake-root *{ box-sizing: border-box; }

/* section shell */
.lake-root .s{
  padding: var(--brand-space) 7%;
}
.lake-root .s.dark{ background: var(--brand-deep); }
.lake-root .s.white{ background: #fff; }
.lake-root .s.dark, .lake-root .s.dark .s-body, .lake-root .s.dark figcaption{ color: oklch(0.86 0.01 260); }
.lake-root .s.dark .s-head{ color: #fff; }
.lake-root .s-inner{ max-width: var(--brand-maxw); margin: 0 auto; }

.lake-root h1,.lake-root h2,.lake-root h3{
  font-family: var(--brand-head); color: var(--brand-ink);
  font-weight: var(--brand-head-weight); letter-spacing: var(--brand-ls); line-height: 1.12; margin: 0;
}

/* image element + empty frame placeholder */
.lake-root .frame{ position: relative; background: oklch(0.92 0.006 95); }
.lake-root .frame .lake-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lake-root .frame:empty::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, oklch(0.90 0.012 250) 0%, oklch(0.83 0.016 250) 100%);
}

/* ---- Rich text ---- */
.lake-root .b-rich{ text-align: var(--align, left); }
.lake-root .b-rich .eyebrow{
  font-family: var(--brand-text); font-size: 13px; font-weight:700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 18px;
}
.lake-root .b-rich h2{ font-size: clamp(30px, 4.4vw, 52px); max-width: 16ch; margin-inline: var(--mi, 0 auto 0 0); }
.lake-root .b-rich.center h2, .lake-root .b-rich.center .s-body, .lake-root .b-rich.center .eyebrow{ margin-inline:auto; text-align: center; }
.lake-root .b-rich .s-body{ font-size: 18px; max-width: 58ch; margin: 22px 0 0; }
.lake-root .b-rich.center .s-body{ margin-inline:auto; }

/* ---- Image ---- */
.lake-root .b-image figure{ margin:0; }
.lake-root .b-image.contained .s-inner{ max-width: var(--brand-maxw); }
.lake-root .b-image.full{ padding-inline: 0; }
.lake-root .b-image.full .s-inner{ max-width: none; }
.lake-root .b-image .frame{ border-radius: var(--brand-radius); overflow: hidden; }
.lake-root .b-image.r-43 .frame{ aspect-ratio: 4/3; }
.lake-root .b-image.r-169 .frame{ aspect-ratio: 16/9; }
.lake-root .b-image.r-21 .frame{ aspect-ratio: 21/9; }
.lake-root .b-image figcaption{ font-size: 13px; color: oklch(0.56 0.008 260); margin-top: 12px; font-family: var(--brand-text); }

/* ---- Image + text (split) ---- */
.lake-root .b-split .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: var(--va, center); }
.lake-root .b-split.img-right .row{ direction: rtl; }
.lake-root .b-split.img-right .row > *{ direction: ltr; }
.lake-root .b-split .frame{ border-radius: var(--brand-radius); overflow:hidden; aspect-ratio: 4/5; }
.lake-root .b-split .txt h2{ font-size: clamp(26px, 3.2vw, 38px); max-width: 18ch; }
.lake-root .b-split .txt .s-body{ font-size: 17px; margin-top: 18px; }
.lake-root .b-split .heading-light{ color: #fff; }
.lake-root .b-split .heading-dark{ color: var(--brand-ink); }
.lake-root .b-split .body-light{ color: oklch(0.86 0.01 260); }
.lake-root .b-split .body-dark{ color: var(--brand-body); }
.lake-root .b-split .acts{ margin-top: 24px; display:flex; gap: 12px; flex-wrap: wrap; }

/* ---- Rich-text content (shared) ---- */
.lake-root .s-body p{ margin: 0 0 0.85em; font-size: inherit; line-height: inherit; }
.lake-root .s-body p:last-child{ margin-bottom: 0; }
.lake-root .s-body ul,
.lake-root .s-body ol{ margin: 0 0 0.85em; padding-left: 1.4em; font-size: inherit; line-height: inherit; }
.lake-root .s-body ul{ list-style: disc; }
.lake-root .s-body ol{ list-style: decimal; }
.lake-root .s-body li{ margin: 0.25em 0; }
.lake-root .s-body a{ color: var(--brand); text-decoration: underline; }

/* ---- Brand text colors (applied to selected rich text) ---- */
.lake-root .tc-brand{ color: var(--brand); }
.lake-root .tc-brand-secondary{ color: var(--brand-secondary); }
.lake-root .tc-brand-accent{ color: var(--brand-accent); }
.lake-root .tc-brand-ink{ color: var(--brand-ink); }
.lake-root .tc-brand-body{ color: var(--brand-body); }
.lake-root .tc-brand-paper{ color: var(--brand-paper); }
.lake-root .tc-brand-deep{ color: var(--brand-deep); }
.lake-root .tc-brand-line{ color: var(--brand-line); }

/* ---- CTA / button row ---- */
.lake-root .b-cta{ text-align: var(--align, center); }
.lake-root .b-cta h2{ font-size: clamp(28px, 3.6vw, 44px); max-width: 20ch; margin-inline: var(--cmi, auto); }
.lake-root .b-cta.dark h2{ color: #fff; }
.lake-root .b-cta .acts{ margin-top: 30px; display:flex; gap: 12px; justify-content: var(--just, center); }
.lake-root .btn-site{
  display:inline-flex; align-items:center; gap:9px; font-family: var(--brand-text);
  font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: var(--brand-radius);
  text-decoration:none; border: 1.5px solid var(--brand); cursor: pointer;
}
.lake-root .btn-site.solid{ background: var(--brand); color: #fff; }
.lake-root .btn-site.outline{ background: transparent; color: var(--brand); }
.lake-root .b-cta.dark .btn-site.outline{ color:#fff; border-color:#fff; }

/* ---- Hero (full-bleed banner) ---- */
.lake-root .b-hero{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 7%;
  color: #fff;
}
.lake-root .b-hero.h-medium{ min-height: 60vh; }
.lake-root .b-hero.h-tall{ min-height: 78vh; }
.lake-root .b-hero.h-full{ min-height: 100vh; }
.lake-root .b-hero.v-center{ justify-content: center; }
.lake-root .b-hero.v-bottom{ justify-content: flex-end; }
.lake-root .b-hero.align-center{ text-align: center; align-items: center; }
.lake-root .b-hero.align-left{ text-align: left; align-items: flex-start; }

.lake-root .b-hero .hero-bg{ position: absolute; inset: 0; z-index: 0; background: oklch(0.30 0.02 260); }
.lake-root .b-hero .hero-bg .lake-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lake-root .b-hero::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient( to top, oklch(0 0 0 / calc(var(--scrim, 0.42) + 0.15)) 0%, oklch(0 0 0 / var(--scrim, 0.42)) 55%, oklch(0 0 0 / calc(var(--scrim, 0.42) * 0.5)) 100% );
}
.lake-root .b-hero .hero-inner{ position: relative; z-index: 2; max-width: var(--brand-maxw); width: 100%; margin: 0 auto; }

.lake-root .b-hero .hero-eyebrow{
  font-family: var(--brand-text); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 13px; font-weight: 600; margin: 0 0 16px; opacity: 0.92;
}
.lake-root .b-hero .hero-title{
  font-family: var(--brand-head); font-weight: var(--brand-head-weight);
  line-height: 1.05; letter-spacing: var(--brand-ls);
  font-size: clamp(36px, 6vw, 72px);
}
.lake-root .b-hero .hero-title p{ margin: 0; font-size: inherit; line-height: inherit; }
.lake-root .b-hero.align-center .hero-title p:last-child{ display: table; margin-inline: auto; }
.lake-root .b-hero .hero-sub{
  font-family: var(--brand-text); font-size: clamp(16px, 2vw, 21px);
  line-height: 1.5; max-width: 52ch; margin: 22px 0 0; opacity: 0.95;
}
.lake-root .b-hero .hero-sub p{ margin: 0; font-size: inherit; line-height: inherit; }
.lake-root .b-hero.align-center .hero-sub{ margin-inline: auto; }
.lake-root .b-hero .hero-acts{ margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.lake-root .b-hero.align-center .hero-acts{ justify-content: center; }
.lake-root .b-hero .btn-site.outline{ color: #fff; border-color: #fff; }

/* Home layout: let the hero sit flush at the top of the page. */
.lake-root.layout-home > .b-hero:first-child{ margin-top: 0; }

/* ---- Custom (designer-defined) blocks ---- */
.lake-root .b-custom .eyebrow{
  font-family: var(--brand-text); font-size: 13px; font-weight:700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 18px;
}
.lake-root .b-custom .s-head{ font-size: clamp(28px, 3.8vw, 46px); max-width: 18ch; }
.lake-root .b-custom .s-sub{ font-size: clamp(19px, 2.2vw, 24px); margin-top: 18px; max-width: 26ch; }
.lake-root .b-custom .s-body{ font-size: 17px; max-width: 58ch; margin-top: 18px; }
.lake-root .b-custom > .s-inner > .frame,
.lake-root .b-custom .txt > .frame{ border-radius: var(--brand-radius); overflow: hidden; aspect-ratio: 16/9; margin-top: 26px; }
.lake-root .b-custom .acts{ margin-top: 26px; display:flex; gap: 12px; flex-wrap: wrap; }
.lake-root .b-custom.center{ text-align: center; }
.lake-root .b-custom.center .s-head,
.lake-root .b-custom.center .s-sub,
.lake-root .b-custom.center .s-body{ margin-inline: auto; }
.lake-root .b-custom.center .acts{ justify-content: center; }
.lake-root .b-custom.dark .s-sub{ color: oklch(0.92 0.008 260); }

/* Gallery / item-list grids inside custom blocks */
.lake-root .b-custom .cgrid{ display:grid; gap: 28px; margin-top: 32px; }
.lake-root .b-custom .cgrid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.lake-root .b-custom .cgrid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.lake-root .b-custom .cgrid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.lake-root .b-custom .cgrid .frame{
  border-radius: var(--brand-radius); overflow: hidden; aspect-ratio: 4/3; margin-top: 0;
}
.lake-root .b-custom .citem .s-head{ font-size: 22px; }
.lake-root .b-custom .citem .s-sub{ font-size: 18px; margin-top: 12px; }
.lake-root .b-custom .citem .s-body{ font-size: 15.5px; margin-top: 10px; }
.lake-root .b-custom .citem .frame{ margin-bottom: 16px; }
.lake-root .b-custom .citem .acts{ margin-top: 14px; }
@media (max-width: 880px){
  .lake-root .b-custom .cgrid.cols-3,
  .lake-root .b-custom .cgrid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .lake-root .b-custom .cgrid{ grid-template-columns: 1fr !important; }
}

/* Split-layout custom blocks reuse the core .b-split grid; the media frame
   keeps the split ratio rather than the stacked 16/9. */
.lake-root .b-custom.b-split .row > .frame{ aspect-ratio: 4/5; margin-top: 0; }
.lake-root .b-custom.b-split .txt .s-head{ font-size: clamp(26px, 3.2vw, 38px); }