/* =========================================================
   Page builder: things every section can use (always loaded).
   The look of each section type is in assets/css/blocks/<type>.css.
   Colours come from variables (style.css :root, overridden by the theme):
   --bg --bg-2 --bg-3 --text --muted --faint --line --line-strong --accent --accent-hi --on-accent
   --inv-*  (inverted colours)   --acc-*  (sections with the accent colour as background)
   ========================================================= */

/* ---------- built-in sections: sizes ---------- */
.hero--tall { min-height: 75vh; min-height: 75svh; }
.hero--medium { min-height: 55vh; min-height: 55svh; }
.work-layout--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Background ---------- */
.blk-bg-tint { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.blk-bg-invert {
  --bg: var(--inv-bg); --bg-2: var(--inv-bg-2); --bg-3: var(--inv-bg-3); --bg-rgb: var(--inv-bg-rgb);
  --text: var(--inv-text); --text-rgb: var(--inv-text-rgb); --line: var(--inv-line); --line-strong: var(--inv-line-strong);
  --muted: var(--inv-muted); --faint: var(--inv-faint);
  background: var(--bg); color: var(--text);
}
/* Inverted: the theme accent (= --acc-bg) is moved 45% toward the section's text colour, so accent text
   (kicker, numbers, dots) stays readable on the swapped background (light accents on cream were ~1.5:1).
   Text on accent fills uses the section background, which has the same contrast. Old browsers keep the accent. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .blk-bg-invert {
    --accent: color-mix(in srgb, var(--acc-bg) 55%, var(--inv-text));
    --accent-hi: color-mix(in srgb, var(--acc-bg) 40%, var(--inv-text));
    --on-accent: var(--inv-bg);
  }
}
.blk-bg-accent {
  --bg: var(--acc-bg); --bg-2: var(--acc-bg-2); --bg-3: var(--acc-bg-3); --bg-rgb: var(--acc-bg-rgb);
  --text: var(--acc-text); --text-rgb: var(--acc-text-rgb); --line: var(--acc-line); --line-strong: var(--acc-line-strong);
  --muted: var(--acc-muted); --faint: var(--acc-faint); --accent: var(--acc-text); --accent-hi: var(--acc-text); --on-accent: var(--acc-bg);
  background: var(--bg); color: var(--text);
}
.blk-bg-image {
  --bg: #000; --text: #fff; --text-rgb: 255, 255, 255; --muted: rgba(255, 255, 255, .78); --faint: rgba(255, 255, 255, .55);
  --line: rgba(255, 255, 255, .2); --line-strong: rgba(255, 255, 255, .42); --bg-2: rgba(0, 0, 0, .35); --bg-3: rgba(0, 0, 0, .5); --bg-rgb: 0, 0, 0;
  position: relative; isolation: isolate; color: var(--text);
  background: #000 var(--bg-img, none) center / cover no-repeat;
}
.blk-bg-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--bg-dim, .55)); }

/* ---------- Space around ---------- */
.section.blk-pad-s { padding: calc(clamp(36px, 4.5vw, 60px) * var(--space)) 0; }
.section.blk-pad-l { padding: calc(clamp(96px, 12vw, 170px) * var(--space)) 0; }
.section.blk-pad-xl { padding: calc(clamp(130px, 17vw, 240px) * var(--space)) 0; }

/* ---------- Width ---------- */
.blk-w-narrow > .container { max-width: 860px; }
.blk-w-wide > .container { max-width: 1680px; }
.blk-w-full > .container { max-width: none; }

/* ---------- Text alignment ---------- */
.blk-al-center .sec-head, .blk-al-center .blk-inner, .blk-al-center .blk-head, .blk-al-center .about-text, .blk-al-center .contact-row, .blk-al-center .about-facts { text-align: center; justify-content: center; }
.blk-al-center .socials { justify-content: center; }
.blk-al-center .blk-inner > p, .blk-al-center .blk-intro p { margin-left: auto; margin-right: auto; }

/* ---------- shared pieces of sections ---------- */
.blk-head { margin-bottom: clamp(26px, 3.5vw, 44px); }
.blk-head .sec-title { max-width: 26ch; }
.blk-al-center .blk-head .sec-title { margin-left: auto; margin-right: auto; }
.blk-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.blk-intro { margin-top: 16px; color: var(--muted); font-size: 1.04rem; }
.blk-intro p { max-width: 62ch; }
.blk-intro p + p { margin-top: .8em; }
.blk-intro a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.blk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: var(--btn-radius, 999px); border: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; color: var(--text);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.blk-btn:hover { border-color: var(--text); transform: translateY(-2px); }
.blk-btn.is-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.blk-btn.is-main:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.blk-empty { color: var(--faint); border: 1px dashed var(--line-strong); padding: 40px; text-align: center; border-radius: var(--radius); }

/* ---------- top menu styles (theme) ---------- */
.no-hero main { padding-top: 76px; }
.hdr-solid .site-header { background: rgba(var(--bg-rgb), .94); border-bottom-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 861px) {
  .hdr-center .header-inner { flex-direction: column; justify-content: center; height: auto; padding: 18px 0 14px; gap: 10px; }
  .hdr-center.no-hero main { padding-top: 112px; }
  .hdr-center .wordmark-name { font-size: 1.4rem; }
}
.wordmark-logo { height: 36px; width: auto; display: block; }

/* ---------- how sections appear (theme) ---------- */
.anim-fade.js .reveal, .js .anim-fade .reveal { transform: none; }
.anim-none .reveal, .js .anim-none .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* preview in /admin: the section being edited is outlined */
.blk-focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- language switcher (top menu, when the site has several languages) ---------- */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.nav .lang-switch a { font-size: 12px; letter-spacing: .08em; padding: 4px 6px; color: var(--faint); }
.nav .lang-switch a::after { display: none; }
.nav .lang-switch a:hover, .nav .lang-switch a.on { color: var(--text); }
.nav .lang-switch a.on { box-shadow: inset 0 -1px 0 var(--accent); }
@media (max-width: 860px) { .lang-switch { border-left: 0; padding-left: 0; margin: 18px 0 0; gap: 8px; } .nav .lang-switch a { font-size: 14px; } }
[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 6px; padding-left: 0; padding-right: 14px; border-left: 0; border-right: 1px solid var(--line); }