/* ═══════════════════════════════════════════════════════════════════════
   SMALL WORLD · BLOCK CANVAS  —  public/assets/css/blocks.css
   Styles for the free-form "blocks" section (see templates/sections/blocks.mjs).
   Every class is prefixed .sw-b- (blocks) or .sw-blocks (the section container).
   Built ONLY on the site's existing design tokens (redesign.css): --sky/--gold/
   --aurora/--pale/--ink/--text/--soft, --radius, --card-shadow, --font-display/
   --font-body, --grad-star/--grad-sea, --sw-ease/--sw-dur. Dark mode is picked
   up automatically through the tokens (+ a few body.dark surface overrides).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── section container + layout ──────────────────────────────────────── */
.sw-blocks {
  /* local surfaces so cards read correctly in light AND dark */
  --sw-b-surface: #ffffff;
  --sw-b-line: rgba(8, 17, 32, .10);
  --sw-b-tint: rgba(14, 116, 144, .07);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 24px);
  box-sizing: border-box;
  color: var(--text);
  font-family: var(--font-body);
}
body.dark .sw-blocks {
  --sw-b-surface: rgba(20, 40, 58, .55);
  --sw-b-line: rgba(232, 244, 248, .12);
  --sw-b-tint: rgba(56, 197, 186, .10);
}
.sw-blocks--narrow { max-width: 720px; }
.sw-blocks--normal { max-width: 960px; }
.sw-blocks--wide   { max-width: 1180px; }
.sw-blocks--full   { max-width: 100%; padding-inline: clamp(20px, 6vw, 72px); }
.sw-blocks--center { text-align: center; }

/* vertical rhythm between top-level blocks (columns/panels reset this) */
.sw-blocks > * + * { margin-top: 26px; }
.sw-blocks--center .sw-b-btn,
.sw-blocks--center .sw-b-badge { margin-inline: auto; }

/* ── heading ─────────────────────────────────────────────────────────── */
.sw-b-heading {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
body.dark .sw-b-heading { color: #eaf3f7; }
h2.sw-b-heading { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3.sw-b-heading { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h4.sw-b-heading { font-size: clamp(1.1rem, 1.8vw, 1.28rem); }
.sw-b--left   { text-align: left; }
.sw-b--center { text-align: center; }

/* ── rich text ───────────────────────────────────────────────────────── */
.sw-b-text {
  font-size: 1.03rem;
  line-height: 1.72;
  color: var(--text);
}
.sw-b-text strong { font-weight: 650; color: var(--ink); }
body.dark .sw-b-text strong { color: #eaf3f7; }
.sw-b-text em { font-style: italic; }
.sw-b-text a {
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-text a:hover { color: var(--gold); }

/* ── image ───────────────────────────────────────────────────────────── */
.sw-b-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sw-b-img--rnone  { border-radius: 0; }
.sw-b-img--rsoft  { border-radius: var(--radius); }
.sw-b-img--rround { border-radius: 999px; aspect-ratio: 1 / 1; }
.sw-b-img--shadow { box-shadow: var(--card-shadow); }

/* ── video ───────────────────────────────────────────────────────────── */
.sw-b-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--card-shadow);
}
.sw-b-video iframe,
.sw-b-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* ── buttons (link + download share the .sw-b-btn base) ──────────────── */
.sw-b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--sw-dur, .42s) var(--sw-ease, ease),
              box-shadow var(--sw-dur, .42s) var(--sw-ease, ease),
              background var(--sw-dur, .42s) var(--sw-ease, ease),
              color var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-btn .sw-b-ico { font-size: 1.15em; }
.sw-b-btn__label { display: inline-flex; }
/* the site's global .material-icons base (main.css) is written for glyphs that
   sit ABOVE a card title: display:block, margin-bottom:14px, color:var(--sky).
   Inside a button or badge all three are wrong — the bottom margin alone pushed
   the glyph 7px above the label's centre, and the forced sky colour overrode the
   button's own text colour (white on a solid button). Reset them here; the
   stacked .sw-b-fcard__icon deliberately keeps the global behaviour. */
.sw-b-btn .sw-b-ico,
.sw-b-badge .sw-b-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  color: inherit;
}
.sw-b-btn--sm { padding: .5em 1.1em; font-size: .86rem; }
.sw-b-btn--md { padding: .72em 1.5em; font-size: .98rem; }
.sw-b-btn--lg { padding: .9em 2em; font-size: 1.1rem; }
.sw-b-btn--solid {
  background: var(--grad-sea);
  color: #fff;
  box-shadow: 0 8px 22px rgba(14, 116, 144, .28);
}
.sw-b-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14, 116, 144, .38); }
.sw-b-btn--outline {
  background: transparent;
  color: var(--sky);
  border-color: color-mix(in srgb, var(--sky) 45%, transparent);
}
.sw-b-btn--outline:hover { background: var(--sw-b-tint); border-color: var(--sky); transform: translateY(-2px); }
.sw-b-btn--ghost { background: transparent; color: var(--sky); }
.sw-b-btn--ghost:hover { background: var(--sw-b-tint); }
.sw-b-btn--empty { opacity: .5; cursor: not-allowed; pointer-events: none; }
@media (max-width: 560px) {
  .sw-b-btn { width: 100%; }
}

/* ── badge (pill) ────────────────────────────────────────────────────── */
.sw-b-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .42em .95em;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}
.sw-b-badge .sw-b-ico { font-size: 1.1em; }
.sw-b-badge--sky    { background: rgba(14, 116, 144, .12);  color: var(--sky2); }
.sw-b-badge--gold   { background: rgba(239, 163, 29, .16);  color: #a86a06; }
.sw-b-badge--aurora { background: rgba(56, 197, 186, .16);  color: #0f766e; }
.sw-b-badge--ink    { background: rgba(8, 17, 32, .08);     color: var(--ink); }
body.dark .sw-b-badge--sky    { background: rgba(56, 197, 186, .16); color: #7fd8ce; }
body.dark .sw-b-badge--gold   { background: rgba(239, 163, 29, .18); color: var(--gold2); }
body.dark .sw-b-badge--aurora { background: rgba(56, 197, 186, .18); color: #7fd8ce; }
body.dark .sw-b-badge--ink    { background: rgba(232, 244, 248, .12); color: #dcebf1; }

/* ── feature card (accent edge + icon) ───────────────────────────────── */
.sw-b-fcard {
  position: relative;
  background: var(--sw-b-surface);
  border: 1px solid var(--sw-b-line);
  border-radius: var(--radius);
  padding: 30px 30px 30px 34px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  text-align: left;
  transition: transform var(--sw-dur, .42s) var(--sw-ease, ease),
              box-shadow var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-fcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
}
.sw-b-fcard:hover { transform: translateY(-3px); box-shadow: 0 18px 54px rgba(8, 17, 32, .14); }
.sw-b-fcard--gold::before   { background: var(--grad-star); }
.sw-b-fcard--sky::before    { background: var(--grad-sea); }
.sw-b-fcard--aurora::before { background: linear-gradient(180deg, var(--aurora), var(--sky)); }
.sw-b-fcard__icon .material-icons {
  font-size: 2rem;
  line-height: 1;
}
.sw-b-fcard--gold   .sw-b-fcard__icon .material-icons { color: var(--gold); }
.sw-b-fcard--sky    .sw-b-fcard__icon .material-icons { color: var(--sky); }
.sw-b-fcard--aurora .sw-b-fcard__icon .material-icons { color: var(--aurora); }
.sw-b-fcard__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: .55em 0 .3em;
}
body.dark .sw-b-fcard__title { color: #eaf3f7; }
.sw-b-fcard__body { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--text); }

/* ── stat ────────────────────────────────────────────────────────────── */
.sw-b-stat { display: inline-flex; flex-direction: column; gap: .2em; }
.sw-blocks--center .sw-b-stat { align-items: center; }
.sw-b-stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sky);
  background: var(--grad-sea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sw-b-stat__suffix { -webkit-text-fill-color: currentColor; color: var(--gold); margin-left: .04em; }
.sw-b-stat__label {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ── columns ─────────────────────────────────────────────────────────── */
.sw-b-cols { display: grid; }
.sw-b-cols--2 { grid-template-columns: repeat(2, 1fr); }
.sw-b-cols--3 { grid-template-columns: repeat(3, 1fr); }
.sw-b-cols--4 { grid-template-columns: repeat(4, 1fr); }
.sw-b-cols--gsm { gap: 16px; }
.sw-b-cols--gmd { gap: 28px; }
.sw-b-cols--glg { gap: 44px; }
.sw-b-col > * + * { margin-top: 20px; }
@media (max-width: 900px) {
  .sw-b-cols--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .sw-b-cols { grid-template-columns: 1fr !important; }
}

/* ── divider ─────────────────────────────────────────────────────────── */
.sw-b-divider { width: 100%; height: 1px; border: 0; }
.sw-b-divider--line { background: var(--sw-b-line); }
.sw-b-divider--dots {
  height: 6px;
  background: radial-gradient(circle, var(--soft) 1.6px, transparent 1.8px) repeat-x;
  background-size: 16px 6px;
  opacity: .6;
}
.sw-b-divider--wave {
  height: 10px;
  background:
    radial-gradient(circle at 8px -4px, transparent 8px, var(--sky) 8px 8.6px, transparent 9px) repeat-x;
  background-size: 16px 10px;
  opacity: .5;
}

/* ── spacer ──────────────────────────────────────────────────────────── */
.sw-b-spacer { width: 100%; }
.sw-b-spacer--sm { height: 16px; }
.sw-b-spacer--md { height: 36px; }
.sw-b-spacer--lg { height: 64px; }
.sw-b-spacer--xl { height: 104px; }

/* ── accordion (native <details>, zero JS) ───────────────────────────── */
.sw-b-accordion { display: flex; flex-direction: column; gap: 12px; }
.sw-b-acc {
  background: var(--sw-b-surface);
  border: 1px solid var(--sw-b-line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-acc[open] { box-shadow: var(--card-shadow); }
.sw-b-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 1.05rem;
  color: var(--ink);
  list-style: none;
}
body.dark .sw-b-acc__q { color: #eaf3f7; }
.sw-b-acc__q::-webkit-details-marker { display: none; }
.sw-b-acc__chev {
  flex: none;
  color: var(--sky);
  transition: transform var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-acc[open] .sw-b-acc__chev { transform: rotate(180deg); }
.sw-b-acc__a {
  padding: 0 20px 18px;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── tabs (radio-input CSS technique, zero JS on the published site) ──── */
.sw-b-tabs { position: relative; }
.sw-b-tab__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sw-b-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--sw-b-line);
  margin-bottom: 22px;
}
.sw-b-tab__label {
  padding: 10px 18px;
  font-weight: 600;
  font-size: .96rem;
  color: var(--soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--sw-dur, .42s) var(--sw-ease, ease),
              border-color var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-tab__label:hover { color: var(--sky); }
.sw-b-tab__radio:focus-visible + .sw-b-tabs__list .sw-b-tab__label { outline: 2px solid var(--gold); }
.sw-b-tab__panel { display: none; }
.sw-b-tab__panel > * + * { margin-top: 20px; }
/* map checked radio N -> active label N + visible panel N (up to 8 tabs) */
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(1):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(1),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(2):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(2),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(3):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(3),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(4):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(4),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(5):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(5),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(6):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(6),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(7):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(7),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(8):checked ~ .sw-b-tabs__list > .sw-b-tab__label:nth-child(8) {
  color: var(--sky); border-bottom-color: var(--sky);
}
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(1):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(1),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(2):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(2),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(3):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(3),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(4):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(4),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(5):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(5),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(6):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(6),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(7):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(7),
.sw-b-tabs > .sw-b-tab__radio:nth-of-type(8):checked ~ .sw-b-tabs__panels > .sw-b-tab__panel:nth-child(8) {
  display: block;
}

/* ── decorative shape (aria-hidden) ──────────────────────────────────── */
.sw-b-shape { pointer-events: none; }
.sw-b-shape--sm { --sw-b-sz: 60px; }
.sw-b-shape--md { --sw-b-sz: 120px; }
.sw-b-shape--lg { --sw-b-sz: 200px; }
.sw-b-shape--circle { width: var(--sw-b-sz); height: var(--sw-b-sz); border-radius: 50%; background: var(--sw-b-shapecol, var(--sky)); }
.sw-b-shape--ring   { width: var(--sw-b-sz); height: var(--sw-b-sz); border-radius: 50%; border: calc(var(--sw-b-sz) * .12) solid var(--sw-b-shapecol, var(--sky)); background: none; }
.sw-b-shape--line   { width: var(--sw-b-sz); height: 4px; border-radius: 4px; background: var(--sw-b-shapecol, var(--sky)); }
.sw-b-shape--blob   {
  width: var(--sw-b-sz); height: var(--sw-b-sz);
  background: var(--sw-b-shapecol, var(--sky));
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}
.sw-b-shape--csky    { --sw-b-shapecol: var(--sky); }
.sw-b-shape--cgold   { --sw-b-shapecol: var(--gold); }
.sw-b-shape--caurora { --sw-b-shapecol: var(--aurora); }
.sw-b-shape--cpale   { --sw-b-shapecol: var(--mist); }
.sw-b-shape--cink    { --sw-b-shapecol: var(--ink); }

/* ── framed image ────────────────────────────────────────────────────── */
.sw-b-frame { display: inline-block; max-width: 100%; }
.sw-blocks--center .sw-b-frame { display: block; margin-inline: auto; width: fit-content; }
.sw-b-frame__img { display: block; width: 100%; height: auto; object-fit: cover; }
.sw-b-frame--polaroid {
  background: #fff;
  padding: 14px 14px 46px;
  box-shadow: 0 14px 40px rgba(8, 17, 32, .18);
  border-radius: 4px;
}
.sw-b-frame--polaroid .sw-b-frame__img { border-radius: 2px; }
.sw-b-frame--arch .sw-b-frame__img { border-radius: 50% 50% 8px 8px / 34% 34% 8px 8px; box-shadow: var(--card-shadow); }
.sw-b-frame--circle .sw-b-frame__img { aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: var(--card-shadow); }
.sw-b-frame--tilt {
  transform: rotate(-2.2deg);
  transition: transform var(--sw-dur, .42s) var(--sw-ease, ease);
}
.sw-b-frame--tilt .sw-b-frame__img { border-radius: var(--radius); box-shadow: 0 16px 44px rgba(8, 17, 32, .2); }
.sw-b-frame--tilt:hover { transform: rotate(0deg); }

/* ── ghost hints for empty text (EDITOR ONLY) ────────────────────────────
   templates/sections/blocks.mjs stamps data-sw-ph on a language span only when
   that span is empty AND the render is for the editor, so these rules can never
   fire on the published site — the attribute simply isn't in the HTML there.
   :empty is what makes the hint vanish the instant the first character lands. */
.sw-blocks [data-sw-ph]:empty::before {
  content: attr(data-sw-ph);
  opacity: .38;
  font-style: italic;
  font-weight: 400;
  /* the hint is decoration: never selectable, never draggable as text, and
     never picked up by copy/paste out of the canvas */
  -webkit-user-select: none;
  user-select: none;
}
/* an empty block still needs a hit area you can click, select and drag */
.sw-blocks .sw-b-heading:has([data-sw-ph]:empty),
.sw-blocks .sw-b-text:has([data-sw-ph]:empty) { min-height: 1.2em; }

/* ── empty placeholders (no url yet — editor targets these) ──────────── */
.sw-b-empty {
  width: 100%;
  min-height: 120px;
  border: 1.5px dashed var(--sw-b-line);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, var(--sw-b-tint) 0 10px, transparent 10px 20px);
}
.sw-b-empty--video { aspect-ratio: 16 / 9; min-height: 0; }
.sw-b-frame--empty { display: block; }
.sw-b-frame--empty .sw-b-empty { min-height: 200px; }

/* ── motion preference ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sw-b-btn, .sw-b-fcard, .sw-b-frame--tilt, .sw-b-acc__chev,
  .sw-b-tab__label, .sw-b-text a { transition: none; }
}