/*!
 * CMS Web Builder — block styles.
 *
 * One section per block type, in the same order as the registry. Layout uses
 * Grid/Flexbox with logical properties so right-to-left languages work without
 * a separate stylesheet.
 */

/* ------------------------------------------------------------- section */
.wf-section { position: relative; }
.wf-section--media { color: #fff; }
.wf-section--media :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.wf-section__overlay { position: absolute; inset: 0; pointer-events: none; }
.wf-section > .wf-container { position: relative; z-index: 1; }
/* The header's container must stack above later sections, or its dropdown
   menus render underneath the hero and stop taking clicks. */
header.wf-section > .wf-container { z-index: 30; }

.wf-shape { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: var(--wf-color-background); }
.wf-shape--slant { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.wf-shape--curve { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.wf-shape--wave  { clip-path: polygon(0 60%, 25% 90%, 50% 60%, 75% 30%, 100% 60%, 100% 100%, 0 100%); }

/* ------------------------------------------------------------- columns */
.wf-columns { align-items: stretch; }
.wf-column { min-width: 0; }
@media (max-width: 479px)  { .wf-columns--stack-sm { grid-template-columns: 1fr !important; } }
@media (max-width: 767px)  { .wf-columns--stack-md { grid-template-columns: 1fr !important; } }
@media (max-width: 1023px) { .wf-columns--stack-lg { grid-template-columns: 1fr !important; } }
@media (max-width: 767px)  { .wf-columns--reverse { display: flex !important; flex-direction: column-reverse; } }

.wf-grid > * { min-width: 0; }

/* ---------------------------------------------------------------- card */
.wf-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--wf-color-background);
  border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-lg);
  overflow: hidden;
  transition: transform 0.2s var(--wf-ease), box-shadow 0.2s var(--wf-ease);
}
.wf-card--sm { box-shadow: var(--wf-shadow-sm); }
.wf-card--md { box-shadow: var(--wf-shadow-md); }
.wf-card--lg { box-shadow: var(--wf-shadow-lg); }
.wf-card--lift:hover { transform: translateY(-3px); box-shadow: var(--wf-shadow-lg); }
.wf-card__media { margin: calc(var(--wf-space-6) * -1) calc(var(--wf-space-6) * -1) var(--wf-space-5); overflow: hidden; }
.wf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wf-card__body { flex: 1; }
/* Stretched link: whole card clickable, inner links still reachable. */
.wf-card__link { position: absolute; inset: 0; z-index: 1; }
.wf-card :is(a, button):not(.wf-card__link) { position: relative; z-index: 2; }

/* ------------------------------------------------------------- heading */
.wf-heading { margin-bottom: var(--wf-space-4); }
.wf-heading--sm  { font-size: var(--wf-text-lg); }
.wf-heading--md  { font-size: var(--wf-text-xl); }
.wf-heading--lg  { font-size: var(--wf-text-2xl); }
.wf-heading--xl  { font-size: var(--wf-text-3xl); }
.wf-heading--2xl { font-size: var(--wf-text-4xl); }
.wf-heading--3xl { font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem); line-height: 1.05; }
.wf-heading__eyebrow {
  display: block; margin-bottom: var(--wf-space-2);
  font-size: var(--wf-text-sm); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wf-color-brand);
}

/* ---------------------------------------------------------------- text */
.wf-text--sm { font-size: var(--wf-text-sm); }
.wf-text--lg { font-size: var(--wf-text-lg); }
.wf-text--xl { font-size: var(--wf-text-xl); line-height: 1.45; color: var(--wf-color-text-muted); }
.wf-text :is(ul, ol) { padding-inline-start: 1.4em; }
.wf-text li + li { margin-top: var(--wf-space-2); }
.wf-text blockquote {
  margin-inline: 0; padding-inline-start: var(--wf-space-5);
  border-inline-start: 3px solid var(--wf-color-brand); color: var(--wf-color-text-muted);
}
.wf-dropcap > p:first-of-type::first-letter {
  float: inline-start; font-size: 3.4em; line-height: 0.86;
  padding-inline-end: 0.08em; font-weight: 700; color: var(--wf-color-brand);
}

/* ---------------------------------------------------------------- list */
.wf-list { list-style: none; padding: 0; }
.wf-list--bullet { list-style: disc; padding-inline-start: 1.3em; }
.wf-list--number { list-style: decimal; padding-inline-start: 1.3em; }
.wf-list__item { display: flex; gap: var(--wf-space-3); align-items: flex-start; }
.wf-list--bullet .wf-list__item, .wf-list--number .wf-list__item { display: list-item; }
.wf-list__item + .wf-list__item { margin-top: var(--wf-space-3); }
.wf-list__icon { flex: none; color: var(--wf-list-icon, var(--wf-color-brand)); margin-top: 0.15em; }

/* --------------------------------------------------------------- quote */
.wf-quote { margin: 0; padding: var(--wf-space-6) 0; }
.wf-quote__mark { display: block; color: var(--wf-color-brand); opacity: 0.35; margin-bottom: var(--wf-space-3); }
.wf-quote blockquote { margin: 0; font-size: var(--wf-text-xl); line-height: 1.4; font-weight: 500; }
.wf-quote__cite { display: flex; align-items: center; gap: var(--wf-space-3); margin-top: var(--wf-space-4); font-size: var(--wf-text-sm); }
.wf-quote__avatar { border-radius: 50%; flex: none; }
.wf-quote__author { display: block; font-weight: 600; }
.wf-quote__role { display: block; color: var(--wf-color-text-muted); }

/* ---------------------------------------------------------------- code */
.wf-code { margin: 0 0 var(--wf-space-4); }
.wf-code__pre {
  margin: 0; padding: var(--wf-space-5); overflow-x: auto;
  background: #1a1c20; color: #e8eaed;
  border-radius: var(--wf-radius); font-size: var(--wf-text-sm); line-height: 1.6;
  tab-size: 2;
}
.wf-code__pre::before {
  content: attr(data-lang); display: block; margin-bottom: var(--wf-space-3);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7a8290;
}
.wf-code__caption { margin-top: var(--wf-space-2); font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); }

/* --------------------------------------------------------------- table */
/* A wide table scrolls, but with no scrollbar showing it simply looks cut off
   at the edge — the timetable and menu templates hit this on a tablet. The
   gradients are painted against the scroll container, so a shadow appears only
   on the side there is more content, and disappears at each end. */
.wf-table-wrap {
  overflow-x: auto;
  /* Solid ground: the affordance layers below are painted in the page
     background colour, and over a coloured section they read as stray white
     strips unless the wrap owns its whole surface as a card. */
  background-color: var(--wf-color-background);
  border-radius: var(--wf-radius-sm);
  background:
    linear-gradient(to right, var(--wf-color-background), transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--wf-color-background), transparent) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 13%), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 13%), transparent) 100% 0 / 14px 100% no-repeat scroll;
}
.wf-table { width: 100%; border-collapse: collapse; font-size: var(--wf-text-sm); }
.wf-table :is(th, td) { padding: var(--wf-space-3) var(--wf-space-4); text-align: start; border-bottom: 1px solid var(--wf-color-border); }
.wf-table thead th { font-weight: 650; background: var(--wf-color-surface); white-space: nowrap; }
.wf-table--striped tbody tr:nth-child(even) { background: var(--wf-color-surface); }
.wf-table--compact :is(th, td) { padding: var(--wf-space-2) var(--wf-space-3); }
.wf-table caption { caption-side: top; text-align: start; padding-bottom: var(--wf-space-3); color: var(--wf-color-text-muted); font-size: var(--wf-text-sm); }

/* --------------------------------------------------------------- badge */
.wf-badge {
  display: inline-flex; align-items: center; gap: var(--wf-space-1);
  padding: 0.25em 0.75em; border-radius: 999px;
  font-size: var(--wf-text-sm); font-weight: 600; line-height: 1.5;
  background: color-mix(in oklab, var(--wf-color-brand) 14%, transparent); color: var(--wf-color-brand);
}
.wf-badge--neutral { background: var(--wf-color-surface); color: var(--wf-color-text-muted); }
.wf-badge--success { background: #ebfbee; color: #2b8a3e; }
.wf-badge--warning { background: #fff4e6; color: #a1670a; }
.wf-badge--danger  { background: #fff5f5; color: #c92a2a; }

/* --------------------------------------------------------------- image */
.wf-image__img { width: 100%; border-radius: inherit; }
.wf-image__zoom { display: block; padding: 0; border: 0; background: none; width: 100%; border-radius: inherit; }
.wf-image__caption { margin-top: var(--wf-space-2); font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); }

/* ------------------------------------------------------------- gallery */
.wf-gallery__item { margin: 0; }
.wf-gallery--masonry .wf-gallery__item { break-inside: avoid; margin-bottom: var(--wf-space-3); }
.wf-gallery__zoom { display: block; padding: 0; border: 0; background: none; width: 100%; cursor: zoom-in; }
.wf-gallery__img { width: 100%; border-radius: var(--wf-radius-sm); }
.wf-gallery--carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: var(--wf-space-3);
}
.wf-gallery--carousel .wf-gallery__item {
  flex: 0 0 calc((100% - (var(--wf-gallery-cols) - 1) * var(--wf-space-3)) / var(--wf-gallery-cols));
  scroll-snap-align: start;
}
.wf-gallery__caption { margin-top: var(--wf-space-1); font-size: var(--wf-text-xs); color: var(--wf-color-text-muted); }

/* ------------------------------------------------------- video / audio */
.wf-video__el, .wf-video__frame { width: 100%; border: 0; border-radius: var(--wf-radius); background: #000; }
.wf-video__caption { margin-top: var(--wf-space-2); font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); }
.wf-audio__el { width: 100%; }
.wf-audio__title { font-weight: 600; margin-bottom: var(--wf-space-2); }

/* ---------------------------------------------------------------- icon */
.wf-icon-block { display: inline-flex; align-items: center; justify-content: center; color: var(--wf-color-brand); }
.wf-icon-block--circle, .wf-icon-block--square {
  padding: 0.65em; background: color-mix(in oklab, var(--wf-color-brand) 12%, transparent);
}
.wf-icon-block--circle { border-radius: 50%; }
.wf-icon-block--square { border-radius: var(--wf-radius); }

/* ---------------------------------------------------------------- hero */
.wf-hero { position: relative; display: flex; align-items: center; }
.wf-hero--h-medium { min-height: 60vh; }
.wf-hero--h-tall   { min-height: 80vh; }
.wf-hero--h-full   { min-height: 100svh; }
.wf-hero__inner { padding-block: var(--wf-space-20); width: 100%; }
.wf-hero--bg { color: #fff; }
.wf-hero__overlay { position: absolute; inset: 0; background: #000; }
.wf-hero--bg .wf-hero__inner { position: relative; z-index: 1; }
.wf-hero__eyebrow { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wf-color-brand); font-size: var(--wf-text-sm); }
.wf-hero--bg .wf-hero__eyebrow { color: #fff; opacity: 0.85; }
.wf-hero__heading { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.2rem); line-height: 1.06; margin-bottom: var(--wf-space-5); }
.wf-hero__sub { font-size: var(--wf-text-lg); color: var(--wf-color-text-muted); max-width: 60ch; margin-bottom: var(--wf-space-8); }
.wf-hero--bg .wf-hero__sub { color: rgb(255 255 255 / 88%); }
/* Centring follows the alignment control, not the layout: a centred-layout
   hero set to left-aligned text used to centre its subheading and buttons
   anyway, so only half the block obeyed the setting. */
.wf-hero--centered.wf-align-center .wf-hero__sub { margin-inline: auto; }
.wf-hero--centered.wf-align-center .wf-cta-row { justify-content: center; }
.wf-hero.wf-align-right .wf-cta-row { justify-content: flex-end; }
.wf-hero.wf-align-right .wf-hero__sub { margin-inline-start: auto; }
.wf-hero__note { margin-top: var(--wf-space-4); font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); }
.wf-hero__media img { border-radius: var(--wf-radius-lg); width: 100%; }
@media (min-width: 768px) {
  .wf-hero--split .wf-hero__inner,
  .wf-hero--split-reverse .wf-hero__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--wf-space-16); align-items: center;
  }
  .wf-hero--split-reverse .wf-hero__copy { order: 2; }
}

/* ------------------------------------------------------------ features */
.wf-features { --wf-cols: 3; }
/* Between 768px and 1024px the author's column count is a request, not an
   instruction: four columns across a 768px tablet leaves ~170px each and breaks
   words mid-syllable. Fit what fits, then honour the exact count once there is
   room for it. .wf-steps--horizontal already worked this way. */
@media (min-width: 768px) { .wf-features { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important; } }
@media (min-width: 1024px) { .wf-features { grid-template-columns: repeat(var(--wf-cols), minmax(0, 1fr)) !important; } }
.wf-feature { position: relative; min-width: 0; }
.wf-features--card .wf-feature, .wf-features--bordered .wf-feature {
  padding: var(--wf-space-6); border-radius: var(--wf-radius-lg); border: 1px solid var(--wf-color-border);
}
.wf-features--card .wf-feature { background: var(--wf-color-background); box-shadow: var(--wf-shadow-sm); }
.wf-feature__icon { display: inline-flex; margin-bottom: var(--wf-space-4); color: var(--wf-color-brand); }
.wf-feature__image img { width: 64px; height: 64px; object-fit: contain; margin-bottom: var(--wf-space-4); }
.wf-feature__title { font-size: var(--wf-text-lg); margin-bottom: var(--wf-space-2); }
.wf-feature__text { color: var(--wf-color-text-muted); margin: 0; }
.wf-feature__link { position: absolute; inset: 0; }

/* --------------------------------------------------------------- stats */
.wf-stats { display: flex; flex-wrap: wrap; gap: var(--wf-space-10); margin: 0; }
.wf-stat { flex: 1 1 140px; text-align: center; }
.wf-stats--divided .wf-stat + .wf-stat { border-inline-start: 1px solid var(--wf-color-border); padding-inline-start: var(--wf-space-10); }
.wf-stat__value { margin: 0; font-size: var(--wf-text-3xl); font-weight: 700; line-height: 1; color: var(--wf-color-brand); }
.wf-stat__affix { font-size: 0.6em; }
.wf-stat__label { margin-top: var(--wf-space-2); color: var(--wf-color-text-muted); font-size: var(--wf-text-sm); }

/* ------------------------------------------------------------- pricing */
.wf-pricing { display: grid; gap: var(--wf-space-6); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: start; }
.wf-plan {
  position: relative; padding: var(--wf-space-8) var(--wf-space-6);
  border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-lg);
  background: var(--wf-color-background);
}
.wf-plan--featured { border-color: var(--wf-color-brand); border-width: 2px; box-shadow: var(--wf-shadow-lg); }
.wf-plan__badge {
  position: absolute; top: 0; inset-inline-end: var(--wf-space-6); transform: translateY(-50%);
  padding: 0.25em 0.85em; border-radius: 999px;
  background: var(--wf-color-brand); color: var(--wf-color-brand-contrast);
  font-size: var(--wf-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.wf-plan__name { font-size: var(--wf-text-lg); margin-bottom: var(--wf-space-3); }
.wf-plan__price { display: flex; align-items: baseline; gap: 2px; margin-bottom: var(--wf-space-3); }
.wf-plan__currency { font-size: var(--wf-text-lg); font-weight: 600; }
.wf-plan__amount { font-size: var(--wf-text-3xl); font-weight: 700; line-height: 1; }
.wf-plan__period { font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); margin-inline-start: var(--wf-space-2); }
.wf-plan__desc { color: var(--wf-color-text-muted); font-size: var(--wf-text-sm); }
.wf-plan__features { list-style: none; padding: 0; margin: var(--wf-space-5) 0; }
.wf-plan__features li { display: flex; gap: var(--wf-space-2); align-items: flex-start; margin-bottom: var(--wf-space-3); font-size: var(--wf-text-sm); }
.wf-plan__features .wf-icon { color: var(--wf-color-brand); flex: none; margin-top: 0.15em; }
.wf-plan__cta .wf-btn { width: 100%; }

/* -------------------------------------------------------- testimonials */
.wf-testimonials--grid { display: grid; gap: var(--wf-space-6); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.wf-testimonials--slider { display: flex; gap: var(--wf-space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--wf-space-4); }
.wf-testimonials--slider .wf-testimonial { flex: 0 0 min(420px, 85%); scroll-snap-align: center; }
.wf-testimonial {
  margin: 0; padding: var(--wf-space-6);
  background: var(--wf-color-surface); border-radius: var(--wf-radius-lg);
  border: 1px solid var(--wf-color-border);
}
.wf-testimonial__rating { display: flex; gap: 2px; color: #f59f00; margin: 0 0 var(--wf-space-3); }
.wf-testimonial__quote { margin: 0 0 var(--wf-space-4); font-size: var(--wf-text-lg); line-height: 1.5; }
.wf-testimonial__cite { display: flex; align-items: center; gap: var(--wf-space-3); font-size: var(--wf-text-sm); }
.wf-testimonial__avatar { border-radius: 50%; flex: none; }
.wf-testimonial__author { display: block; font-weight: 600; }
.wf-testimonial__role { display: block; color: var(--wf-color-text-muted); }

/* --------------------------------------------------------------- logos */
.wf-logos__heading { text-align: center; color: var(--wf-color-text-muted); font-size: var(--wf-text-sm); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--wf-space-6); }
.wf-logos__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wf-space-10); }
.wf-logos--muted .wf-logos__img { filter: grayscale(1); opacity: 0.6; transition: filter 0.2s var(--wf-ease), opacity 0.2s var(--wf-ease); }
.wf-logos--muted .wf-logos__item:hover .wf-logos__img { filter: none; opacity: 1; }

/* ---------------------------------------------------------------- team */
.wf-team { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wf-space-8); }
@media (min-width: 768px) { .wf-team { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } }
@media (min-width: 1024px) { .wf-team { grid-template-columns: repeat(var(--wf-cols), minmax(0, 1fr)); } }
.wf-person { text-align: center; }
.wf-person__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--wf-radius-lg); margin-bottom: var(--wf-space-4); }
.wf-team--circle .wf-person__photo img { border-radius: 50%; }
.wf-person__name { font-size: var(--wf-text-lg); margin-bottom: var(--wf-space-1); }
.wf-person__role { color: var(--wf-color-brand); font-size: var(--wf-text-sm); font-weight: 500; margin-bottom: var(--wf-space-2); }
.wf-person__bio { color: var(--wf-color-text-muted); font-size: var(--wf-text-sm); margin: 0; }

/* --------------------------------------------------------------- steps */
.wf-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wf-space-8); counter-reset: wf-step; }
.wf-steps--horizontal { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.wf-step { display: flex; gap: var(--wf-space-4); align-items: flex-start; }
.wf-steps--horizontal .wf-step { flex-direction: column; }
.wf-step__marker {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--wf-color-brand); color: var(--wf-color-brand-contrast);
  font-weight: 700; font-size: var(--wf-text-lg);
}
.wf-step__title { font-size: var(--wf-text-lg); margin-bottom: var(--wf-space-2); }
.wf-step__text { color: var(--wf-color-text-muted); margin: 0; }

/* ----------------------------------------------------------------- cta */
.wf-cta { background: var(--wf-color-surface); border: 1px solid var(--wf-color-border); text-align: center; }
.wf-cta--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wf-space-8); text-align: start; }
.wf-cta__heading { font-size: var(--wf-text-2xl); margin-bottom: var(--wf-space-3); }
.wf-cta__text { color: var(--wf-color-text-muted); font-size: var(--wf-text-lg); margin: 0; }
.wf-cta--centered .wf-cta-row { justify-content: center; margin-top: var(--wf-space-6); }

/* ----------------------------------------------------------- accordion */
.wf-accordion--bordered { border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-lg); overflow: hidden; }
.wf-accordion--bordered .wf-accordion__item + .wf-accordion__item { border-top: 1px solid var(--wf-color-border); }
.wf-accordion--separated .wf-accordion__item { border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius); margin-bottom: var(--wf-space-3); }
.wf-accordion__summary {
  display: flex; align-items: center; gap: var(--wf-space-3);
  padding: var(--wf-space-4) var(--wf-space-5); cursor: pointer;
  font-weight: 600; list-style: none; min-height: 44px;
}
.wf-accordion__summary::-webkit-details-marker { display: none; }
.wf-accordion__summary:hover { background: var(--wf-color-surface); }
.wf-accordion__title { flex: 1; }
.wf-accordion__marker { transition: transform 0.2s var(--wf-ease); color: var(--wf-color-text-muted); }
.wf-accordion__item[open] .wf-accordion__marker { transform: rotate(180deg); }
.wf-accordion__body { padding: 0 var(--wf-space-5) var(--wf-space-5); color: var(--wf-color-text-muted); }

/* ---------------------------------------------------------------- tabs */
.wf-tabs__list { display: flex; gap: var(--wf-space-1); overflow-x: auto; border-bottom: 1px solid var(--wf-color-border); }
.wf-tabs--vertical { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--wf-space-8); }
.wf-tabs--vertical .wf-tabs__list { flex-direction: column; border-bottom: 0; border-inline-end: 1px solid var(--wf-color-border); }
.wf-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--wf-space-2);
  padding: var(--wf-space-3) var(--wf-space-5); min-height: 44px;
  border: 0; background: none; color: var(--wf-color-text-muted);
  font-weight: 600; white-space: nowrap; position: relative;
}
.wf-tabs__tab[aria-selected="true"] { color: var(--wf-color-brand); }
.wf-tabs--underline .wf-tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: var(--wf-space-3); bottom: -1px; height: 2px;
  background: var(--wf-color-brand);
}
.wf-tabs--pill .wf-tabs__tab[aria-selected="true"] { background: var(--wf-color-brand); color: var(--wf-color-brand-contrast); border-radius: var(--wf-radius); }
.wf-tabs__panel { padding-top: var(--wf-space-6); }
.wf-tabs--vertical .wf-tabs__panel { padding-top: 0; }

/* ----------------------------------------------------------- countdown */
.wf-countdown { display: flex; gap: var(--wf-space-6); justify-content: center; }
.wf-countdown__unit { text-align: center; min-width: 64px; }
.wf-countdown__value { display: block; font-size: var(--wf-text-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wf-color-brand); }
.wf-countdown--sm .wf-countdown__value { font-size: var(--wf-text-xl); }
.wf-countdown--lg .wf-countdown__value { font-size: var(--wf-text-4xl); }
.wf-countdown__label { display: block; margin-top: var(--wf-space-1); font-size: var(--wf-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wf-color-text-muted); }

/* ------------------------------------------------------------ progress */
.wf-progress__row + .wf-progress__row { margin-top: var(--wf-space-4); }
.wf-progress__head { display: flex; justify-content: space-between; margin-bottom: var(--wf-space-2); font-size: var(--wf-text-sm); }
.wf-progress__label { font-weight: 600; }
.wf-progress__value { color: var(--wf-color-text-muted); font-variant-numeric: tabular-nums; }
.wf-progress__bar { width: 100%; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--wf-color-surface); }
.wf-progress__bar::-webkit-progress-bar { background: var(--wf-color-surface); border-radius: 999px; }
.wf-progress__bar::-webkit-progress-value { background: var(--wf-progress-color, var(--wf-color-brand)); border-radius: 999px; transition: width 0.9s var(--wf-ease); }
.wf-progress__bar::-moz-progress-bar { background: var(--wf-progress-color, var(--wf-color-brand)); border-radius: 999px; }

/* ----------------------------------------------------------------- nav */
.wf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--wf-space-1); align-items: center; flex-wrap: wrap; }
.wf-nav--vertical .wf-nav__list { flex-direction: column; align-items: stretch; }
.wf-nav__item { position: relative; }
.wf-nav__link {
  display: inline-flex; align-items: center; padding: var(--wf-space-2) var(--wf-space-4);
  min-height: 44px; border-radius: var(--wf-radius-sm);
  color: var(--wf-color-text); text-decoration: none; font-weight: 500;
}
.wf-nav__link:hover { background: var(--wf-color-surface); }
.wf-nav__link[aria-current="page"] { color: var(--wf-color-brand); font-weight: 650; }
.wf-nav__toggle { display: none; padding: var(--wf-space-3); border: 0; background: none; min-height: 44px; min-width: 44px; }
.wf-nav__bars, .wf-nav__bars::before, .wf-nav__bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.2s var(--wf-ease), opacity 0.2s var(--wf-ease);
}
.wf-nav__bars::before, .wf-nav__bars::after { content: ""; position: relative; }
.wf-nav__bars::before { top: -7px; }
.wf-nav__bars::after { top: 5px; }
.wf-nav__expand { display: inline-flex; padding: var(--wf-space-1); border: 0; background: none; color: var(--wf-color-text-muted); }
.wf-nav__sub {
  list-style: none; margin: 0; padding: var(--wf-space-2);
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 200px; z-index: 20;
  background: var(--wf-color-background); border: 1px solid var(--wf-color-border);
  border-radius: var(--wf-radius); box-shadow: var(--wf-shadow-lg);
  display: none;
}
.wf-nav__item--has-children:is(:hover, :focus-within) > .wf-nav__sub { display: block; }
.wf-nav__item--has-children > .wf-nav__expand[aria-expanded="true"] + .wf-nav__sub { display: block; }

@media (max-width: 767px) {
  .wf-nav--m-drawer .wf-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .wf-nav--m-drawer .wf-nav__list { display: none; flex-direction: column; align-items: stretch; }
  .wf-nav--m-drawer.wf-nav--open .wf-nav__list {
    display: flex; position: absolute; inset-inline: 0; top: 100%; z-index: 30;
    padding: var(--wf-space-3); background: var(--wf-color-background);
    border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow-lg);
  }
  .wf-nav--m-drawer .wf-nav__sub { position: static; display: block; box-shadow: none; border: 0; padding-inline-start: var(--wf-space-4); }
  .wf-nav--m-scroll .wf-nav__list { overflow-x: auto; flex-wrap: nowrap; }
}

/* --------------------------------------------------------- breadcrumbs */
.wf-breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wf-space-2); font-size: var(--wf-text-sm); }
.wf-crumb { display: flex; align-items: center; gap: var(--wf-space-2); color: var(--wf-color-text-muted); }
.wf-crumb__sep { opacity: 0.5; display: inline-flex; }

/* --------------------------------------------------------------- posts */
.wf-posts { list-style: none; padding: 0; margin: 0; }
.wf-posts--grid { --wf-cols: 3; }
@media (min-width: 768px) { .wf-posts--grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; } }
@media (min-width: 1024px) { .wf-posts--grid { grid-template-columns: repeat(var(--wf-cols), minmax(0, 1fr)) !important; } }
.wf-posts--list .wf-post { display: flex; gap: var(--wf-space-6); padding-bottom: var(--wf-space-6); margin-bottom: var(--wf-space-6); border-bottom: 1px solid var(--wf-color-border); }
.wf-posts--list .wf-post__media { flex: 0 0 200px; }
.wf-post__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--wf-radius); }
.wf-posts--grid .wf-post__media { display: block; margin-bottom: var(--wf-space-4); }
.wf-post__title { font-size: var(--wf-text-lg); margin-bottom: var(--wf-space-2); }
.wf-post__title a { color: inherit; text-decoration: none; }
.wf-post__title a:hover { color: var(--wf-color-brand); }
.wf-post__meta { display: flex; gap: var(--wf-space-3); font-size: var(--wf-text-sm); color: var(--wf-color-text-muted); margin-bottom: var(--wf-space-2); }
.wf-post__meta:empty { display: none; }
.wf-post__excerpt { color: var(--wf-color-text-muted); margin: 0; }
.wf-post--compact { display: flex; justify-content: space-between; gap: var(--wf-space-4); padding: var(--wf-space-3) 0; border-bottom: 1px solid var(--wf-color-border); }

/* --------------------------------------------------------- embed / map */
.wf-embed__frame, .wf-map__frame { width: 100%; border: 0; border-radius: var(--wf-radius); }
.wf-map__link, .wf-embed__fallback, .wf-map__fallback { margin-top: var(--wf-space-2); font-size: var(--wf-text-sm); }

/* --------------------------------------------------------------- share */
.wf-share__heading { font-size: var(--wf-text-sm); font-weight: 600; margin-bottom: var(--wf-space-2); }
.wf-share__list { display: flex; flex-wrap: wrap; gap: var(--wf-space-2); }
.wf-share__btn {
  display: inline-flex; align-items: center; gap: var(--wf-space-2);
  min-width: 44px; min-height: 44px; padding: 0 var(--wf-space-3);
  justify-content: center;
  border: 1px solid var(--wf-color-border); border-radius: var(--wf-radius-sm);
  background: var(--wf-color-background); color: var(--wf-color-text); text-decoration: none;
  font-size: var(--wf-text-sm); font-weight: 500;
}
.wf-share__btn:hover { background: var(--wf-color-surface); }

/* ------------------------------------------------------------ lightbox */
.wf-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.wf-lightbox::backdrop { background: rgb(0 0 0 / 82%); backdrop-filter: blur(2px); }
.wf-lightbox img { max-width: 96vw; max-height: 90vh; width: auto; height: auto; border-radius: var(--wf-radius); }
.wf-lightbox__close {
  position: absolute; top: var(--wf-space-3); inset-inline-end: var(--wf-space-3);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 55%); color: #fff; font-size: 24px; line-height: 1;
}