/* Sorted theme — shared design system for Interaktif sites (Bannero-style) */

:root {
  /* Brand accents — override per site via the sorted_accent_color filter */
  --sorted-accent: #FF2E63;
  --sorted-accent-deep: #D91E52;
  --sorted-lime: #D6FF2E;
  --sorted-teal: #08D9D6;

  /* Ink / neutrals */
  --sorted-ink: #252A34;
  --sorted-ink-soft: #5C6472;
  --sorted-bg: #FFFFFF;
  --sorted-bg-alt: #F0F0F0;
  --sorted-border: color-mix(in srgb, var(--sorted-ink) 12%, transparent);

  /*
   * The colour chrome highlights with: nav hover, the current page, social
   * and language links, card borders on hover. Defaults to the accent, which
   * is right for a brand whose accent is an actual colour.
   *
   * It exists as its own token because accent/footer colours are deliberately
   * NOT remapped in dark mode (see :root[data-theme="dark"] below) — they are
   * brand colours, not surface colours. A brand whose accent is close to the
   * ink (interaktif's palette is monochrome) therefore highlighted to
   * near-black on a dark page, i.e. the highlight vanished. Such a brand
   * points this at --sorted-ink instead, in one place.
   */
  --sorted-highlight: var(--sorted-accent);

  /* Shape */
  --sorted-radius: 0;
  --sorted-radius-pill: 999px;
  --sorted-max-width: 1240px;
  /* Full-bleed elements (heroes) stay edge-to-edge, but stop growing past
     this on ultrawide monitors instead of stretching indefinitely. */
  --sorted-max-width-wide: 1920px;

  /*
   * Neo-brutalist signature: a chunky solid border, flat fields of color,
   * sharp corners — deliberately NO drop shadow anywhere (not even a hard
   * offset one). Hover/focus feedback comes from border/background color
   * changes instead of shadow.
   */
  --sorted-border-width: 3px;

  /* Type families */
  --sorted-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --sorted-font-display: 'Fraunces', Georgia, serif;
  --sorted-font-script: 'Lobster', cursive;

  /*
   * Weight for every heading set in --sorted-font-display. Kept as one
   * token (every heading rule reads it via var()) because it has to match
   * whatever weight the display font actually ships: Bebas Neue (this
   * site's font) is a single-weight display face, so forcing 600 on it
   * made the browser fake-embolden every heading — synthetic bold, which
   * reads as thick/blurry and hard to read at these sizes.
   */
  --sorted-heading-weight: 400;

  /*
   * THE type scale. Every font-size in this file is one of these ten
   * values (same numbers as Tailwind's text-xs..text-6xl) — nothing is
   * ever a one-off literal size. If a size needs to change, it changes
   * here and every block picks it up.
   */
  --sorted-fs-xs:  0.75rem;
  --sorted-fs-sm:  0.875rem;
  --sorted-fs-base: 1rem;
  --sorted-fs-lg:  1.125rem;
  --sorted-fs-xl:  1.25rem;
  --sorted-fs-2xl: 1.5rem;
  --sorted-fs-3xl: 1.875rem;
  --sorted-fs-4xl: 2.25rem;
  --sorted-fs-5xl: 3rem;
  --sorted-fs-6xl: 3.75rem;

  /* Semantic aliases — mobile-first. Only h1/h2 grow at the lg breakpoint. */
  --sorted-h1: var(--sorted-fs-4xl);
  --sorted-h2: var(--sorted-fs-3xl);
  --sorted-h3: var(--sorted-fs-xl);

  /* Section rhythm, mobile-first */
  --sorted-space-section: 2.5rem;
  --sorted-container-pad: 1.25rem;

  /* Footer — full-color by default, swap with the sorted_footer_bg filter */
  --sorted-footer-bg: var(--sorted-ink);
  --sorted-footer-text: #FFFFFF;

  /*
   * `light`, not `light dark`. `light dark` hands the initial canvas,
   * scrollbars and form controls to the OS preference — but this theme
   * switches on the explicit data-theme toggle only (see below), so on a
   * dark-mode machine the browser painted dark, then the light palette
   * arrived, which reads as a flash on every load. Dark mode sets
   * color-scheme: dark itself, further down.
   */
  color-scheme: light;
}

@media (min-width: 1024px) {
  :root {
    --sorted-h1: var(--sorted-fs-6xl);
    --sorted-h2: var(--sorted-fs-4xl);
    --sorted-space-section: 4rem;
    --sorted-container-pad: 1.5rem;
  }
}

/*
 * Dark mode. Every block reads color from --sorted-bg / --sorted-bg-alt /
 * --sorted-ink / --sorted-ink-soft (never a hardcoded color), and
 * --sorted-border is derived from --sorted-ink via color-mix(), so
 * redefining just these four here is enough to flip the whole theme —
 * no per-block dark-mode CSS needed. Accent/footer colors are deliberately
 * left alone; they're brand colors, not surface colors.
 *
 * Only switches via the explicit toggle button (data-theme="dark") —
 * does NOT auto-follow OS/browser prefers-color-scheme. The site defaults
 * to the light/solid look regardless of the visitor's system setting.
 * See assets/js/theme-toggle.js.
 */
:root[data-theme="dark"] {
  --sorted-bg: #28282D;
  --sorted-bg-alt: #323238;
  --sorted-ink: #F0F0F2;
  --sorted-ink-soft: #FFFFFF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }

/* Sticky footer: body is a column flex container, main grows to fill
   whatever the page content doesn't use, so the footer always sits at
   the bottom of the viewport even on short pages. */
body {
  font-family: var(--sorted-font-body);
  font-size: var(--sorted-fs-base);
  color: var(--sorted-ink);
  background: var(--sorted-bg);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
/*
 * The sticky footer, deliberately NOT on bare `body`. This file is also
 * loaded as an editor style, and WordPress rewrites `body` selectors onto
 * .editor-styles-wrapper — a 100vh flex column there fights the editor
 * canvas and throws block spacing off. .sorted-site is added by the
 * body_class filter in inc/setup.php, so only the real front end gets it.
 */
body.sorted-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sorted-topbar,
.sorted-header,
.sorted-footer { flex: none; }
.sorted-main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--sorted-accent); color: #fff; }

.sorted-container {
  max-width: var(--sorted-max-width);
  margin-inline: auto;
  padding-inline: var(--sorted-container-pad);
}

/*
 * Safety net for native/core Gutenberg blocks (table, paragraph, list…)
 * typed directly into a page's content — template-landing.php (what
 * almost every page actually uses) has no container at all, since
 * Sorted's own blocks manage their own max-width and want to sit flush
 * under .sorted-main (some, like the full-bleed hero/photo band, need to
 * span the full viewport). A bare core block has no such self-management
 * and would otherwise stretch edge-to-edge. Only applies one level deep
 * so it doesn't reach inside a Sorted block's own inner content.
 */
.sorted-main > .wp-block-table,
.sorted-main > .wp-block-paragraph,
.sorted-main > .wp-block-list,
.sorted-main > .wp-block-heading,
.sorted-main > .wp-block-image,
.sorted-main > .wp-block-group,
.sorted-main > .wp-block-query {
  max-width: var(--sorted-max-width);
  margin-inline: auto;
  padding-inline: var(--sorted-container-pad);
}
/* A wide table can still be wider than the container on a phone — scroll
   it horizontally instead of overflowing the page. */
.sorted-main > .wp-block-table { overflow-x: auto; }

/*
 * Shared border treatment — every card-style component pulls its border
 * from this rule instead of repeating the declaration per-component, so
 * the contour only needs changing in one place. Buttons are deliberately
 * NOT in here — they stay pill-shaped with no border (see .sorted-btn).
 * Each card still sets its own background, padding, hover color, etc.
 * below as usual — only `border` lives here.
 */
.sorted-feature-card,
.sorted-pricing-card,
.sorted-category-tile,
.sorted-faq-item,
.sorted-timeline__card,
.wpcf7,
.wp-block-post {
  border: var(--sorted-border-width) solid var(--sorted-ink);
}

/*
 * Card titles — one place. The display font (Bebas Neue) is condensed, and
 * condensed caps at card-title size run together badly with default
 * tracking, so they get more letter-spacing than the big section headings
 * do. Add new card titles here rather than setting letter-spacing per
 * component.
 */
.sorted-feature-card__title,
.sorted-pricing-card__title,
.sorted-category-tile__label,
.wp-block-post-title {
  letter-spacing: .06em;
  line-height: 1.3;
}

/* Plain text links (as opposed to nav items/buttons) — red and underlined,
   not muted gray-on-hover-only, and NOT the browser's default blue/purple
   (several body-text areas had no `a` rule at all — links inside them fell
   straight back to default browser link colors). */
.sorted-footer__venue-line a,
.sorted-hero__body a,
.sorted-media-text__body a,
.sorted-text-section__body a,
.sorted-cta-statement__body a,
.sorted-feature-card__text a {
  color: var(--sorted-highlight);
  text-decoration: underline;
}
.sorted-footer__venue-line a:hover,
.sorted-hero__body a:hover,
.sorted-media-text__body a:hover,
.sorted-text-section__body a:hover,
.sorted-cta-statement__body a:hover,
.sorted-feature-card__text a:hover { color: color-mix(in srgb, var(--sorted-highlight) 70%, var(--sorted-bg)); }
/* On the accent-band CTA variant, body text is already white on red —
   keep its links white too rather than accent-on-accent (invisible). */
.sorted-cta-statement--accent .sorted-cta-statement__body a { color: #fff; }
.sorted-cta-statement--accent .sorted-cta-statement__body a:hover { color: var(--sorted-ink); }

/* Topbar — thin accent strip above the header, only rendered when populated */
.sorted-topbar { background: var(--sorted-accent); color: #fff; }
.sorted-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 36px; }
.sorted-topbar__link {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 .8rem;
  border-radius: var(--sorted-radius-pill);
  color: #fff;
  text-decoration: none;
  font-size: var(--sorted-fs-sm);
  font-weight: 500;
}
.sorted-topbar__link.is-active { background: #fff; color: var(--sorted-accent); }

/* Header */
.sorted-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sorted-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sorted-border);
}
.sorted-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 72px;
  gap: 1.5rem;
  padding-block: .5rem;
}
@media (min-width: 1024px) {
  .sorted-header__inner { min-height: 84px; padding-block: 0; }
  /* Nav centers in the remaining space; socials + dark toggle stay pinned right */
  .sorted-header__actions { flex: 1; margin-left: 0; }
  .sorted-header__nav { flex: 1; }
  .sorted-header__nav > ul { justify-content: center; }
}
.sorted-header__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--sorted-ink); font-family: var(--sorted-font-script); font-size: var(--sorted-fs-2xl); }
.sorted-header__logo img { max-height: 2.5rem; width: auto; }

/*
 * Light/dark logo swap (sorted_render_logo(), used when a site supplies
 * both sorted_logo_light and sorted_logo_dark). Both images sit stacked in
 * a fixed-size box via position:absolute + object-fit, and only opacity
 * toggles — never display/size — so the swap can never nudge surrounding
 * header layout, regardless of the two files' exact pixel dimensions.
 */
.sorted-logo-link { position: relative; display: inline-block; width: 6.9rem; height: 2.5rem; }
.sorted-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.sorted-logo--dark { opacity: 0; }
:root[data-theme="dark"] .sorted-logo--light { opacity: 0; }
:root[data-theme="dark"] .sorted-logo--dark { opacity: 1; }

/* Footer background is always dark regardless of the site's light/dark
   toggle (see the dark-mode comment above), so it must always show the
   dark-background logo variant too — never follow the global toggle. */
.sorted-footer .sorted-logo-link .sorted-logo--light { opacity: 0; }
.sorted-footer .sorted-logo-link .sorted-logo--dark { opacity: 1; }
.sorted-header__nav > ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin: 0; padding: 0; }
.sorted-header__nav a { display: inline-flex; align-items: center; }
.sorted-header__nav a { color: var(--sorted-ink); text-decoration: none; font-size: 1.1rem; font-weight: 500; font-family: var(--sorted-font-display); letter-spacing: .03em; text-transform: uppercase; }
.sorted-header__nav a:hover { color: var(--sorted-highlight); }
.sorted-header__nav .current-menu-item > a,
.sorted-header__nav .current-menu-ancestor > a,
.sorted-header__nav .current_page_item > a { color: var(--sorted-highlight); }

/* Dropdown submenus (wp_nav_menu's default .sub-menu, up to 3 levels deep) */
.sorted-header__nav li { position: relative; }
.sorted-header__nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--sorted-bg);
  border: none;
  border-top: 2px solid var(--sorted-highlight);
  border-radius: 0;
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--sorted-ink) 25%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 100;
}
.sorted-header__nav .sub-menu .sub-menu { top: -.5rem; left: 100%; }
.sorted-header__nav li:hover > .sub-menu,
.sorted-header__nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sorted-header__nav .sub-menu li { width: 100%; }
.sorted-header__nav .sub-menu a { display: block; padding: .5rem .6rem; border-radius: 0; white-space: nowrap; }
.sorted-header__nav .sub-menu a:hover { background: var(--sorted-bg-alt); }
.sorted-header__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.sorted-header__end { display: flex; align-items: center; gap: .5rem; }
.sorted-header__lang { display: flex; align-items: center; height: 1.75rem; gap: .35rem; margin-left: 2rem; font-family: var(--sorted-font-display); font-size: var(--sorted-fs-sm); letter-spacing: .03em; line-height: 1; transform: translateY(1px); }
.sorted-header__lang-link { display: inline-flex; align-items: center; color: var(--sorted-ink-soft); text-decoration: none; line-height: 1; }
.sorted-header__lang-link:hover { color: var(--sorted-highlight); }
.sorted-header__lang-link.is-current { color: var(--sorted-ink); font-weight: 700; }
.sorted-header__lang-link + .sorted-header__lang-link::before { content: "/"; margin-right: .35rem; color: var(--sorted-border); }
.sorted-header__socials { display: flex; align-items: center; gap: .4rem; }
.sorted-header__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sorted-ink);
  font-size: var(--sorted-fs-sm);
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}
.sorted-header__social svg { width: 1rem; height: 1rem; }
.sorted-header__social:hover { color: var(--sorted-highlight); }
.sorted-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--sorted-border);
  border-radius: var(--sorted-radius-pill);
  background: var(--sorted-bg-alt);
  color: var(--sorted-ink);
  font-size: var(--sorted-fs-base);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform .15s ease, background-color .2s ease;
}
.sorted-theme-toggle:hover { transform: translateY(-1px); }
.sorted-theme-toggle__icon { width: .85rem; height: .85rem; }

/* Mobile/tablet nav: hamburger toggle + full-screen overlay panel below 1024px */
.sorted-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border: 1px solid var(--sorted-border);
  border-radius: var(--sorted-radius-pill);
  background: var(--sorted-bg-alt);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 60;
}
.sorted-nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--sorted-ink);
  transition: transform .2s ease, opacity .2s ease;
  flex-shrink: 0;
}
.sorted-header[data-nav-open="true"] .sorted-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sorted-header[data-nav-open="true"] .sorted-nav-toggle__bar:nth-child(2) { opacity: 0; }
.sorted-header[data-nav-open="true"] .sorted-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .sorted-nav-toggle { display: none; }
}

@media (max-width: 1023px) {
  .sorted-header__inner { position: relative; justify-content: center; }
  .sorted-nav-toggle {
    position: absolute;
    left: var(--sorted-container-pad);
    top: 0;
    bottom: 0;
    margin-block: auto;
    margin-left: 0;
  }
  .sorted-header__logo { margin-inline: auto; }

  /*
   * Dropdown panel, not a full-screen takeover: sits right below the header
   * (top: 100%, anchored to .sorted-header's own sticky positioning) and
   * sizes to its content, so whatever's already on the page stays visible
   * underneath it instead of being hidden behind a forced 100vh overlay.
   */
  .sorted-header__actions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    max-height: 80vh;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    margin-left: 0;
    padding: 1.5rem var(--sorted-container-pad);
    background: var(--sorted-bg);
    border-top: 1px solid var(--sorted-border);
    box-shadow: 0 24px 32px -20px color-mix(in srgb, var(--sorted-ink) 25%, transparent);
    overflow-y: auto;
    z-index: 55;
  }
  .sorted-header[data-nav-open="true"] .sorted-header__actions {
    display: flex;
  }
  .sorted-header__nav { width: 100%; }
  .sorted-header__nav > ul { flex-direction: column; align-items: stretch; gap: .1rem; text-align: left; }
  .sorted-header__nav li { width: 100%; }
  .sorted-header__nav a { display: block; padding: .6rem 0; font-size: var(--sorted-fs-lg); }

  .sorted-header__nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 1rem;
    display: none;
  }
  .sorted-header__nav li.is-submenu-open > .sub-menu { display: block; margin-top: .25rem; }
  .sorted-header__nav .sub-menu a { font-size: var(--sorted-fs-base); padding: .4rem 0; }
  .sorted-header__nav .sub-menu .sub-menu { left: 0; top: 0; }

  .sorted-header__cta { width: 100%; text-align: center; }

  /* Socials + dark-mode toggle, pinned to the bottom of the panel */
  .sorted-header__end {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sorted-border);
    justify-content: center;
    width: 100%;
  }
}
body.sorted-nav-is-open { overflow: hidden; }

/* Buttons — pill shaped, no border, flat color */
.sorted-btn {
  display: inline-block;
  background: var(--sorted-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--sorted-fs-base);
  padding: .85rem 1.7rem;
  border-radius: var(--sorted-radius-pill);
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.sorted-btn:hover { background: var(--sorted-accent-deep); transform: translateY(-1px); }
.sorted-btn--sm { padding: .5rem 1.1rem; font-size: var(--sorted-fs-sm); }

/*
 * Eyebrow badge — turned off site-wide per feedback (the pre-header tag,
 * e.g. "HLAVNÍ INSTRUKTOR", read as clutter). `display: none` is the one
 * line to remove to bring it back; the rest of the rule is left as-is so
 * nothing else needs touching if it's wanted back later. Block editor
 * fields/JS are untouched too, so no content is lost either way.
 */
.sorted-eyebrow {
  display: none;
  align-items: center;
  align-items: center;
  gap: .5rem;
  font-size: var(--sorted-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sorted-ink);
  background: var(--sorted-bg);
  border: 2px solid var(--sorted-ink);
  border-radius: var(--sorted-radius);
  padding: .35rem .9rem;
  margin-bottom: 1.4rem;
}
.sorted-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sorted-highlight); flex-shrink: 0; }
/* On a dark/overlay hero the badge sits on the photo itself — keep it legible without a background fill fighting the image. */
.sorted-hero__overlay-content .sorted-eyebrow,
.sorted-photo-band .sorted-eyebrow {
  background: color-mix(in srgb, var(--sorted-ink) 55%, transparent);
  border-color: #fff;
  color: #fff;
}

/* Hero */
.sorted-hero { padding-block: var(--sorted-space-section); padding-inline: var(--sorted-container-pad); }
.sorted-hero__heading {
  max-width: var(--sorted-max-width);
  margin: 0 auto 1.75rem;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h1);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--sorted-ink);
}
.sorted-hero__grid {
  max-width: var(--sorted-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .sorted-hero__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.sorted-hero__body { font-size: var(--sorted-fs-lg); color: var(--sorted-ink-soft); max-width: 34rem; }
.sorted-hero__features { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.65rem; font-size: var(--sorted-fs-base); }
.sorted-hero__features li::before { content: "✓ "; color: var(--sorted-highlight); font-weight: 700; }
.sorted-hero__image img { border-radius: var(--sorted-radius); margin-inline: auto; max-width: 26rem; }
.sorted-hero__image picture,
.sorted-hero__media picture { display: contents; }

/* Hero — full-bleed video/photo variant */
/* Full-bleed (capping it to the container looked worse — a hero is the one
   place edge-to-edge earns its keep), but stops at --sorted-max-width-wide
   so it doesn't stretch forever on an ultrawide display. */
.sorted-hero--fullbleed {
  position: relative;
  max-width: var(--sorted-max-width-wide);
  margin-inline: auto;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem var(--sorted-container-pad) 3rem;
  overflow: hidden;
}
@media (min-width: 900px) {
  .sorted-hero--fullbleed { min-height: 90vh; padding-bottom: 4rem; }
}
.sorted-hero__media { position: absolute; inset: 0; z-index: 0; }
.sorted-hero__video,
.sorted-hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .4s ease;
}
.sorted-hero--fullbleed:hover .sorted-hero__video,
.sorted-hero--fullbleed:hover .sorted-hero__bg-image {
  filter: brightness(1.15);
}
.sorted-hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.sorted-hero__overlay-content { position: relative; z-index: 1; max-width: 48rem; text-align: center; color: #fff; }
.sorted-hero__overlay-content .sorted-hero__heading--light { margin-bottom: 1rem; }
.sorted-hero__heading--light { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.sorted-hero__body--light { color: rgba(255, 255, 255, .92); margin-inline: auto; }
.sorted-hero__features--light { color: #fff; justify-items: center; }
.sorted-hero__features--light li::before { color: var(--sorted-lime); }

/* Media + text — two-column bio/feature section, image flips side via modifier */
.sorted-media-text { padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-media-text__grid {
  max-width: var(--sorted-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .sorted-media-text__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .sorted-media-text--left .sorted-media-text__content { order: 2; }
  .sorted-media-text--left .sorted-media-text__image { order: 1; }
}
.sorted-media-text__content .sorted-section-heading { text-align: left; margin-bottom: 1rem; }
.sorted-media-text__content h1.sorted-section-heading { font-size: var(--sorted-h1); line-height: 1.1; letter-spacing: .005em; }
.sorted-media-text__body { font-size: var(--sorted-fs-lg); color: var(--sorted-ink-soft); }
.sorted-media-text__body p { margin: 0 0 1rem; }
.sorted-media-text__body p:last-child { margin-bottom: 0; }
.sorted-media-text .sorted-btn { margin-top: 1.5rem; }
.sorted-media-text__image { overflow: hidden; border-radius: var(--sorted-radius); }
.sorted-media-text__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.sorted-media-text__image:hover img { transform: scale(1.05); }

/* Pricing card */
/* A standalone pricing card is a full-width bar. Several of them stacked
   that way reads as a list, which is why they belong in a
   sorted/pricing-cards grid instead — see the grid overrides below. */
.sorted-pricing-wrap { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }

.sorted-pricing-cards { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
/* Highlighted note above a price grid (e.g. the ISIC student discount) —
   solid accent bar so it reads before the prices do. */
.sorted-pricing-cards__note {
  display: block;
  max-width: max-content;
  margin: -1rem auto 2rem;
  padding: .6rem 1.25rem;
  background: var(--sorted-accent);
  color: #fff;
  font-size: var(--sorted-fs-base);
  font-weight: 700;
  text-align: center;
}
.sorted-pricing-cards__note a { color: #fff; text-decoration: underline; }

.sorted-pricing-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Inside the grid each card fills its cell: the per-card wrapper drops its
   own container width/padding, and the card stacks vertically (title/
   subtitle above the price) instead of the wide title-left/price-right bar. */
.sorted-pricing-cards__grid .sorted-pricing-wrap { max-width: none; margin: 0; padding: 0; }
.sorted-pricing-cards__grid .sorted-pricing-card {
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
.sorted-pricing-cards__grid .sorted-pricing-card__price { text-align: left; margin-top: auto; }
.sorted-pricing-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--sorted-radius);
  background: var(--sorted-bg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
@media (min-width: 640px) {
  .sorted-pricing-card { padding: 2rem; }
}
.sorted-pricing-card:hover { border-color: var(--sorted-highlight); }
.sorted-pricing-card__title { font-family: var(--sorted-font-display); font-variation-settings: 'SOFT' 100; font-weight: var(--sorted-heading-weight); font-size: var(--sorted-h3); margin: 0 0 .25rem; }
.sorted-pricing-card__subtitle { margin: 0; font-size: var(--sorted-fs-base); color: var(--sorted-ink-soft); }
.sorted-pricing-card__price { text-align: right; }
.sorted-pricing-card__amount { font-size: var(--sorted-h2); font-weight: 800; margin: 0; color: var(--sorted-ink); }
.sorted-pricing-card__note { margin: 0; font-size: var(--sorted-fs-base); color: var(--sorted-ink-soft); }
@media (max-width: 420px) {
  .sorted-pricing-card__price { text-align: left; }
}

/*
 * Články (Query Loop, core Gutenberg blocks — post-featured-image/
 * post-title/post-excerpt/read-more) had zero theme styling at all, so it
 * rendered as an unstyled default WordPress list. Same card language as
 * a card, just more compact: smaller image, tighter type,
 * less padding.
 */
.wp-block-query { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-post {
  display: flex;
  flex-direction: column;
  border-radius: var(--sorted-radius);
  background: var(--sorted-bg);
  overflow: hidden;
  transition: border-color .15s ease;
}
.wp-block-post:hover { border-color: var(--sorted-highlight); }
.wp-block-post-featured-image { margin: 0; }
.wp-block-post-featured-image a { display: block; }
/* Same rule as the event cards: full card width, natural aspect ratio,
   never cropped. */
.wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
/* Same 1.5rem inline padding + consistent vertical rhythm as
   .sorted-feature-card body, and the same
   font-size/weight as every other card title on the site. */
.wp-block-post-title {
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h3);
  line-height: 1.25;
  margin: 1.5rem 1.5rem 0;
}
.wp-block-post-title a { color: var(--sorted-ink); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--sorted-highlight); }
.wp-block-post-excerpt {
  font-size: var(--sorted-fs-sm);
  color: var(--sorted-ink-soft);
  line-height: 1.5;
  margin: .5rem 1.5rem 0;
}
.wp-block-post-excerpt p { margin: 0; }
/* WordPress's actual class here is `wp-block-read-more` (no "-link" —
   easy to get wrong, it's the one core-block class that breaks the
   pattern every other post-* class follows). */
.wp-block-read-more {
  display: block;
  color: var(--sorted-highlight);
  text-decoration: underline;
  font-size: var(--sorted-fs-sm);
  font-weight: 600;
  margin: .75rem 1.5rem 1.5rem;
}
.wp-block-read-more:hover { color: color-mix(in srgb, var(--sorted-highlight) 70%, var(--sorted-bg)); }

.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.5rem;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .5rem;
  color: var(--sorted-ink);
  text-decoration: none;
  font-size: var(--sorted-fs-sm);
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-numbers a:hover { color: var(--sorted-highlight); }
.wp-block-query-pagination-numbers .current { color: var(--sorted-highlight); font-weight: 700; }

/* Single post/event reading column — narrower than the generic .sorted-container
   (which full-width block layouts manage their own width inside anyway), since
   raw the_content() HTML has no per-block width control of its own. */
.sorted-single { max-width: 48rem; margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }

/* Basic page template — plain prose (legal text, policies, terms). Same
   reading-column width as .sorted-single, plus full typography for
   whatever raw HTML the_content() hands us (headings, lists, tables,
   links, blockquotes) since none of that is styled by default. */
.sorted-basic-page { max-width: 48rem; margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-basic-content { color: var(--sorted-ink-soft); font-size: var(--sorted-fs-lg); }
.sorted-basic-content > *:first-child { margin-top: 0; }
.sorted-basic-content > *:last-child { margin-bottom: 0; }
.sorted-basic-content h2 {
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h3);
  line-height: 1.2;
  color: var(--sorted-ink);
  margin: 2.5rem 0 1rem;
}
.sorted-basic-content h3 {
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-fs-xl);
  line-height: 1.3;
  color: var(--sorted-ink);
  margin: 2rem 0 .75rem;
}
.sorted-basic-content p { margin: 0 0 1.25rem; }
.sorted-basic-content ul,
.sorted-basic-content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.sorted-basic-content li { margin-bottom: .5rem; }
.sorted-basic-content li > ul,
.sorted-basic-content li > ol { margin-top: .5rem; margin-bottom: 0; }
.sorted-basic-content a { color: var(--sorted-highlight); text-decoration: underline; }
.sorted-basic-content a:hover { color: color-mix(in srgb, var(--sorted-highlight) 70%, var(--sorted-bg)); }
.sorted-basic-content strong { color: var(--sorted-ink); }
.sorted-basic-content blockquote {
  border-left: var(--sorted-border-width) solid var(--sorted-ink);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--sorted-ink);
}
.sorted-basic-content hr { border: none; border-top: 1px solid var(--sorted-border); margin: 2rem 0; }
/* display:block + overflow-x lets wide tables (common in cookie-policy
   dumps) scroll instead of overflowing the reading column on mobile. */
.sorted-basic-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: var(--sorted-fs-base);
}
.sorted-basic-content th,
.sorted-basic-content td {
  border: 1px solid var(--sorted-border);
  padding: .6rem .75rem;
  text-align: left;
  vertical-align: top;
}
.sorted-basic-content th { background: var(--sorted-bg-alt); font-weight: 700; }
.sorted-basic-content img { border-radius: var(--sorted-radius); margin: 1.5rem 0; }

.sorted-page-title {
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h2);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--sorted-ink);
  margin: 0 0 1.5rem;
}

/* Page hero band — auto-rendered above the title on any page/basic-page
   template that has a Featured Image set (see inc/page-hero.php). Same
   mobile-crop <picture> pattern as the Hero block, same 799px breakpoint. */
.sorted-page-hero { max-width: var(--sorted-max-width-wide); margin-inline: auto; width: 100%; max-height: 480px; overflow: hidden; }
.sorted-page-hero picture { display: contents; }
.sorted-page-hero__img { width: 100%; height: 480px; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .sorted-page-hero,
  .sorted-page-hero__img { max-height: 260px; height: 260px; }
}

.sorted-event-single__image img {
  display: block;
  border-radius: 0;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  margin-bottom: 1.5rem;
}
@media (min-width: 700px) {
  .sorted-event-single__image img {
    width: 100vw;
    max-width: var(--sorted-max-width);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.sorted-event-single__meta {
  background: var(--sorted-bg-alt);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  gap: .5rem;
}
.sorted-event-single__meta p { margin: 0; }

/* Contact Form 7 — same chunky-border card as the rest of the site (no
   shadow), targeting CF7's own stable class names (no shortcode edits needed). */
.wpcf7 {
  max-width: var(--sorted-max-width);
  /* Shrinks on narrower viewports so the box keeps a side gutter instead
     of touching the edge (the CF7 shortcode has no .sorted-container of
     its own to rely on for that, unlike most other full-width sections). */
  width: calc(100% - 2 * var(--sorted-container-pad));
  margin: .5rem auto 3rem;
  background: var(--sorted-bg);
  padding: 2rem;
  text-align: left;
}
/* Mobile-first single column. */
.wpcf7-form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) {
  .wpcf7-form { grid-template-columns: repeat(2, 1fr); }
}
.wpcf7-form p { margin: 0; }
.wpcf7-form p:nth-of-type(3),
.wpcf7-form p:has(textarea),
.wpcf7-form p:has(input[type="submit"]) { grid-column: 1 / -1; }
/*
 * hCaptcha (ptkali.cz uses the "hCaptcha for Forms and More" plugin, not
 * reCAPTCHA) — its widget is a fixed 302×76px box the plugin renders with
 * its own `clear:both` styling. Give its paragraph the full row, same as
 * the textarea/submit above, with breathing room on both sides so it
 * doesn't sit flush against the message field or the button.
 */
.wpcf7-form p:has(.h-captcha) { grid-column: 1 / -1; margin: .5rem 0; }
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  border: 2px solid var(--sorted-ink);
  border-radius: var(--sorted-radius);
  background: var(--sorted-bg);
  color: var(--sorted-ink);
  font-family: var(--sorted-font-body);
  font-size: var(--sorted-fs-base);
  padding: .75rem;
  transition: border-color .1s ease;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
  outline: 2px solid var(--sorted-highlight);
  outline-offset: 2px;
  border-color: var(--sorted-highlight);
}
.wpcf7-submit {
  border: none;
  border-radius: var(--sorted-radius-pill);
  background: var(--sorted-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--sorted-fs-base);
  padding: .85rem 1.7rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.wpcf7-submit:hover { background: var(--sorted-accent-deep); transform: translateY(-1px); }
.wpcf7-not-valid-tip { color: var(--sorted-highlight); font-size: var(--sorted-fs-sm); font-weight: 600; margin-top: .35rem; }
.wpcf7-response-output {
  margin-top: 1.5rem !important;
  padding: 1rem 1.25rem;
  font-weight: 600;
}

/* CTA statement — short closing question + button, e.g.
   "Máte zájem o školení na míru?" / "Kontaktovat nás". */
.sorted-cta-statement { padding: var(--sorted-space-section) var(--sorted-container-pad); text-align: center; }
.sorted-cta-statement__inner { max-width: 40rem; margin: 0 auto; }
.sorted-cta-statement__heading {
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h2);
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--sorted-ink);
  margin: 0 0 1rem;
}
.sorted-cta-statement__body { font-size: var(--sorted-fs-lg); color: var(--sorted-ink-soft); margin: 0 0 1.75rem; }
.sorted-cta-statement__body:last-of-type { margin-bottom: 1.75rem; }

/* Accent band — solid color background, button inverts to stay legible. */
.sorted-cta-statement--accent { background: var(--sorted-accent); }
.sorted-cta-statement--accent .sorted-cta-statement__heading,
.sorted-cta-statement--accent .sorted-cta-statement__body { color: #fff; }
.sorted-cta-statement--accent .sorted-cta-statement__btn { background: #fff; color: var(--sorted-accent); }
.sorted-cta-statement--accent .sorted-cta-statement__btn:hover { background: var(--sorted-ink); color: #fff; }

/* Section heading */
.sorted-section-heading {
  text-align: center;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h2);
  line-height: 1.15;
  letter-spacing: .04em;
  color: var(--sorted-ink);
  margin: 0 0 2rem;
}

/* Text section */
.sorted-text-section { max-width: 48rem; margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-text-section:has(+ .wpcf7) { padding-bottom: 0.5rem; }
.sorted-text-section--center { text-align: center; }
.sorted-text-section__body { color: var(--sorted-ink-soft); font-size: var(--sorted-fs-lg); }
.sorted-text-section__body img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  object-position: center 20%;
  margin-bottom: 1.5rem;
}
@media (min-width: 700px) {
  .sorted-text-section__body img {
    width: 100vw;
    max-width: var(--sorted-max-width);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* Vertical timeline — hand-authored inside a text-section body, scoped to
   .sorted-timeline so it doesn't touch other markup elsewhere. Alternating
   left/right cards around a center dotted line with icon-badge markers,
   matching the site's previous (Flatsome-era) timeline design. Flows with
   the page's own scroll — no inner scrollbar. */
.sorted-timeline { position: relative; max-width: 56rem; margin: 2rem auto 0; }
.sorted-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background-image: linear-gradient(var(--sorted-border) 50%, transparent 0%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
}
.sorted-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3.5rem 1fr;
  column-gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
.sorted-timeline__item:last-child { margin-bottom: 0; }
.sorted-timeline__item--left .sorted-timeline__card { grid-column: 1; }
.sorted-timeline__item--right .sorted-timeline__card { grid-column: 3; }
.sorted-timeline__marker {
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 1;
}
.sorted-timeline__marker::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.75rem;
  background-image: linear-gradient(var(--sorted-border) 50%, transparent 0%);
  background-size: 2px 6px;
  background-repeat: repeat-y;
}
.sorted-timeline .sorted-timeline__marker img {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  padding: .5rem;
  box-sizing: border-box;
  object-fit: contain;
  border: 2px solid var(--sorted-accent);
  border-radius: 50%;
  background: var(--sorted-bg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sorted-timeline__card {
  background: var(--sorted-bg);
  margin-top: 1.75rem;
}
.sorted-timeline__year {
  background: var(--sorted-accent);
  color: #fff;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h3);
  letter-spacing: .04em;
  padding: .65rem 1.25rem;
  transition: background-color .2s ease;
}
.sorted-timeline__content { padding: 1rem 1.25rem; color: var(--sorted-ink-soft); font-size: var(--sorted-fs-lg); text-align: left; }

.sorted-timeline__item:hover .sorted-timeline__marker img {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sorted-accent) 25%, transparent);
}
.sorted-timeline__item:hover .sorted-timeline__year { background: var(--sorted-accent-deep); }

@media (max-width: 700px) {
  .sorted-timeline::before { left: 1.4rem; transform: none; }
  .sorted-timeline__item {
    grid-template-columns: 2.75rem 1fr;
    column-gap: 1rem;
  }
  .sorted-timeline__marker { grid-column: 1; margin-top: 0; }
  .sorted-timeline__item--left .sorted-timeline__card,
  .sorted-timeline__item--right .sorted-timeline__card { grid-column: 2; }
}

/* Icon columns (benefits, contact, etc.) */
.sorted-icon-columns { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-icon-columns__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  text-align: center;
}
.sorted-icon-column__icon img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--sorted-radius); margin-inline: auto; margin-bottom: 1rem; }
.sorted-icon-column__text { font-size: var(--sorted-fs-base); }
.sorted-icon-column__text a { color: var(--sorted-highlight); }

/* Category tiles — square photo cards with an overlaid title, hover zoom */
.sorted-category-tiles { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-category-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .sorted-category-tiles__grid {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: calc(var(--sorted-container-pad) * -1);
  }
  #kde-cvicime .sorted-category-tiles__grid { grid-template-columns: repeat(3, 1fr); }
}
.sorted-category-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--sorted-radius);
  text-decoration: none;
  isolation: isolate;
  background: var(--sorted-bg-alt);
  transition: border-color .15s ease;
}
.sorted-category-tile:not(:has(.sorted-category-tile__img)) {
  background: var(--sorted-footer-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sorted-category-tile:not(:has(.sorted-category-tile__img)) .sorted-category-tile__label {
  position: static;
  text-align: center;
  text-shadow: none;
}
.sorted-category-tile:hover,
.sorted-category-tile:focus-visible {
  border-color: var(--sorted-highlight);
}
.sorted-category-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.sorted-category-tile:hover .sorted-category-tile__img,
.sorted-category-tile:focus-visible .sorted-category-tile__img { transform: scale(1.06); }
.sorted-category-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 45%, transparent 70%);
}
.sorted-category-tile__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  color: #fff;
  font-family: var(--sorted-font-display);
  font-size: var(--sorted-fs-xl);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  transition: color .2s ease;
}
.sorted-category-tile:hover .sorted-category-tile__label,
.sorted-category-tile:focus-visible .sorted-category-tile__label { color: var(--sorted-highlight); }

/* Feature cards (icon + title + text, rounded card, hover lift) */
.sorted-feature-cards { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-feature-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.sorted-feature-card {
  background: var(--sorted-bg);
  border-radius: var(--sorted-radius);
  padding: 1.5rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.sorted-feature-card:hover { border-color: var(--sorted-highlight); }
.sorted-feature-card__icon { width: 44px; height: 44px; border: 2px solid var(--sorted-ink); border-radius: 0; background: var(--sorted-bg-alt); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: var(--sorted-fs-xl); }
.sorted-feature-card__title { font-family: var(--sorted-font-display); font-variation-settings: 'SOFT' 100; font-weight: var(--sorted-heading-weight); font-size: var(--sorted-h3); margin: 0 0 .5rem; }
.sorted-feature-card__text { font-size: var(--sorted-fs-base); color: var(--sorted-ink-soft); margin: 0; }

/* Photo band — atmospheric full-bleed image + overlay heading */
.sorted-photo-band { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--sorted-ink); }
.sorted-photo-band--sm { min-height: 260px; }
.sorted-photo-band--md { min-height: 400px; }
.sorted-photo-band--lg { min-height: 560px; }
.sorted-photo-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sorted-photo-band__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--sorted-photo-band-overlay, .35)); }
.sorted-photo-band__content { position: relative; z-index: 1; padding: 1.5rem; max-width: 56rem; text-align: center; }
.sorted-photo-band__heading {
  color: #fff;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h1);
  line-height: 1.1;
  letter-spacing: .04em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
  margin: 0;
}

/* Logo cloud */
.sorted-logo-cloud { padding: var(--sorted-space-section) var(--sorted-container-pad); text-align: center; background: var(--sorted-bg); color: var(--sorted-ink); }
.sorted-logo-cloud--dark { background: var(--sorted-ink); color: #fff; }
.sorted-logo-cloud--dark .sorted-section-heading { color: #fff; }
.sorted-logo-cloud__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
  align-items: center;
  max-width: var(--sorted-max-width);
  margin: 0 auto;
}
.sorted-logo-cloud__item { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; }
.sorted-logo-cloud__item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s ease, opacity .2s ease; }
.sorted-logo-cloud--dark .sorted-logo-cloud__item img { filter: brightness(0) invert(1); opacity: .85; }
.sorted-logo-cloud__item:hover img { transform: scale(1.06); }
.sorted-logo-cloud--dark .sorted-logo-cloud__item:hover img { opacity: 1; }
.sorted-logo-cloud__remove { position: absolute; top: -.5rem; right: -.5rem; }

/* FAQ — full container width, generous row spacing. The actual list of
   items is .sorted-faq__list (a separate inner div — see faq/render.php),
   NOT .sorted-faq itself, so the gap has to live there. */
.sorted-faq { max-width: var(--sorted-max-width); margin: 0 auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-faq__list { display: grid; gap: 2rem; }
.sorted-faq-item {
  border-radius: var(--sorted-radius);
  background: var(--sorted-bg);
  padding: 1.25rem 1.5rem;
}
.sorted-faq-item__question {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  font-size: var(--sorted-fs-lg);
  list-style: none;
}
.sorted-faq-item__question::-webkit-details-marker { display: none; }
.sorted-faq-item__question::after { content: "+"; font-size: var(--sorted-fs-2xl); font-weight: 700; color: var(--sorted-highlight); flex-shrink: 0; }
details[open] > .sorted-faq-item__question::after { content: "\2212"; }
.sorted-faq-item[open] { border-color: var(--sorted-highlight); }
.sorted-faq-item__answer { margin-top: .75rem; color: var(--sorted-ink-soft); font-size: var(--sorted-fs-lg); }

/* Editor-only affordances */
.sorted-hero-edit,
.sorted-icon-columns-edit,
.sorted-icon-column-edit,
.sorted-faq-item-edit,
.sorted-pricing-card-edit,
.sorted-text-section-edit,
.sorted-feature-cards-edit,
.sorted-feature-card-edit,
.sorted-photo-band-edit,
.sorted-logo-cloud-edit,
.sorted-cta-statement-edit,
.sorted-quote-edit {
  outline: 1px dashed var(--sorted-border);
  outline-offset: 4px;
}
.sorted-photo-band-edit,
.sorted-hero-edit.sorted-hero--fullbleed { position: relative; overflow: hidden; }

/* Footer — full-color by default (--sorted-footer-bg), swap it per site */
.sorted-footer {
  background: var(--sorted-footer-bg);
  color: var(--sorted-footer-text);
  padding: 3rem var(--sorted-container-pad) 0;
  border-top: 1px solid color-mix(in srgb, var(--sorted-footer-text) 15%, transparent);
}
.sorted-footer__logo { display: block; font-family: var(--sorted-font-script); font-size: var(--sorted-fs-2xl); color: var(--sorted-footer-text); text-decoration: none; margin-bottom: 3rem; }
.sorted-footer__logo img { max-height: 2.5rem; width: auto; }

.sorted-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.sorted-footer__columns { display: flex; flex-wrap: wrap; gap: 3rem; }

/* Venue address + named contact — same column shape as the link columns,
   just plain text (and email/tel links) instead of a list. */
.sorted-footer__info { display: flex; flex-wrap: wrap; gap: 3rem; }
.sorted-footer__venue-line {
  margin: 0 0 .4rem;
  font-size: var(--sorted-fs-sm);
  color: color-mix(in srgb, var(--sorted-footer-text) 85%, transparent);
}
.sorted-footer__venue-line:last-child { margin-bottom: 0; }
.sorted-footer__column-title {
  font-size: var(--sorted-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sorted-footer-text);
  margin: 0 0 1rem;
}
.sorted-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sorted-footer__links a {
  color: color-mix(in srgb, var(--sorted-footer-text) 85%, transparent);
  text-decoration: underline;
  font-size: var(--sorted-fs-sm);
}
.sorted-footer__links a:hover { color: var(--sorted-footer-text); }

.sorted-footer__connect { padding-left: 2.5rem; border-left: 1px solid color-mix(in srgb, var(--sorted-footer-text) 20%, transparent); }
@media (max-width: 640px) {
  /* Once it wraps onto its own line below the columns, a left border reads
     as a stray mark rather than a divider — swap to a top border instead. */
  .sorted-footer__connect {
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--sorted-footer-text) 20%, transparent);
    width: 100%;
  }
}
.sorted-footer__connect-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.sorted-footer__connect-links a {
  color: var(--sorted-footer-text);
  text-decoration: underline;
  font-size: var(--sorted-fs-sm);
  font-weight: 600;
}
.sorted-footer__connect-links a:hover { color: var(--sorted-footer-text); }

/*
 * Payment block — bank-transfer note + QR, parked on the right of the
 * footer. Deliberately dimmed so it's always available without competing
 * with the rest of the footer; hovering it brings it to full strength and
 * scales the QR up to something you can actually scan off the screen.
 */
.sorted-footer__payment {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  max-width: 44rem;
  margin: 0 0 1.5rem auto;
  text-align: right;
  opacity: .5;
  transition: opacity .2s ease;
}
.sorted-footer__payment:hover,
.sorted-footer__payment:focus-within { opacity: 1; }

.sorted-footer__payment-note {
  margin: 0;
  font-size: var(--sorted-fs-sm);
  color: color-mix(in srgb, var(--sorted-footer-text) 85%, transparent);
}
.sorted-footer__payment-note strong { color: var(--sorted-footer-text); }

/* Small framed plate sitting in the slot to the right of the note. The
   source PNG is transparent, so the white background isn't decoration —
   without it the code is invisible on the dark footer, and unscannable. */
/* Fixed at a scannable size — it never resizes, so it can't reflow or
   overlap anything. Hover only brightens it (the block's opacity) and
   picks up an accent border. */
.sorted-footer__payment-qr {
  flex-shrink: 0;
  line-height: 0;
  box-sizing: border-box;
  width: 6.5rem;
  height: 6.5rem;
  background: #fff;
  padding: .35rem;
  border: 2px solid color-mix(in srgb, var(--sorted-footer-text) 30%, transparent);
  transition: border-color .2s ease;
}
.sorted-footer__payment-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sorted-footer__payment:hover .sorted-footer__payment-qr,
.sorted-footer__payment:focus-within .sorted-footer__payment-qr {
  border-color: var(--sorted-footer-text);
}

@media (max-width: 640px) {
  /* No hover on touch — show it at a usable size, undimmed, and centred. */
  .sorted-footer__payment {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
    opacity: 1;
  }
  .sorted-footer__payment-qr,
  .sorted-footer__payment:hover .sorted-footer__payment-qr { width: 7rem; height: 7rem; }
}

.sorted-footer__legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
/*
 * Inside the footer the contrast reference is --sorted-footer-text, not the
 * ink or the accent: the footer has its own background, and on a brand whose
 * accent is near-black these links were near-black on a near-black footer in
 * dark mode — i.e. invisible. Never colour footer content with the accent.
 */
.sorted-footer__legal-links a {
  color: color-mix(in srgb, var(--sorted-footer-text) 78%, transparent);
  text-decoration: underline;
  font-size: var(--sorted-fs-sm);
}
.sorted-footer__legal-links a:hover { color: var(--sorted-footer-text); }

/*
 * The baseline rule. It always renders — the legal line above it is never
 * empty (it falls back to the site name and the year) — so the footer always
 * reads as two divided blocks rather than text trailing off. 15% was too
 * faint to do that job on either background.
 */
.sorted-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--sorted-footer-text) 28%, transparent);
}
.sorted-footer__meta { font-size: var(--sorted-fs-sm); color: color-mix(in srgb, var(--sorted-footer-text) 70%, transparent); margin: 0; }
.sorted-footer__meta a { color: var(--sorted-footer-text); text-decoration: underline; }
.sorted-footer__to-top {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--sorted-footer-text) 25%, transparent);
  background: var(--sorted-footer-bg);
  color: var(--sorted-footer-text);
  text-decoration: none;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.sorted-footer__to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sorted-footer__to-top:hover { background: var(--sorted-footer-text); color: var(--sorted-footer-bg); }

/* ==========================================================================
   Interaktif section blocks — brand-neutral base (token-driven).
   The interaktif-specific skin (colours, floating nav, glass, bento ratios)
   lives in assets/css/brand-interaktif.css.
   ========================================================================== */

.sorted-btn--solid { background: var(--sorted-accent); color: #fff; }
.sorted-btn--solid:hover { background: var(--sorted-accent-deep); }

.sorted-block-placeholder {
  font-size: var(--sorted-fs-sm);
  color: var(--sorted-ink-soft);
  border: 1px dashed var(--sorted-border);
  border-radius: var(--sorted-radius);
  padding: 1rem;
  margin: 0;
}

/* --- Hero: letter layout --------------------------------------------------- */
.sorted-hero--letter {
  max-width: var(--sorted-max-width);
  margin-inline: auto;
  padding: var(--sorted-space-section) var(--sorted-container-pad);
}
.sorted-hero__letter { max-width: 42rem; }
.sorted-hero__letter .sorted-hero__heading { margin: 0 0 1.5rem; }
.sorted-hero__letter-body { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.sorted-hero__letter-body .sorted-hero__body { max-width: 52ch; }
.sorted-eyebrow--plain {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  color: var(--sorted-ink-soft);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--sorted-fs-xs);
  margin-bottom: 1rem;
}

/* --- Process cards ------------------------------------------------------- */
.sorted-process-cards { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-process-cards__grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.sorted-process-card {
  flex: 1 1 240px;
  border-radius: 16px;
  padding: 1.75rem 1.6rem;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  background: var(--sorted-bg-alt);
  color: var(--sorted-ink);
}
.sorted-process-card__word { font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: .95; }
.sorted-process-card__body { font-size: var(--sorted-fs-sm); line-height: 1.5; margin: 1rem 0 0; opacity: .8; }
/* Numbered step variant: a small "Krok 1" label above the title. The title
   drops from the huge single-word scale to heading scale, so the step number
   reads as the marker and the title as a heading — see process-card/render.php. */
/* align-self, not just display: the card is a flex column, so the default
   align-items: stretch makes this full-width whatever its display is — which
   turned the sport skin's pill into a full-width bar. Keep it hugging its
   text in every skin. */
.sorted-process-card__label {
  display: block;
  align-self: flex-start;
  max-width: 100%;
  font-size: var(--sorted-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
  margin-bottom: .75rem;
}
.sorted-process-card--step .sorted-process-card__word { font-size: var(--sorted-fs-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
@media (max-width: 560px) { .sorted-process-card { flex-basis: 100%; min-height: 0; } }

/* --- Capabilities ------------------------------------------------------- */
.sorted-capabilities { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-capabilities__intro { font-size: var(--sorted-fs-base); color: var(--sorted-ink-soft); margin: -0.5rem 0 2.5rem; max-width: 46ch; }
.sorted-capabilities__grid { display: flex; flex-wrap: wrap; gap: 2rem; }
.sorted-capability { flex: 1 1 calc(25% - 1.5rem); min-width: 220px; }
.sorted-capability__title { font-size: var(--sorted-fs-lg); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .75rem; }
.sorted-capability__body { font-size: var(--sorted-fs-sm); color: var(--sorted-ink-soft); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .sorted-capability { flex-basis: calc(50% - 1rem); } }
@media (max-width: 560px) { .sorted-capability { flex-basis: 100%; } }

/* --- CTA statement ----------------------------------------------------- */
.sorted-cta-statement { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-cta-statement__heading { font-size: var(--sorted-h1); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 1.25rem; }
.sorted-cta-statement__body { font-size: var(--sorted-fs-lg); color: var(--sorted-ink-soft); margin: 0 0 1.75rem; max-width: 44ch; }
.sorted-cta-statement--has-form .sorted-cta-statement__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 820px) {
  .sorted-cta-statement--has-form .sorted-cta-statement__inner { grid-template-columns: 1fr 1fr; }
}

/* --- Partner logos ---------------------------------------------------- */
.sorted-partner-logos { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-partner-logos__label { font-size: var(--sorted-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--sorted-ink-soft); margin: 0 0 1.5rem; }
.sorted-partner-logos__grid { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sorted-partner-logos__item { display: inline-flex; align-items: center; }
.sorted-partner-logos__img { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.sorted-partner-logos--cards .sorted-partner-logos__item {
  background: var(--sorted-bg);
  border: 1.5px solid var(--sorted-border);
  border-radius: 10px;
  padding: 14px 22px;
}
.sorted-partner-logos--muted { text-align: center; }
.sorted-partner-logos--muted .sorted-partner-logos__grid { gap: 2rem; justify-content: center; }
.sorted-partner-logos--muted .sorted-partner-logos__img { opacity: .55; filter: grayscale(1); }
/* Dual logo (explicit light + dark file): stack + opacity-swap by theme,
   same mechanism as the site logo (sorted_render_logo). */
.sorted-partner-logos__item--dual { position: relative; display: inline-grid; }
.sorted-partner-logos__item--dual .sorted-partner-logos__img { grid-area: 1 / 1; }
.sorted-partner-logos__img--dark { opacity: 0; }
:root[data-theme="dark"] .sorted-partner-logos__img--light { opacity: 0; }
:root[data-theme="dark"] .sorted-partner-logos__img--dark { opacity: 1; }

/* --- Testimonials --------------------------------------------------- */
.sorted-testimonials { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-testimonials__eyebrow { font-size: var(--sorted-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--sorted-ink-soft); margin: 0 0 2.5rem; }
.sorted-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
.sorted-testimonials__quote { font-size: var(--sorted-fs-lg); line-height: 1.5; letter-spacing: -0.01em; margin: 0; border-left: var(--sorted-border-width) solid var(--sorted-highlight); padding-left: 2rem; }
.sorted-testimonials__author { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding-left: 2rem; }
.sorted-testimonials__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sorted-testimonials__meta { display: flex; flex-direction: column; }
.sorted-testimonials__name { font-size: var(--sorted-fs-sm); font-weight: 600; }
.sorted-testimonials__role { font-size: var(--sorted-fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--sorted-ink-soft); }

/* --- Landing hero -------------------------------------------------- */
.sorted-landing-hero { padding: 4rem var(--sorted-container-pad) 6rem; text-align: center; position: relative; background-size: cover; background-position: center; }
.sorted-landing-hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--sorted-bg) 55%, transparent), var(--sorted-bg)); }
.sorted-landing-hero__inner { position: relative; max-width: 60rem; margin-inline: auto; }
.sorted-landing-hero__heading { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.04em; margin: 0 auto; max-width: 22ch; }
.sorted-landing-hero__sub { font-size: var(--sorted-fs-lg); color: var(--sorted-ink-soft); line-height: 1.5; margin: 1.5rem auto 2.5rem; max-width: 46rem; }
.sorted-landing-hero__disclaimer { font-size: var(--sorted-fs-xs); color: var(--sorted-ink-soft); margin-top: .75rem; }

/* --- Email capture ----------------------------------------------- */
.sorted-email-capture { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-email-capture--center { text-align: center; }
.sorted-email-capture__inner { max-width: 46rem; margin-inline: auto; }
.sorted-email-capture--left .sorted-email-capture__inner { margin-inline: 0; }
.sorted-email-capture__heading { font-size: var(--sorted-h2); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 1rem; }
.sorted-email-capture__body { color: var(--sorted-ink-soft); font-size: var(--sorted-fs-lg); line-height: 1.6; margin-bottom: 2rem; }

/* --- Bento grid ------------------------------------------------- */
.sorted-bento { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-bento__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sorted-bento__item { position: relative; border-radius: 12px; overflow: hidden; background: var(--sorted-bg-alt); grid-column: span 2; aspect-ratio: 1; }
.sorted-bento__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sorted-bento__item--box  { grid-column: span 2; aspect-ratio: 1; }
.sorted-bento__item--wide  { grid-column: span 4; aspect-ratio: 16 / 9; }
.sorted-bento__item--tall  { grid-column: span 2; aspect-ratio: 3 / 4; }
.sorted-bento__item--big   { grid-column: span 3; aspect-ratio: 4 / 3; }
.sorted-bento__title {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 2.25rem 1rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  color: #fff; font-size: var(--sorted-fs-sm); font-weight: 600;
}
@media (max-width: 860px) {
  .sorted-bento__grid { grid-template-columns: repeat(2, 1fr); }
  .sorted-bento__item, .sorted-bento__item--box, .sorted-bento__item--wide,
  .sorted-bento__item--tall, .sorted-bento__item--big { grid-column: span 1; aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .sorted-bento__grid { grid-template-columns: 1fr; }
}

/* --- Bare landing template chrome ------------------------------- */
.sorted-landing-header { padding: 1.5rem 0; }
.sorted-landing-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sorted-landing-header__phone { color: inherit; text-decoration: none; font-weight: 500; }
.sorted-landing-header__phone:hover { opacity: .7; }

/* Per-page jump links + controls. The nav is centred between the logo and the
   controls on wide screens and drops below both when there is no room. */
.sorted-landing-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  flex: 1 1 auto;
}
.sorted-landing-header__nav a {
  color: inherit;
  text-decoration: none;
  font-size: var(--sorted-fs-sm);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.sorted-landing-header__nav a:hover { border-bottom-color: currentColor; }
.sorted-landing-header__end { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

@media (max-width: 860px) {
  .sorted-landing-header__inner { flex-wrap: wrap; }
  /* Logo and controls stay on the first row; the links take the second. */
  .sorted-landing-header__nav { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 1rem; }
}
/* When the hero carries a background image, the header belongs ON it — that's
   how both landing designs are drawn. Without this the header sits in flow
   above the hero on a bare band of page background, which reads as a broken
   strip above the photo. Scoped with :has() so a hero with no image keeps the
   header in normal flow instead of having it overlap the headline. */
body.sorted-landing-bare:has(.sorted-landing-hero--image) .sorted-landing-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
/* Landing footer: brand block, then as many detail groups as the brand
   config actually supplies. Deliberately no nav — see the template. */
.sorted-landing-footer { border-top: 1px solid var(--sorted-border); padding: 3.5rem 0 2rem; }
.sorted-landing-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.5rem;
  align-items: start;
}
.sorted-landing-footer__brand .sorted-logo-link,
.sorted-landing-footer__brand img { max-height: 2.2rem; width: auto; }
.sorted-landing-footer__tagline {
  font-size: var(--sorted-fs-sm);
  color: var(--sorted-ink-soft);
  margin: 1rem 0 0;
  max-width: 30ch;
}
.sorted-landing-footer__label {
  font-size: var(--sorted-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sorted-ink-soft);
  font-weight: 500;
  margin: 0 0 .75rem;
}
.sorted-landing-footer__address { font-size: var(--sorted-fs-sm); color: var(--sorted-ink-soft); line-height: 1.7; margin: 0; }
.sorted-landing-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sorted-landing-footer__contact a {
  font-size: var(--sorted-fs-sm);
  color: var(--sorted-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sorted-border);
}
.sorted-landing-footer__contact a:hover { border-bottom-color: var(--sorted-ink); }
.sorted-landing-footer__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; }
.sorted-landing-footer__socials a { color: var(--sorted-ink-soft); display: block; width: 1.25rem; }
.sorted-landing-footer__socials a:hover { color: var(--sorted-ink); }
.sorted-landing-footer__socials svg { width: 100%; height: auto; display: block; }

.sorted-landing-footer__baseline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sorted-border);
}
.sorted-landing-footer__legal { font-size: var(--sorted-fs-sm); color: var(--sorted-ink-soft); margin: 0; }
.sorted-landing-footer__legal a { color: inherit; }

@media (max-width: 860px) {
  .sorted-landing-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sorted-landing-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Editor affordances for the new blocks */
.sorted-process-cards-edit, .sorted-process-card-edit,
.sorted-capabilities-edit, .sorted-capability-edit,
.sorted-cta-statement-edit, .sorted-partner-logos-edit,
.sorted-testimonials-edit, .sorted-landing-hero-edit,
.sorted-email-capture-edit, .sorted-bento-edit, .sorted-bento-item-edit {
  outline: 1px dashed var(--sorted-border);
  outline-offset: 4px;
}

/* The base CTA statement above is a centered, narrow band (Kali's shape).
   The Interaktif section blocks want it left-aligned and full container
   width so the optional CF7 form can sit beside the text — reset those two
   properties here, but keep the accent-band variant centered, since a solid
   colour band reads better symmetrical. */
.sorted-cta-statement { text-align: left; }
.sorted-cta-statement__inner { max-width: none; margin: 0; }
.sorted-cta-statement--accent { text-align: center; }
.sorted-cta-statement--accent .sorted-cta-statement__inner { max-width: 40rem; margin: 0 auto; }

/* Quote variant — a rule down the left edge instead of a background band. */
.sorted-cta-statement--quote .sorted-cta-statement__lede {
  border-left: var(--sorted-border-width) solid var(--sorted-highlight);
  padding-left: 2rem;
}

/* --- Case cards -----------------------------------------------------------
   A work sample: screenshot on top, client quote below. Used on the landing
   pages where portfolio and testimonial are the same card. The empty variant
   keeps the frame's height so a page still lays out correctly before the
   screenshots exist. */
.sorted-case-cards { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-case-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.sorted-case-card { margin: 0; display: flex; flex-direction: column; }
.sorted-case-card__shot { border-radius: 12px; overflow: hidden; background: var(--sorted-bg-alt); aspect-ratio: 16 / 10; }
.sorted-case-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sorted-case-card__shot--empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--sorted-border);
  color: var(--sorted-ink-soft); font-size: var(--sorted-fs-sm); text-align: center; padding: 1rem;
}
.sorted-case-card__quote { font-size: var(--sorted-fs-base); line-height: 1.55; margin: 1.5rem 0 0; }
.sorted-case-card__meta { display: flex; flex-direction: column; margin-top: 1rem; }
.sorted-case-card__name { font-size: var(--sorted-fs-sm); font-weight: 600; }
.sorted-case-card__role { font-size: var(--sorted-fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--sorted-ink-soft); }
.sorted-case-cards-edit, .sorted-case-card-edit { outline: 1px dashed var(--sorted-border); outline-offset: 4px; }


/* ==========================================================================
   SECTION TONES — primary / secondary / tertiary
   --------------------------------------------------------------------------
   A tone re-scopes the colour TOKENS on a section's own element. Every block
   below reads those tokens and never hardcodes a colour, so nothing in here
   targets a block by name (the two width exceptions at the bottom aside).
   Keep it that way: a new block gets tones for free.
   ========================================================================== */

/*
 * Snapshots of the root palette. A tone has to swap --sorted-bg for
 * --sorted-ink and vice versa; referring to a property the same rule is
 * redefining is a custom-property cycle and resolves to nothing, so the
 * original values are captured here first, at :root, where nothing is being
 * overridden. These pick up the brand palette correctly because the wp_head
 * injector writes its :root block to the same element.
 */
:root {
  --sorted-tone-base-bg:  var(--sorted-bg);
  --sorted-tone-base-ink: var(--sorted-ink);
  --sorted-tone-alt-bg:   var(--sorted-bg-alt);
}

.sorted-tone--secondary,
.sorted-tone--tertiary {
  background: var(--sorted-bg);
  color: var(--sorted-ink);
}

/* The alternating band. Cards inside flip to plain paper so they still read
   as raised against it. */
.sorted-tone--secondary {
  --sorted-bg: var(--sorted-tone-alt-bg);
  --sorted-bg-alt: var(--sorted-tone-base-bg);
}

/*
 * Inverted. --sorted-border is derived from --sorted-ink at :root, but a
 * custom property computes where it is DECLARED — redefining --sorted-ink
 * here does not retroactively update it, so it is restated explicitly.
 * Same reason --sorted-ink-soft is spelled out rather than inherited.
 */
.sorted-tone--tertiary {
  --sorted-bg: var(--sorted-tone-base-ink);
  --sorted-bg-alt: color-mix(in srgb, var(--sorted-tone-base-ink) 92%, var(--sorted-tone-base-bg));
  --sorted-ink: var(--sorted-tone-base-bg);
  --sorted-ink-soft: color-mix(in srgb, var(--sorted-tone-base-bg) 62%, var(--sorted-tone-base-ink));
  --sorted-border: color-mix(in srgb, var(--sorted-tone-base-bg) 22%, transparent);
}

/*
 * Most section blocks are already full-width and pad themselves, so the tone
 * paints edge to edge. These two constrain their own outer element, which
 * would paint the band as a 1240px box instead — move the constraint inward
 * for toned instances only.
 */
.sorted-tone--secondary.sorted-cta-statement,
.sorted-tone--tertiary.sorted-cta-statement,
.sorted-tone--secondary.sorted-pricing-cards,
.sorted-tone--tertiary.sorted-pricing-cards {
  max-width: none;
}
.sorted-tone--secondary.sorted-cta-statement .sorted-cta-statement__inner,
.sorted-tone--tertiary.sorted-cta-statement .sorted-cta-statement__inner {
  max-width: var(--sorted-max-width);
  margin-inline: auto;
}

/* ==========================================================================
   BUTTONS — the third weight
   .sorted-btn (outline) and .sorted-btn--solid (filled) live in the brand
   stylesheet, which loads AFTER this file; a bare .sorted-btn--link here
   would lose the cascade to its single-class .sorted-btn rule. Hence the
   doubled selector.
   ========================================================================== */
.sorted-btn.sorted-btn--link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sorted-border);
  border-radius: 0;
  padding: 0 0 .35rem;
  color: var(--sorted-ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.sorted-btn.sorted-btn--link::after {
  content: "\2192";
  transition: transform .15s ease;
}
.sorted-btn.sorted-btn--link:hover {
  background: none;
  color: var(--sorted-highlight);
  border-bottom-color: var(--sorted-highlight);
}
.sorted-btn.sorted-btn--link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   QUOTE — a one-off pull quote, edited inline (sorted/testimonials is the
   post-type-backed carousel; this is the single quote you type on the page)
   ========================================================================== */
.sorted-quote { padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-quote__inner { max-width: var(--sorted-max-width); margin-inline: auto; }
.sorted-quote__text {
  font-family: var(--sorted-font-display);
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-fs-2xl);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 2rem;
}
@media (min-width: 800px) {
  .sorted-quote__text { font-size: var(--sorted-fs-4xl); }
}
.sorted-quote__attribution { display: flex; align-items: center; gap: 1rem; }
.sorted-quote__portrait {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--sorted-radius-pill);
  object-fit: cover;
  flex: none;
}
.sorted-quote__name { font-weight: 500; }
.sorted-quote__role { color: var(--sorted-ink-soft); font-size: var(--sorted-fs-sm); }

.sorted-quote--center .sorted-quote__inner { max-width: 48rem; text-align: center; }
.sorted-quote--center .sorted-quote__attribution { justify-content: center; }

.sorted-quote--rule .sorted-quote__inner {
  border-left: var(--sorted-border-width) solid var(--sorted-highlight);
  padding-left: 2rem;
  max-width: 52rem;
}

/* ==========================================================================
   CONTACT / CTA — where the form sits relative to the text
   The 1fr 1fr split above 820px is the default (--form-split). These two
   override it, and need the doubled selector to outrank it.
   ========================================================================== */
.sorted-cta-statement--form-stacked.sorted-cta-statement--has-form .sorted-cta-statement__inner,
.sorted-cta-statement--form-centered.sorted-cta-statement--has-form .sorted-cta-statement__inner {
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.sorted-cta-statement--form-stacked.sorted-cta-statement--has-form .sorted-cta-statement__heading {
  max-width: 22ch;
}
/* Two thirds of the container. It still starts on the container's left edge,
   so it lines up with the heading and every other section — it just stops
   short of the full width rather than running the whole band. Full width
   below the breakpoint, where two thirds would leave the fields too narrow
   to type in. The centred variant further down stays narrow on purpose. */
.sorted-cta-statement--form-stacked .sorted-cta-statement__form { width: 100%; max-width: none; }
@media (min-width: 900px) {
  .sorted-cta-statement--form-stacked .sorted-cta-statement__form { max-width: 66.667%; }
}

.sorted-cta-statement--form-centered.sorted-cta-statement--has-form .sorted-cta-statement__inner {
  justify-items: center;
  text-align: center;
}
.sorted-cta-statement--form-centered.sorted-cta-statement--has-form .sorted-cta-statement__heading,
.sorted-cta-statement--form-centered .sorted-cta-statement__body {
  max-width: 30ch;
  margin-inline: auto;
}
.sorted-cta-statement--form-centered .sorted-cta-statement__form { width: 100%; max-width: 34rem; }