/* 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;

  /*
   * Shape tokens used by the blocks ported from the Sorted base (gallery,
   * contact form, pricing tiers…). Neo-brutalist defaults: one radius, no
   * soft shadow. The brutalist skin turns the hard offset shadow on; a soft
   * skin can set real shadows here without touching any block CSS.
   */
  --sorted-radius-sm: var(--sorted-radius);
  --sorted-radius-lg: var(--sorted-radius);
  --sorted-shadow: none;
  --sorted-shadow-lg: none;
  --sorted-tracking-tight: -0.02em;
  --sorted-leading-tight: 1.1;

  /* 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;
  --sorted-fs-7xl: 4.5rem;

  /*
   * Semantic aliases — mobile-first; they step up at 768px and 1024px below.
   * Headings: Onest is a normal-width sans, so h1 tops out at 7xl (72px) and
   * h2 at 5xl (48px) — the sizes interaktif.space's .hero-title / .sec-title
   * reached with clamp(), now as fixed steps.
   */
  --sorted-h1: var(--sorted-fs-4xl);
  --sorted-h2: var(--sorted-fs-3xl);
  --sorted-h3: var(--sorted-fs-xl);

  /*
   * Reading text — FOUR sizes for the whole site, and nothing in between:
   *   --sorted-lead       the intro under a heading, hero text, CTA copy
   *   --sorted-text       running text in sections
   *   --sorted-text-card  text inside cards, tiles and columns (narrower)
   *   --sorted-fs-sm      meta, legal, small buttons
   * Lead and text are the SAME size on purpose: one size for every reading
   * line site-wide, so no section reads louder than the next; only headings
   * step up. 18px on phones (the largest that still fits ~40 characters on
   * a 390px screen), 20px from 768px.
   */
  --sorted-text: var(--sorted-fs-lg);
  --sorted-lead: var(--sorted-text);
  --sorted-text-card: var(--sorted-fs-base);
  /* "Large text" — a short message set big (pull quote, text section with
     the Large toggle). Well clear of running text, under the h2. */
  --sorted-text-large: var(--sorted-fs-2xl);
  /* Statement block: a step above running text, always under the h2. */
  --sorted-text-statement: var(--sorted-fs-xl);

  /* Leading: display type (headings, card titles) tight; reading text 1.5. */
  --sorted-lh-display: 1.08;
  --sorted-lh-text: 1.5;

  /* Section rhythm, mobile-first */
  --sorted-space-section: 2.5rem;
  --sorted-container-pad: 1.25rem;
  /* The container's CONTENT width — max-width minus the gutters. Use it for
     an inner wrapper (grid, inner box) inside a section that already has
     the side padding; capping that wrapper at the full 1240px put its left
     edge one gutter further left than every other block. */
  --sorted-content-width: calc(var(--sorted-max-width) - 2 * var(--sorted-container-pad));
  /* Reading measure: running text never runs wider than ~65 characters a
     line (the 60–75ch rule). ch scales with each element's own font-size,
     so it holds for body and lead text alike. Wide things — tables, images,
     card grids, forms — are not text and keep the full container width. */
  --sorted-measure: 65ch;

  /* 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;
}

/* Tablet: text steps up ahead of the headings. */
@media (min-width: 768px) {
  :root {
    --sorted-h1: var(--sorted-fs-5xl);
    --sorted-h2: var(--sorted-fs-4xl);
    --sorted-text: var(--sorted-fs-xl);
    /* One step under running text, so cards don't read as fine print. */
    --sorted-text-card: var(--sorted-fs-lg);
    --sorted-text-large: var(--sorted-fs-3xl);
    --sorted-text-statement: var(--sorted-fs-2xl);
  }
}

/* Desktop: headings go up, text stays at 20px (interaktif's density). */
@media (min-width: 1024px) {
  :root {
    --sorted-h1: var(--sorted-fs-7xl);
    --sorted-h2: var(--sorted-fs-5xl);
    --sorted-h3: var(--sorted-fs-2xl);
    --sorted-text-large: var(--sorted-fs-4xl);
    --sorted-text-statement: var(--sorted-fs-3xl);
    --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); }
/* Phone shown next to the CTA (site.md header_phone). */
.sorted-header__tel { display: inline-flex; align-items: center; gap: .45rem; color: var(--sorted-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sorted-header__tel:hover { color: var(--sorted-highlight); }
.sorted-header__tel .sorted-icon { flex-shrink: 0; }
.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: var(--sorted-lh-display);
  letter-spacing: .04em;
  color: var(--sorted-ink);
}
/* The eyebrow badge sits on the container's left edge, over the headline. */
.sorted-hero__eyebrow { max-width: var(--sorted-max-width); margin: 0 auto 1rem; }
/* Two columns from 1024px — see "TWO COLUMNS" below; single column before. */
.sorted-hero__grid {
  max-width: var(--sorted-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.sorted-hero__body { font-size: var(--sorted-lead); line-height: var(--sorted-lh-text); color: var(--sorted-ink); max-width: var(--sorted-measure); }
.sorted-hero__features { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.65rem; font-size: var(--sorted-text-card); }
.sorted-hero__features li::before { content: "✓ "; color: var(--sorted-highlight); font-weight: 700; }
/* min(): a bare 26rem overrode the global img max-width: 100% and, on phones
   narrower than ~460px, pushed the whole single-column grid off-screen. */
.sorted-hero__image img { border-radius: var(--sorted-radius); margin-inline: auto; max-width: min(26rem, 100%); }
.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: flex-start;
  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); }
/* Left-aligned on the same container as every other section: the text hangs
   from the container's left edge, not the middle of the photo. */
.sorted-hero__overlay-content { position: relative; z-index: 1; width: 100%; max-width: var(--sorted-content-width); margin-inline: auto; text-align: left; color: #fff; }
.sorted-hero__overlay-content .sorted-hero__heading--light { margin: 0 0 1rem; max-width: 18ch; }
.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); }
.sorted-hero__features--light { color: #fff; }
.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;
}
.sorted-media-text__content .sorted-section-heading { margin-bottom: 1rem; }
.sorted-media-text__content h1.sorted-section-heading { font-size: var(--sorted-h1); letter-spacing: .005em; }
.sorted-media-text__body { font-size: var(--sorted-text); line-height: var(--sorted-lh-text); color: var(--sorted-ink); max-width: var(--sorted-measure); }
.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); }
.sorted-cta-statement__inner { max-width: var(--sorted-max-width); 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: var(--sorted-lh-display);
  letter-spacing: .04em;
  color: var(--sorted-ink);
  margin: 0 0 1rem;
}
.sorted-cta-statement__body { font-size: var(--sorted-lead); line-height: var(--sorted-lh-text); color: var(--sorted-ink); margin: 0 0 1.75rem; max-width: var(--sorted-measure); }
.sorted-cta-statement__body:last-of-type { margin-bottom: 1.75rem; }

/* Accent band — solid color background, button inverts to stay legible.
   Left-aligned like every other band; the inner keeps the container. */
.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 — left-aligned, h2 token. Centre only where a block opts
   in with its "Heading alignment" control (adds --center). */
.sorted-section-heading {
  text-align: left;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h2);
  line-height: var(--sorted-lh-display);
  letter-spacing: .04em;
  color: var(--sorted-ink);
  margin: 0 0 2.5rem;
  text-wrap: balance;
}
.sorted-section-heading--center { text-align: center; }

/*
 * Optional sub-headline under a section heading. One shared class rather
 * than a per-block one, so any section block that grows an intro gets the
 * same treatment — it always sits directly after .sorted-section-heading.
 * Capped at the reading measure so a line is readable back to the next.
 */
.sorted-section-heading:has(+ .sorted-section-intro) { margin-bottom: 1rem; }
.sorted-section-intro {
  max-width: var(--sorted-measure);
  margin: 0 0 2.5rem;
  font-size: var(--sorted-lead);
  line-height: var(--sorted-lh-text);
  color: var(--sorted-ink);
}

/* Text section — full container, text capped at the reading measure.
   "Heading on the left" (--side) puts the heading in a left column from
   1024px, see "TWO COLUMNS" below. --center is the opt-in exception. */
.sorted-text-section { max-width: var(--sorted-max-width); 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--center .sorted-text-section__body { margin-inline: auto; }
.sorted-text-section__body { color: var(--sorted-ink); font-size: var(--sorted-text); line-height: var(--sorted-lh-text); max-width: var(--sorted-measure); }
.sorted-text-section__body > :first-child { margin-top: 0; }
.sorted-text-section__body > :last-child { margin-bottom: 0; }
/* "Large text": a short statement set big (opt-in per block, never inferred). */
.sorted-text-section--large .sorted-text-section__body { font-size: var(--sorted-text-large); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; }
.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.) */
/* Width on __inner, not the section, so a tone/background paints full-bleed. */
.sorted-icon-columns { padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-icon-columns__inner { max-width: var(--sorted-content-width); margin-inline: auto; }
.sorted-icon-columns__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 2rem;
}
.sorted-icon-column__icon img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--sorted-radius); margin-bottom: 1rem; }
.sorted-icon-column__text { font-size: var(--sorted-text-card); line-height: var(--sorted-lh-text); }
.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(min(240px, 100%), 1fr)); gap: 1.25rem; }
.sorted-feature-cards__grid > *, .sorted-icon-columns__grid > * { min-width: 0; }
.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__icon--svg .sorted-icon { width: 24px; height: 24px; }
.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); line-height: var(--sorted-lh-display); margin: 0 0 .5rem; }
.sorted-feature-card__text { font-size: var(--sorted-text-card); line-height: var(--sorted-lh-text); color: var(--sorted-ink-soft); margin: 0; }

/* Photo band — atmospheric full-bleed image + overlay heading */
.sorted-photo-band { position: relative; overflow: hidden; display: grid; align-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)); }
/* Heading hangs from the container's left edge, like every section. */
.sorted-photo-band__content { position: relative; z-index: 1; width: 100%; max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-photo-band__heading {
  color: #fff;
  max-width: 18ch;
  font-family: var(--sorted-font-display);
  font-variation-settings: 'SOFT' 100;
  font-weight: var(--sorted-heading-weight);
  font-size: var(--sorted-h1);
  line-height: var(--sorted-lh-display);
  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); background: var(--sorted-bg); color: var(--sorted-ink); }
.sorted-logo-cloud > .sorted-section-heading { max-width: var(--sorted-max-width); margin-inline: auto; }
.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__img--single { 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 .sorted-logo-cloud__img--single { 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,
.sorted-page-header-edit,
.sorted-gallery-wall-edit,
.sorted-masonry-gallery-edit,
.sorted-video-gallery-edit,
.sorted-info-table-edit,
.sorted-contact-form-edit,
.sorted-artwork-grid-edit,
.sorted-hero-carousel-edit,
.sorted-exhibitions-edit,
.sorted-artist-bio-edit,
.sorted-section-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/skins/interaktif/skin.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);
}
/* Optional icon (process-card `icon`): label left, icon right on one row. */
.sorted-process-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.sorted-process-card__top .sorted-process-card__label { margin-bottom: 0; }
.sorted-process-card__icon { flex-shrink: 0; line-height: 0; }
.sorted-process-card__icon .sorted-icon { width: 22px; height: 22px; }
.sorted-process-card__word { font-size: var(--sorted-text-large); font-weight: 700; letter-spacing: -0.03em; line-height: .95; }
.sorted-process-card__body { font-size: var(--sorted-text-card); line-height: var(--sorted-lh-text); 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-h3); font-weight: 700; letter-spacing: -0.01em; line-height: var(--sorted-lh-display); }
@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-lead); line-height: var(--sorted-lh-text); color: var(--sorted-ink); margin: -1.5rem 0 2.5rem; max-width: var(--sorted-measure); }
.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-h3); line-height: var(--sorted-lh-display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .75rem; }
.sorted-capability__body { font-size: var(--sorted-text-card); color: var(--sorted-ink-soft); line-height: var(--sorted-lh-text); 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); }
/* Closing statement reads at section-heading scale — not h1. */
.sorted-cta-statement__heading { font-size: var(--sorted-h2); font-weight: 400; line-height: var(--sorted-lh-display); letter-spacing: -0.035em; margin: 0 0 1.25rem; max-width: 22ch; text-wrap: balance; }
.sorted-cta-statement__body { font-size: var(--sorted-lead); line-height: var(--sorted-lh-text); color: var(--sorted-ink); margin: 0 0 1.75rem; max-width: var(--sorted-measure); }
/* With a form: stacked until 1024px, then the shared two-column split. */
.sorted-cta-statement--has-form .sorted-cta-statement__inner { display: grid; gap: 3rem; }

/* --- 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 .sorted-partner-logos__grid { gap: 2rem; }
.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 --------------------------------------------------- */
/* Centred eyebrow + heading over a masonry of quote cards. The masonry is
   CSS columns (1 → 2 → 3), so cards keep their natural height and a short
   quote doesn't leave a hole next to a long one. break-inside keeps each
   card in one column; the grid's negative bottom margin cancels the last
   card's gap so the section padding stays even. */
.sorted-testimonials { max-width: var(--sorted-max-width); margin-inline: auto; padding: var(--sorted-space-section) var(--sorted-container-pad); }
.sorted-testimonials__header { margin: 0 0 2.5rem; }
.sorted-testimonials__eyebrow { font-size: var(--sorted-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--sorted-ink-soft); margin: 0; }
.sorted-testimonials__header .sorted-section-heading { margin: .75rem 0 0; }
.sorted-testimonials__grid { columns: 1; column-gap: 2rem; margin-bottom: -2rem; }
@media (min-width: 640px) { .sorted-testimonials__grid { columns: 2; } }
@media (min-width: 1024px) { .sorted-testimonials__grid { columns: 3; } }
.sorted-testimonials__item { break-inside: avoid; margin: 0 0 2rem; padding: 2rem; background: var(--sorted-bg-alt); border-radius: var(--sorted-radius); font-size: var(--sorted-text-card); line-height: var(--sorted-lh-text); }
.sorted-testimonials__quote { margin: 0; color: var(--sorted-ink); }
.sorted-testimonials__author { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.sorted-testimonials__avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--sorted-bg); }
.sorted-testimonials__meta { display: flex; flex-direction: column; }
.sorted-testimonials__name { font-weight: 600; color: var(--sorted-ink); }
.sorted-testimonials__role { color: var(--sorted-ink-soft); }

/* --- Landing hero -------------------------------------------------- */
/* Left-aligned on the container, like every other section: headline capped
   at ~16 characters a line, lead at the reading measure, the form under it.
   The photo (if any) fades into the page behind. */
.sorted-landing-hero { padding: 4rem var(--sorted-container-pad) 6rem; 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: var(--sorted-content-width); margin-inline: auto; }
.sorted-landing-hero__heading { font-size: var(--sorted-h1); line-height: var(--sorted-lh-display); letter-spacing: -0.04em; margin: 0; max-width: 16ch; text-wrap: balance; }
.sorted-landing-hero__sub { font-size: var(--sorted-lead); color: var(--sorted-ink); line-height: var(--sorted-lh-text); margin: 1.5rem 0 2.5rem; max-width: var(--sorted-measure); }
.sorted-landing-hero__disclaimer { font-size: var(--sorted-fs-sm); 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); }
/* Left by default; --center is the opt-in. With a form the two-column
   split applies from 1024px (see "TWO COLUMNS"). */
.sorted-email-capture--center { text-align: center; }
.sorted-email-capture--center .sorted-email-capture__inner { max-width: 46rem; margin-inline: auto; }
.sorted-email-capture__heading { font-size: var(--sorted-h2); font-weight: 400; line-height: var(--sorted-lh-display); letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 22ch; text-wrap: balance; }
.sorted-email-capture--center .sorted-email-capture__heading { margin-inline: auto; }
.sorted-email-capture__body { color: var(--sorted-ink); font-size: var(--sorted-lead); line-height: var(--sorted-lh-text); margin-bottom: 2rem; max-width: var(--sorted-measure); }
.sorted-email-capture--center .sorted-email-capture__body { margin-inline: auto; }
.sorted-email-capture__body > :first-child { margin-top: 0; }
.sorted-email-capture__body > :last-child { margin-bottom: 0; }

/* --- Bento grid ------------------------------------------------- */
/* Six-column grid with ONE fixed row height: every tile in a row is the
   same height and images crop to fill (object-fit: cover). Size only sets
   the width, so a row lines up when its spans add up to 6:
     wide (4) + box/tall (2)  ·  big (3) + big (3)  ·  box + box + box.
   Same markup in the editor (useInnerBlocksProps puts the tiles directly
   inside __grid), so the editor shows exactly this layout. */
.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); grid-auto-rows: clamp(240px, 28vw, 400px); gap: 16px; }
.sorted-bento__item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--sorted-bg-alt); grid-column: span 2; }
.sorted-bento__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sorted-bento__item--box  { grid-column: span 2; }
.sorted-bento__item--tall { grid-column: span 2; }
.sorted-bento__item--wide { grid-column: span 4; }
.sorted-bento__item--big  { grid-column: span 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); grid-auto-rows: 220px; }
  .sorted-bento__item, .sorted-bento__item--box, .sorted-bento__item--tall { grid-column: span 1; }
  .sorted-bento__item--wide, .sorted-bento__item--big { grid-column: span 2; }
}
@media (max-width: 520px) {
  .sorted-bento__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .sorted-bento__item, .sorted-bento__item--box, .sorted-bento__item--tall,
  .sorted-bento__item--wide, .sorted-bento__item--big { grid-column: span 1; }
}
/* Editor only: empty tile shows a centred "Choose image" button; no hover lift. */
.sorted-bento-item-edit.is-empty { display: grid; place-items: center; }
.sorted-bento-item-edit.is-empty .sorted-bento__title { color: var(--sorted-ink); background: none; }
.sorted-bento-edit .sorted-bento__item:hover,
.sorted-bento-edit .sorted-bento__item:hover img { transform: none; }

/* --- 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;
}

/* 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-text-card); line-height: var(--sorted-lh-text); 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;
}

/*
 * General case of the above, for every other block (incl. the ones ported
 * from the Sorted base that cap their outer <section>): the band is
 * extended sideways with a spread shadow in the band's own colour and
 * clipped top/bottom, so it paints edge to edge whatever the block's width.
 * Shadows don't affect layout, so this never causes horizontal scroll.
 */
.sorted-tone--secondary,
.sorted-tone--tertiary {
  box-shadow: 0 0 0 100vmax var(--sorted-bg);
  clip-path: inset(0 -100vmax);
}

/* ==========================================================================
   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-text-large);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 30ch;
  margin: 0 0 2rem;
}
.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
   --form-split is the default and uses the shared TWO COLUMNS rule (12-col,
   from 1024px). These two override it, with the doubled selector so they
   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: 1024px) {
  .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; }


/* ==========================================================================
   TWO COLUMNS — the ONE split every two-column section uses
   --------------------------------------------------------------------------
   Swiss 12-column grid (Müller-Brockmann), from 1024px. Below that every
   block is a single column — there is no second breakpoint to remember.
   The left part takes columns 1–5, column 6 stays empty, the right part runs
   over 7–12. Asymmetric on purpose: the white space between the two is part
   of the layout, and every section on the page shares the same two vertical
   lines — column 1 (headings, full-width content) and column 7 (the text,
   form or photo set beside a heading). Things hang from a common top line
   and are never centred vertically.

   Which element is left/right is spelled out per block below; the grid
   itself is one declaration. A new two-column block adds its selectors
   here and nothing else.
   ========================================================================== */
@media (min-width: 1024px) {
  .sorted-hero__grid,
  .sorted-media-text__grid,
  .sorted-text-section--side,
  .sorted-statement--side,
  .sorted-cta-statement--has-form.sorted-cta-statement--form-split .sorted-cta-statement__inner,
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
  }

  /* Left: columns 1–5. */
  .sorted-hero__grid > :first-child,
  .sorted-media-text__content,
  .sorted-text-section--side > .sorted-section-heading,
  .sorted-statement--side > .sorted-statement__heading,
  .sorted-cta-statement--has-form.sorted-cta-statement--form-split .sorted-cta-statement__lede,
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__heading,
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__body {
    grid-column: 1 / span 5;
  }

  /* A hero without an image: the text takes eight columns, not five — at
     h1 size five columns is seven characters a line. */
  .sorted-hero__grid > :only-child { grid-column: 1 / span 8; }

  /* Right: columns 7–12. */
  .sorted-hero__grid > :last-child:not(:first-child),
  .sorted-media-text__image,
  .sorted-text-section--side > :not(.sorted-section-heading),
  .sorted-statement--side > .sorted-statement__main,
  .sorted-cta-statement--has-form.sorted-cta-statement--form-split .sorted-cta-statement__form,
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__form {
    grid-column: 7 / -1;
  }

  /* A heading on the left spans every row of the right column, so the body
     and whatever follows it stack beside the heading, not under it. */
  .sorted-text-section--side > .sorted-section-heading,
  .sorted-statement--side > .sorted-statement__heading { grid-row: 1 / span 9; margin: 0; }
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__form { grid-row: 1 / span 2; }
  .sorted-email-capture:not(.sorted-email-capture--center):has(.sorted-email-capture__form) .sorted-email-capture__body { margin-bottom: 0; }

  /* Media + text: "image left" swaps the two columns. */
  .sorted-media-text--left .sorted-media-text__content { grid-column: 7 / -1; }
  .sorted-media-text--left .sorted-media-text__image { grid-column: 1 / span 6; }
  /* The photo is a whole number of text lines tall (24 × 30px = 720px), so
     its bottom edge falls on the text rhythm instead of wherever 4:5 lands. */
  .sorted-media-text__image img { aspect-ratio: auto; height: calc(24 * var(--sorted-lh-text) * var(--sorted-text)); object-position: center top; }

  /* In the heading-left layouts a body's own measure no longer applies —
     the six columns ARE the measure. */
  .sorted-text-section--side .sorted-text-section__body,
  .sorted-statement--side .sorted-statement__text { max-width: none; }

  /* The heading's capitals and the first line of text hang from one top
     line (baselines were level before, but at 48px vs 20px the heading stuck
     up above the text). Browsers without text-box (Firefox) start both at
     the top of the row, which is close enough. */
  .sorted-text-section--side > .sorted-section-heading,
  .sorted-text-section--side > :not(.sorted-section-heading):nth-child(2),
  .sorted-statement--side > .sorted-statement__heading,
  .sorted-statement--side .sorted-statement__text { text-box: trim-start cap alphabetic; }
}

/* ==========================================================================
   STATEMENT (blocks/statement) — the "why us" paragraph
   --------------------------------------------------------------------------
   A section heading and 2–4 sentences set a step above running text but
   below the heading: the one block whose text is the message itself (the
   studio intro under a hero, the pitch above the pricing). Heading on top by
   default; "Heading on the left" uses the shared two-column split. Bold
   words are the highlight — in this monochrome brand that means weight, not
   colour, so <strong> stays bold and the rest of the text sits a shade
   lighter to let it stand out.
   ========================================================================== */
.sorted-statement {
  max-width: var(--sorted-max-width);
  margin: 0 auto;
  padding: var(--sorted-space-section) var(--sorted-container-pad);
  display: grid;
  gap: 1.5rem;
}
.sorted-statement__heading { margin: 0; }
.sorted-statement__text {
  max-width: 34ch;
  font-size: var(--sorted-text-statement);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--sorted-ink);
  text-wrap: pretty;
}
.sorted-statement__text p { margin: 0 0 .6em; }
.sorted-statement__text p:last-child { margin-bottom: 0; }
.sorted-statement__text :is(strong, b) { font-weight: 600; color: var(--sorted-ink); }
.sorted-statement__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--sorted-border); text-underline-offset: .15em; }
.sorted-statement__text a:hover { text-decoration-color: var(--sorted-highlight); }
.sorted-statement__action { margin: 2rem 0 0; }
@media (min-width: 1024px) {
  /* Heading on top: at this size the text needs width — about two thirds of
     the container, so it reads as a block rather than a tall narrow column. */
  .sorted-statement:not(.sorted-statement--side) .sorted-statement__text { max-width: 66.667%; }
}
.sorted-statement-edit { outline: 1px dashed var(--sorted-border); outline-offset: 4px; }

/* ==========================================================================
   SCROLL REVEAL (assets/js/reveal.js)
   --------------------------------------------------------------------------
   The script tags only elements that start below the fold and adds .is-in
   as each scrolls into view; without it none of these classes exist and
   everything renders normally. Motion stays quiet to match the brand: a
   short fade-up for section content and cards, staggered inside a grid.
   No curtains, no slides — the page should feel calm, not animated.
   ========================================================================== */
:root { --sorted-ease-out: cubic-bezier(.2, .7, .2, 1); }
.sorted-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .55s var(--sorted-ease-out), transform .55s var(--sorted-ease-out);
  transition-delay: var(--sorted-reveal-delay, 0ms);
}
.sorted-reveal.is-in { opacity: 1; transform: none; }

@media print {
  .sorted-reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   From the Sorted base theme (merged 2026-11): content safety net, the
   accent header option, moon/sun toggle icons (when a site filters
   sorted_theme_toggle_icons), and the footer menu.
   ========================================================================== */

/*
 * Content safety — mobile-first guard so anything a client types or pastes
 * into a block stays inside the block's bounds: long words/URLs wrap, media
 * and tables never exceed their container, code scrolls instead of stretching
 * the page. Blocks pair this with `min-width: 0` on their grid/flex children
 * (see each block's style.css) so a track can shrink below its content.
 */

.sorted-main :where(h1, h2, h3, h4, h5, h6, p, li, a, span, summary, blockquote, figcaption, dd, dt) {
  overflow-wrap: break-word;
}

.sorted-main :where(img, svg, video, iframe, table) { max-width: 100%; }

.sorted-main :where(pre) { max-width: 100%; overflow-x: auto; }

/* Accent-color header (opt-in via the sorted_header_accent Customizer toggle /
   filter): brand background, white text, outlined CTA — like the topbar. */

.sorted-header--accent {
  background: var(--sorted-accent);
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.sorted-header--accent .sorted-header__logo,
.sorted-header--accent .sorted-header__nav a { color: #fff; }

.sorted-header--accent .sorted-header__nav a:hover { color: rgba(255, 255, 255, .8); }

.sorted-header--accent .sorted-theme-toggle {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.sorted-header--accent .sorted-header__cta {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.sorted-header--accent .sorted-header__cta:hover { background: #fff; color: var(--sorted-accent); }

.sorted-theme-toggle__icon--sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sorted-theme-toggle__icon--moon { display: none; }
  :root:not([data-theme="light"]) .sorted-theme-toggle__icon--sun { display: block; }
}

:root[data-theme="dark"] .sorted-theme-toggle__icon--moon { display: none; }

:root[data-theme="dark"] .sorted-theme-toggle__icon--sun { display: block; }

:root[data-theme="light"] .sorted-theme-toggle__icon--moon { display: block; }

:root[data-theme="light"] .sorted-theme-toggle__icon--sun { display: none; }

/* Footer nav (primary menu) */

.sorted-footer__nav .sorted-footer__menu,
.sorted-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; }

.sorted-footer__menu a { color: var(--sorted-footer-text); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: var(--sorted-fs-sm); opacity: .85; transition: opacity .15s ease; }

.sorted-footer__menu a:hover { opacity: 1; text-decoration: underline; }


/* ==========================================================================
   Accessibility + line breaking (2026-11; partly ported from sorted-kali)
   ========================================================================== */

/* Skip link: first thing a keyboard user reaches; visible only on focus. */
.sorted-skip-link {
  position: absolute; left: .75rem; top: -100px; z-index: 1000;
  padding: .6rem 1rem; background: var(--sorted-ink); color: var(--sorted-bg);
  font-weight: 600; text-decoration: none; border-radius: var(--sorted-radius-sm);
}
.sorted-skip-link:focus { top: .75rem; }

/* One visible keyboard focus ring for everything (mouse clicks don't show it). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sorted-highlight);
  outline-offset: 3px;
}

/* Headings break into even lines; paragraphs avoid a lonely last word;
   long Czech words may hyphenate on phones only. */
:is(h1, h2, h3, h4, h5, h6, .sorted-section-heading, .sorted-page-title, .sorted-cta-statement__heading,
    .sorted-photo-band__heading, .sorted-feature-card__title, .sorted-pricing-card__title, .wp-block-post-title) {
  text-wrap: balance;
}
:is(p, li, blockquote, dd, figcaption) { text-wrap: pretty; }
@media (max-width: 767px) {
  :is(.sorted-text-section__body, .sorted-page-content, .sorted-media-text__body, .sorted-faq-item__answer,
      .sorted-feature-card__text, .sorted-section-intro, .sorted-hero__body, .sorted-cta-statement__body) {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
  }
}

/* A stray empty paragraph between two sections is nothing, not a gap. */
:is(.sorted-main, .sorted-page-content) > p:empty { display: none; }

/* Respect the OS "reduce motion" setting everywhere, in every skin. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}