/* ───────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ SITE CSS — OKITOUR.JP — PREMIUM REDESIGN
   Classification : Site Stylesheet | Authoritative | Loads LAST
   Version        : 2.0.0
   File           : /sites/okitour/css/site.css
   ─────────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════
   @FONT-FACE — Single font family: DM Sans (self-hosted, no external CDN)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── DM Sans — All text ──────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/assets/fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/assets/fonts/dm-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/assets/fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */

@layer reset, base, modules, components, utilities, overrides;

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: RESET
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: BASE — Premium Design Tokens
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer base {
  :root,
  body[data-site="okitour"] {
    /* ── Colors — deeper, more premium ───────────────────────────────────── */
    --site-bg: #F5EFE4;
    --site-fg: #1B2A3D;
    --site-fg-secondary: #2D3E50;
    --site-accent: #E8651A;
    --site-accent-hover: #D45A15;
    --site-accent-light: #FFF5ED;
    --site-muted: #7A8B9C;
    --site-surface: #F7F7F7;
    --site-border: #E8E0D8;
    --site-success: #52c41a;
    --site-error: #ff4d4f;

    /* ── Section Backgrounds ─────────────────────────────────────────────── */
    --site-bg-sand: #F5EFE4;
    --site-bg-ocean: #EAF4F1;
    --site-bg-sunset: #FEF0E7;
    --site-surface-warm: #FAF7F3;

    /* ── Typography — single font family ──────────────────────────────────── */
    --site-font-heading: 'DM Sans', sans-serif;
    --site-font-body: 'DM Sans', sans-serif;
    --site-font-accent: 'DM Sans', sans-serif;
    --site-font-family: 'DM Sans', sans-serif;
    --site-font-size: 17px;
    --site-line-height: 1.7;
    --site-heading-weight: 700;
    --site-heading-line-height: 1.2;
    --letter-spacing-caps: 0.12em;

    /* ── Spacing — generous, premium breathing room ──────────────────────── */
    --site-pad: 1.5rem;
    --site-pad-lg: 3rem;
    --site-pad-sm: 0.75rem;
    --edge: 48px;
    --section-padding-y: clamp(80px, 10vw, 140px);
    --content-max-width: 1140px;
    --content-narrow: 720px;
    --card-gap: 32px;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --site-max-width: 1200px;
    --site-radius: 12px;
    --site-radius-sm: 8px;
    --button-radius: 8px;

    /* ── Shadows & Effects — subtle, layered ──────────────────────────────── */
    --shadow-card: 0 2px 8px rgba(27,42,61,0.06), 0 8px 24px rgba(27,42,61,0.04);
    --shadow-card-hover: 0 4px 12px rgba(27,42,61,0.08), 0 16px 40px rgba(27,42,61,0.06);
    --shadow-nav: 0 1px 3px rgba(27,42,61,0.08);
    --site-shadow: var(--shadow-card);
    --site-shadow-hover: var(--shadow-card-hover);
    --transition-default: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s ease;

    /* ── Module Token Overrides ───────────────────────────────────────────── */
    --ui-card-bg: #FFFFFF;
    --ui-card-bd: var(--site-border);
    --ui-card-radius: var(--site-radius);
    --ui-hero-overlay-color: rgba(10, 18, 36, 1);
    --ui-hero-overlay-opacity: 0.45;
    --ui-tour-card-accent: var(--site-accent);
    --ui-tour-card-radius: var(--site-radius);
    --ui-pricing-accent: var(--site-accent);
    --ui-pricing-border: var(--site-border);
    --ui-pricing-header-bg: var(--site-surface);
    --ui-faq-border: var(--site-border);
    --ui-faq-question-fg: var(--site-fg);
    --ui-faq-answer-fg: var(--site-muted);
    --ui-itinerary-marker-bg: var(--site-accent);
    --ui-itinerary-line-color: var(--site-border);
    --ui-contact-form-accent: var(--site-accent);
    --ui-contact-form-radius: var(--site-radius-sm);
    --social-ig-radius: var(--site-radius-sm);
    --social-fb-radius: var(--site-radius);
  }

  body[data-site="okitour"] {
    font-family: var(--site-font-body);
    font-size: var(--site-font-size);
    line-height: var(--site-line-height);
    color: var(--site-fg);
    background: var(--site-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: MODULES — Module Overrides for OkiTour
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer modules {

  /* ── Canvas ──────────────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-canvas {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  body[data-site="okitour"] .ui-layout__cell[data-area="main"] {
    flex: 1;
  }

  /* ── Sticky Header ──────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-layout__cell[data-area="header"] {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: var(--site-bg-sand);
  }

  /* ── Footer cell ────────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-layout__cell[data-area="footer"] {
    background: var(--site-fg);
  }

  /* ── Navbar — premium glassmorphism ────────────────────────────────────── */
  body[data-site="okitour"] .ui-navbar {
    --ui-navbar-bg: rgba(245, 239, 228, 0.88);
    --ui-navbar-fg: var(--site-fg);
    --ui-navbar-accent: var(--site-accent);
    --ui-navbar-height: 72px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-inline: var(--edge);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }

  body[data-site="okitour"] img.ui-navbar__logo {
    max-height: 44px;
    width: auto;
  }

  body[data-site="okitour"] .ui-navbar__link {
    font-family: var(--site-font-accent);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
    position: relative;
  }

  body[data-site="okitour"] .ui-navbar__link:hover {
    color: var(--site-accent);
  }

  body[data-site="okitour"] .ui-navbar__link--active {
    color: var(--site-accent);
    border-bottom: 2px solid var(--site-accent);
    padding-bottom: 4px;
  }

  /* ── Divider wrapper ────────────────────────────────────────────────────── */
  body[data-site="okitour"] .module-wrapper.module-ui-divider {
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: 0;
  }

  body[data-site="okitour"] .module-wrapper.module-ui-divider[data-id^="divider-hero"] {
    margin-top: -160px;
    position: relative;
    z-index: 10;
  }

  /* ── Footer — padding ──────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-section-footer {
    padding: 0;
  }

  body[data-site="okitour"] .ui-section-footer a {
    color: var(--site-accent);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  body[data-site="okitour"] .ui-section-footer a:hover {
    color: #fff;
  }

  /* ── Hero Overrides ────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-hero__content {
    padding: 4.5rem 2rem calc(3.5rem + 160px);
    max-width: 800px;
    gap: 0.5rem;
  }

  body[data-site="okitour"] .ui-hero[data-variant="compact"] {
    min-height: 50vh;
  }

  body[data-site="okitour"] .ui-hero[data-variant="compact"] .ui-hero__content {
    padding: 2.5rem 1.5rem calc(2.5rem + 160px);
  }

  body[data-site="okitour"] .ui-hero__title {
    font-family: var(--site-font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] .ui-hero__subtitle {
    font-family: var(--site-font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  /* CTA — refined rectangle, NOT pill */
  body[data-site="okitour"] .ui-hero__cta,
  body[data-site="okitour"] a.ui-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--site-accent);
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    margin-top: 1.75rem;
    box-shadow: 0 4px 16px rgba(232, 101, 26, 0.3);
  }

  /* CTA arrow */
  body[data-site="okitour"] .ui-hero__cta::after,
  body[data-site="okitour"] a.ui-hero__cta::after {
    content: '\2192';
    transition: transform var(--transition-fast);
  }

  body[data-site="okitour"] .ui-hero__cta:hover,
  body[data-site="okitour"] a.ui-hero__cta:hover {
    background: var(--site-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 101, 26, 0.4);
  }

  body[data-site="okitour"] .ui-hero__cta:hover::after,
  body[data-site="okitour"] a.ui-hero__cta:hover::after {
    transform: translateX(4px);
  }

  body[data-site="okitour"] .ui-hero__cta:active,
  body[data-site="okitour"] a.ui-hero__cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(232, 101, 26, 0.2);
  }

  /* ── Tour Cards ────────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-tour-card {
    border: none;
    border-radius: var(--site-radius);
    overflow: hidden;
    transition: box-shadow var(--transition-default), transform var(--transition-default);
    background: #fff;
    box-shadow: var(--shadow-card);
  }

  body[data-site="okitour"] .ui-tour-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] .ui-tour-card__price {
    background: var(--site-accent);
    color: #fff;
    font-family: var(--site-font-accent);
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: var(--site-radius-sm);
    font-size: 0.875rem;
  }

  body[data-site="okitour"] .ui-tour-card__cta {
    font-family: var(--site-font-accent);
    color: var(--site-accent);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body[data-site="okitour"] .ui-tour-card__cta::after {
    content: '\2192';
    transition: transform var(--transition-fast);
  }

  body[data-site="okitour"] .ui-tour-card:hover .ui-tour-card__cta::after {
    transform: translateX(4px);
  }

  body[data-site="okitour"] .ui-tour-card__cta:hover {
    color: var(--site-accent-hover);
  }

  /* ── Jednodenní Tour Cards — Premium Layout ───────────────────────────── */
  body[data-site="okitour"] #nabidka-tours .ui-tour-card__grid {
    max-width: 1080px;
    margin: 0 auto;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card {
    border: none;
    border-radius: var(--site-radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__image-wrap {
    position: relative;
    overflow: hidden;
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.08));
    pointer-events: none;
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card:hover .ui-tour-card__image {
    transform: scale(1.05);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__body {
    padding: 1.35rem 1.5rem 1.5rem;
    gap: 0.5rem;
    text-align: left;
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__name {
    font-family: var(--site-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--site-fg);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__desc {
    line-height: 1.65;
    color: var(--site-fg-secondary);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__price {
    background: var(--site-accent);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: var(--button-radius);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__cta {
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--site-accent);
    transition: color 0.2s ease;
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card__cta:hover {
    color: var(--site-accent-hover);
  }

  body[data-site="okitour"] #nabidka-tours .ui-tour-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    justify-self: center;
  }

  /* ── Pricing Table ─────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-pricing__table {
    border-collapse: collapse;
    width: 100%;
  }

  body[data-site="okitour"] .ui-pricing__table th {
    background: var(--site-surface);
    font-family: var(--site-font-accent);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--site-accent);
  }

  body[data-site="okitour"] .ui-pricing__table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--site-border);
  }

  body[data-site="okitour"] .ui-pricing__price {
    font-weight: 700;
    color: var(--site-accent);
    white-space: nowrap;
  }

  /* ── FAQ ────────────────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-faq__item {
    border-bottom: 1px solid var(--site-border);
  }

  body[data-site="okitour"] .ui-faq__question {
    font-family: var(--site-font-accent);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    color: var(--site-fg);
    transition: color 0.2s ease;
    list-style: none;
  }

  body[data-site="okitour"] .ui-faq__question:hover {
    color: var(--site-accent);
  }

  body[data-site="okitour"] .ui-faq__question::marker {
    display: none;
  }

  body[data-site="okitour"] .ui-faq__answer {
    padding: 0 0 1.25rem 0;
    color: var(--site-muted);
    line-height: 1.7;
  }

  /* ── Itinerary — moved to unlayered section (needs to beat @layer atoms) ── */

  /* ── Contact Form ──────────────────────────────────────────────────────── */
  body[data-site="okitour"] .ui-contact-form__input {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    padding: 0.75rem 1rem;
    font-family: var(--site-font-body);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
  }

  body[data-site="okitour"] .ui-contact-form__input:focus {
    outline: none;
    border-color: var(--site-accent);
    box-shadow: 0 0 0 3px var(--site-accent-light);
  }

  body[data-site="okitour"] .ui-contact-form__submit {
    background: var(--site-accent);
    color: #fff;
    border: none;
    padding: 16px 36px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  body[data-site="okitour"] .ui-contact-form__submit:hover {
    background: var(--site-accent-hover);
    transform: translateY(-1px);
  }

  body[data-site="okitour"] .ui-contact-form__submit:active {
    transform: translateY(1px);
  }

  body[data-site="okitour"] .ui-contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Social Feeds — Instagram ──────────────────────────────────────────── */
  body[data-site="okitour"] .social-ig__header {
    margin-bottom: 1.75rem;
  }

  body[data-site="okitour"] .social-ig__title {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] .social-ig__handle {
    font-family: var(--site-font-accent);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--site-accent);
  }

  /* Instagram follow — ghost/outline button */
  body[data-site="okitour"] .social-ig__follow,
  body[data-site="okitour"] a.social-ig__follow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 28px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 2px solid var(--site-accent);
    color: var(--site-accent);
    background: transparent;
    transition: all var(--transition-fast);
    box-shadow: none;
  }

  body[data-site="okitour"] .social-ig__follow:hover,
  body[data-site="okitour"] a.social-ig__follow:hover {
    background: var(--site-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 101, 26, 0.3);
    opacity: 1;
  }

  body[data-site="okitour"] .social-ig__load-more {
    padding: 12px 28px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    color: var(--site-fg);
    border: 1.5px solid rgba(0,0,0,0.15);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  body[data-site="okitour"] .social-ig__load-more:hover {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.3);
    transform: translateY(-1px);
  }

  /* Instagram image hover */
  body[data-site="okitour"] .social-ig__post {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
  }

  body[data-site="okitour"] .social-ig__image {
    transition: transform var(--transition-default), filter var(--transition-default);
  }

  body[data-site="okitour"] .social-ig__post:hover .social-ig__image {
    transform: scale(1.03);
    filter: brightness(1.05);
  }

  /* ── Social Feeds — Facebook ───────────────────────────────────────────── */
  body[data-site="okitour"] .social-fb__title {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] .social-fb__load-more {
    padding: 12px 28px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    color: var(--site-fg);
    border: 1.5px solid rgba(0,0,0,0.15);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  body[data-site="okitour"] .social-fb__load-more:hover {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.3);
    transform: translateY(-1px);
  }

  /* Facebook follow — ghost/outline button (matching Instagram) */
  body[data-site="okitour"] .social-fb__follow,
  body[data-site="okitour"] a.social-fb__follow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 28px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 2px solid var(--site-accent);
    color: var(--site-accent);
    background: transparent;
    transition: all var(--transition-fast);
    box-shadow: none;
  }

  body[data-site="okitour"] .social-fb__follow:hover,
  body[data-site="okitour"] a.social-fb__follow:hover {
    background: var(--site-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(232, 101, 26, 0.3);
    opacity: 1;
  }

  /* Facebook post cards — premium masonry treatment */
  body[data-site="okitour"] .social-fb__post {
    border-radius: var(--site-radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
    background: #fff;
  }

  body[data-site="okitour"] .social-fb__post:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] .social-fb__post-image {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] .social-fb__post:hover .social-fb__post-image {
    transform: scale(1.05);
  }

  /* Post actions — "View on Facebook" link — styled as accent link */
  body[data-site="okitour"] .social-fb__post-actions {
    margin-top: 8px;
  }

  body[data-site="okitour"] .social-fb__post-link {
    font-family: var(--site-font-accent);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--site-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  body[data-site="okitour"] .social-fb__post-link:hover {
    color: var(--site-accent-hover);
  }

  body[data-site="okitour"] .social-fb__post-action-sep {
    margin: 0 6px;
    color: var(--site-muted);
    opacity: 0.4;
  }

  /* Engagement stats — subdued, smaller */
  body[data-site="okitour"] .social-fb__engagement {
    font-family: var(--site-font-accent);
    font-size: 0.75rem;
    color: var(--site-muted);
    opacity: 0.7;
  }

  body[data-site="okitour"] .social-fb__stat {
    margin-right: 10px;
  }

  body[data-site="okitour"] .social-fb__stat svg {
    vertical-align: -2px;
    opacity: 0.6;
  }

  /* Post header — author + date */
  body[data-site="okitour"] .social-fb__post-author {
    font-family: var(--site-font-accent);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--site-fg);
  }

  body[data-site="okitour"] .social-fb__post-date {
    font-size: 0.8125rem;
    color: var(--site-muted);
  }

  /* Post text */
  body[data-site="okitour"] .social-fb__post-text {
    line-height: 1.6;
    color: var(--site-fg-secondary);
  }

  body[data-site="okitour"] .social-fb__see-more {
    font-family: var(--site-font-accent);
    font-weight: 500;
    color: var(--site-accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: COMPONENTS — Page-Specific Styles
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Page: Home ────────────────────────────────────────────────────────── */
  body[data-site="okitour"][data-page="home"] .okitour-intro {
    text-align: center;
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: var(--site-pad-lg) var(--site-pad);
  }

  body[data-site="okitour"][data-page="home"] .okitour-intro h2 {
    font-family: var(--site-font-heading);
    font-size: var(--text-section-title, clamp(1.75rem, 3vw, 2.5rem));
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--site-fg);
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"][data-page="home"] .okitour-intro p {
    font-size: 1.0625rem;
    color: var(--site-fg-secondary);
    line-height: 1.7;
  }

  /* ── Intro Section — Treatment A: orange bar (ONLY here) ───────────── */
  body[data-site="okitour"] #intro-section .ui-section-body__inner {
    text-align: center;
    max-width: var(--content-narrow);
    margin: 0 auto;
  }

  body[data-site="okitour"] #intro-section h2.ui-copy__item {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] #intro-section h2.ui-copy__item::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--site-accent);
    border-radius: 2px;
    margin: 16px auto 24px;
  }

  body[data-site="okitour"] #intro-section p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-fg-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Bridge line */
  body[data-site="okitour"] #intro-section .module-wrapper[data-id="bridge-line"] p.ui-copy__item {
    color: var(--site-muted);
    opacity: 0.65;
    margin-top: 0.25rem;
    margin-bottom: 0;
    letter-spacing: 0.01em;
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="bridge-line"]::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 1rem auto 0;
  }

  /* ── Values Grid (feature cards) — premium, no-border treatment ──────── */
  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] {
    max-width: 960px;
    margin: 1.25rem auto 0;
    text-align: center;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-grid {
    --ui-grid-align: stretch;
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 40px 32px;
    background: var(--site-bg);
    border-radius: var(--site-radius);
    box-shadow: none;
    border: none;
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block__icon {
    width: 64px;
    height: 64px;
    opacity: 1;
    margin-bottom: 20px;
    background: var(--site-accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block__icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.75;
    color: var(--site-accent);
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block__title {
    font-family: var(--site-font-accent);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--site-fg);
  }

  body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block__description {
    line-height: 1.6;
    color: var(--site-muted);
    max-width: 240px;
    margin: 0 auto;
  }

  @media (max-width: 768px) {
    body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] {
      gap: 1rem;
    }

    body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-grid {
      grid-template-columns: 1fr;
    }

    body[data-site="okitour"] #intro-section .module-wrapper[data-id="values-grid"] .ui-service-block {
      padding: 28px 24px;
    }
  }

  /* ── Categories Section — Treatment B: no accent bar ───────────────── */
  body[data-site="okitour"] #categories-section .ui-section-body__inner {
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
  }

  body[data-site="okitour"] #categories-section h2.ui-copy__item {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  /* NO ::after — Treatment B */

  body[data-site="okitour"] #categories-section p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-muted);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__title {
    display: none;
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__grid {
    max-width: 960px;
    margin: 1.5rem auto 0;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card {
    border: none;
    border-radius: var(--site-radius);
    background: var(--site-bg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__image-wrap {
    position: relative;
    overflow: hidden;
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card:hover .ui-tour-card__image {
    transform: scale(1.05);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__body {
    padding: 28px 28px 24px;
    gap: 0.45rem;
    text-align: left;
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__name {
    font-family: var(--site-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--site-fg);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__desc {
    line-height: 1.65;
    color: var(--site-fg-secondary);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card__cta {
    margin-top: 16px;
    font-family: var(--site-font-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--site-accent);
    transition: color 0.2s ease;
    position: relative;
    display: inline-block;
  }

  /* Animated underline on link hover */
  body[data-site="okitour"] #categories-section .ui-tour-card__cta::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--site-accent);
    transition: width var(--transition-default);
  }

  body[data-site="okitour"] #categories-section .ui-tour-card:hover .ui-tour-card__cta::after {
    width: 100%;
  }

  /* ── Facebook Section — Treatment C: thin rule ──────────────────────── */
  body[data-site="okitour"] #facebook-section .ui-section-body__inner {
    text-align: center;
    padding-inline: 0;
  }

  body[data-site="okitour"] #facebook-section h2.ui-copy__item {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
    line-height: var(--site-heading-line-height);
  }

  /* Treatment C — thin rule ABOVE heading */
  body[data-site="okitour"] #facebook-section h2.ui-copy__item::before {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background: var(--site-border);
    margin: 0 auto 24px;
  }

  body[data-site="okitour"] #facebook-section p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-muted);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 1.5rem;
  }

  /* ── Nabídka Choices ───────────────────────────────────────────────────── */
  body[data-site="okitour"] #nabidka-choices .ui-grid[data-id="nabidka-grid"] {
    --ui-grid-align: stretch;
    max-width: 960px;
    margin: 0 auto;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--site-bg);
    border-radius: var(--site-radius);
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
    padding: 0;
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__image-wrap {
    order: -1;
    position: relative;
    overflow: hidden;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block:hover .ui-service-block__image {
    transform: scale(1.05);
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__title {
    padding: 1.5rem 1.75rem 0;
    font-family: var(--site-font-heading);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--site-accent);
    margin: 0;
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__title a {
    color: inherit;
    text-decoration: none;
  }

  body[data-site="okitour"] #nabidka-choices .ui-service-block__description {
    padding: 0.5rem 1.75rem 1.75rem;
    line-height: 1.65;
    color: var(--site-muted);
    flex: 1;
    margin: 0;
  }

  @media (max-width: 768px) {
    body[data-site="okitour"] #nabidka-choices .ui-grid[data-id="nabidka-grid"] {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }

  /* ── Nabídka Intro ─────────────────────────────────────────────────────── */
  body[data-site="okitour"] #nabidka-intro .ui-copy {
    max-width: 52ch;
    text-align: left;
    margin-inline: auto;
  }

  body[data-site="okitour"] #nabidka-intro p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-muted);
    line-height: 1.6;
    margin-bottom: 1.1em;
  }

  body[data-site="okitour"] #nabidka-intro .ui-copy:first-child p.ui-copy__item {
    color: var(--site-fg-secondary);
    opacity: 0.88;
  }

  body[data-site="okitour"] #nabidka-intro .ui-copy:first-child {
    border-left: 3px solid var(--site-accent);
    padding-left: 1.25rem;
    padding-block: 0.25rem;
  }

  /* Notice callout */
  body[data-site="okitour"] #nabidka-intro .ui-copy__wrap[data-id="jednodenni-notice"] .ui-copy {
    margin-top: 1.5rem;
    border-left: none;
    padding: 1.15rem 1.5rem;
    background: var(--site-accent-light);
    border-radius: 10px;
    border: 1px solid rgba(232, 101, 26, 0.15);
  }

  body[data-site="okitour"] #nabidka-intro .ui-copy__wrap[data-id="jednodenni-notice"] p.ui-copy__item {
    line-height: 1.55;
    color: var(--site-muted);
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    body[data-site="okitour"] #nabidka-intro .ui-copy:nth-child(2)::after {
      content: "";
      display: block;
      width: 2px;
      height: 24px;
      background: var(--site-accent);
      opacity: 0.35;
      margin: 0.75rem 0 0 0;
    }
  }

  /* ── Special Intro ─────────────────────────────────────────────────────── */
  body[data-site="okitour"] #special-intro p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-muted);
    line-height: 1.6;
    margin-bottom: 1.1em;
  }

  body[data-site="okitour"] #special-intro .ui-copy__wrap[data-id="special-desc"] .ui-copy {
    border-left: 3px solid var(--site-accent);
    padding-left: 1.25rem;
    padding-block: 0.25rem;
  }

  body[data-site="okitour"] #special-intro .ui-copy__wrap[data-id="special-desc"] p.ui-copy__item {
    color: var(--site-fg-secondary);
    opacity: 0.88;
  }

  body[data-site="okitour"] #special-intro .ui-copy__wrap[data-id="special-notice"] .ui-copy {
    margin-top: 1.5rem;
    border-left: none;
    padding: 1.15rem 1.5rem;
    background: var(--site-accent-light);
    border-radius: 10px;
    border: 1px solid rgba(232, 101, 26, 0.15);
  }

  body[data-site="okitour"] #special-intro .ui-copy__wrap[data-id="special-notice"] p.ui-copy__item {
    line-height: 1.55;
    color: var(--site-muted);
    margin-bottom: 0;
  }

  /* ── Special Programs — premium tour cards ─────────────────────────────── */
  body[data-site="okitour"] #special-programs .ui-tour-card__grid {
    max-width: 1080px;
    margin: 0 auto;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card {
    border: none;
    border-radius: var(--site-radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__image-wrap {
    position: relative;
    overflow: hidden;
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.08));
    pointer-events: none;
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card:hover .ui-tour-card__image {
    transform: scale(1.05);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__body {
    padding: 28px 28px 24px;
    gap: 0.5rem;
    text-align: left;
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__name {
    font-family: var(--site-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--site-fg);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__desc {
    line-height: 1.65;
    color: var(--site-fg-secondary);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__price {
    background: var(--site-accent);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: var(--button-radius);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__cta {
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--site-accent);
    transition: color 0.2s ease;
  }

  body[data-site="okitour"] #special-programs .ui-tour-card__cta:hover {
    color: var(--site-accent-hover);
  }

  body[data-site="okitour"] #special-programs .ui-tour-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    justify-self: center;
  }

  /* ── Služby Intro ──────────────────────────────────────────────────────── */
  body[data-site="okitour"] #sluzby-intro p.ui-copy__item {
    font-size: 1.0625rem;
    color: var(--site-muted);
    line-height: 1.6;
    margin-bottom: 1.1em;
  }

  body[data-site="okitour"] #sluzby-intro .ui-copy__wrap[data-id="sluzby-desc"] .ui-copy {
    border-left: 3px solid var(--site-accent);
    padding-left: 1.25rem;
    padding-block: 0.25rem;
  }

  body[data-site="okitour"] #sluzby-intro .ui-copy__wrap[data-id="sluzby-desc"] p.ui-copy__item {
    color: var(--site-fg-secondary);
    opacity: 0.88;
  }

  body[data-site="okitour"] #sluzby-intro .ui-copy__wrap[data-id="sluzby-notice"] .ui-copy {
    margin-top: 1.5rem;
    border-left: none;
    padding: 1.15rem 1.5rem;
    background: var(--site-accent-light);
    border-radius: 10px;
    border: 1px solid rgba(232, 101, 26, 0.15);
  }

  body[data-site="okitour"] #sluzby-intro .ui-copy__wrap[data-id="sluzby-notice"] p.ui-copy__item {
    line-height: 1.55;
    color: var(--site-muted);
    margin-bottom: 0;
  }

  /* ── Služby Cards ──────────────────────────────────────────────────────── */
  body[data-site="okitour"] #sluzby-cards .ui-tour-card__grid {
    max-width: 1080px;
    margin: 0 auto;
    gap: var(--card-gap);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card {
    border: none;
    border-radius: var(--site-radius);
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__image-wrap {
    position: relative;
    overflow: hidden;
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.08));
    pointer-events: none;
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card:hover .ui-tour-card__image {
    transform: scale(1.05);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__body {
    padding: 28px 28px 24px;
    gap: 0.5rem;
    text-align: left;
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__name {
    font-family: var(--site-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--site-fg);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__desc {
    line-height: 1.65;
    color: var(--site-fg-secondary);
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__price {
    background: var(--site-accent);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
    border-radius: var(--button-radius);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__cta {
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--site-accent);
    transition: color 0.2s ease;
  }

  body[data-site="okitour"] #sluzby-cards .ui-tour-card__cta:hover {
    color: var(--site-accent-hover);
  }

  body[data-site="okitour"][data-page^="nabidka"] .page-title,
  body[data-site="okitour"][data-page^="sluzby"] .page-title {
    font-family: var(--site-font-heading);
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--site-pad-lg);
    color: var(--site-fg);
  }

  /* ── Tour Header — Premium Boutique Experience ──────────────────────── */

  /* Section container with warm ambient gradient */
  body[data-site="okitour"] #tour-header {
    position: relative;
    overflow: visible;
  }
  body[data-site="okitour"] #tour-header::before {
    display: none;
  }

  /* Force grid display */
  body[data-site="okitour"] #tour-header .ui-columns {
    display: grid;
    width: 100%;
    align-items: start;
  }

  /* ── Left sidebar — premium fact card with accent top border ───────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] {
    position: relative;
    background: #fff;
    border-radius: 2px var(--site-radius) var(--site-radius) var(--site-radius);
    box-shadow: var(--shadow-card);
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: start;
    z-index: 10;
    border-top: 3px solid var(--site-accent);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }

  /* Inner warm glow at top of card */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(232, 101, 26, 0.03) 0%, transparent 100%);
    border-radius: var(--site-radius) var(--site-radius) 0 0;
    pointer-events: none;
    z-index: 0;
  }

  @media (hover: hover) {
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"]:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-card-hover);
    }
  }

  /* ── Day label — subtle pill badge ─────────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-day-label {
    --day-label-bg: rgba(232, 101, 26, 0.1);
    --day-label-fg: var(--site-accent);
    --day-label-r: 20px;
    --day-label-fz: 0.8rem;
    --day-label-tt: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    margin-bottom: 0.5rem;
  }
  body[data-site="okitour"] #tour-header .ui-day-label__text {
    font-weight: 600;
    line-height: 1.3;
  }
  /* Remove accent bar — not needed for pill style */
  body[data-site="okitour"] #tour-header .module-wrapper.module-ui-dayLabel::after {
    display: none;
  }

  /* ── Tour title in left column ───────────────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] h2.ui-copy__item {
    font-family: var(--site-font-heading, 'DM Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--site-fg, #2C2218);
    line-height: 1.25;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
  }

  /* ── Tags — rounded rect, warmer tones ─────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    --tags-bg: #f0ebe5;
    --tags-fg: var(--site-fg-secondary);
    --tags-br: transparent;
    --tags-r: 6px;
    --tags-fz: 0.78rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0.75rem;
  }
  body[data-site="okitour"] #tour-header .ui-tags__item {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: var(--tags-r, 6px);
    background: var(--tags-bg);
    color: var(--tags-fg);
    border: 1px solid var(--tags-br);
    font-size: var(--tags-fz, 0.78rem);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  /* All tags uniform — no first-child emphasis */

  /* ── Price — supportive, not dominant ──────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-price-tag {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    --price-fg: var(--site-fg);
    --price-fz: 1.05rem;
    --price-fw: 600;
    --price-note-fg: var(--site-muted);
    --price-note-fz: 0.78rem;
    padding: 0.75rem 0 0;
    margin-bottom: 0;
    position: relative;
  }
  body[data-site="okitour"] #tour-header .ui-price-tag__amount {
    font-weight: 600;
    letter-spacing: 0;
  }
  body[data-site="okitour"] #tour-header .ui-price-tag__note {
    opacity: 0.55;
    margin-top: 0;
    line-height: 1.5;
  }

  /* ── Info items (duration, group) — icon bullets ──────────────────── */
  body[data-site="okitour"] #tour-header .ui-copy__list-item {
    color: var(--site-fg-secondary);
    font-weight: 500;
    padding-left: 1.6rem;
  }
  body[data-site="okitour"] #tour-header .ui-copy__list--accent .ui-copy__list-item::before {
    width: 15px;
    height: 15px;
    border-radius: 0;
    border: none;
    background: none;
    top: 0.2em;
    opacity: 0.5;
  }
  /* clock icon — duration */
  body[data-site="okitour"] #tour-header .ui-copy__list--accent .ui-copy__list-item:nth-child(1)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232D3E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* users icon — group size */
  body[data-site="okitour"] #tour-header .ui-copy__list--accent .ui-copy__list-item:nth-child(2)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232D3E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* ── Right column ──────────────────────────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding-left: 2rem;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] .ui-copy {
    max-width: none;
  }

  /* ── Intro paragraph — editorial quote treatment ───────────────────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] > .module-wrapper:first-child {
    border-left: 3px solid rgba(232, 101, 26, 0.3);
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] > .module-wrapper:first-child p.ui-copy__item {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--site-fg-secondary);
  }

  /* ── Section headings (V ceně / Není v ceně) ─────────────────────── */
  body[data-site="okitour"] #tour-header h3.ui-copy__item {
    font-family: var(--site-font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--site-fg);
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(232, 101, 26, 0.15);
  }

  /* ── Left card section dividers — breathing room between offer/practical ── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] h3.ui-copy__item {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  /* First h3 after price tag — no top border, just spacing */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] .module-ui-priceTag + .module-wrapper h3.ui-copy__item {
    border-top: none;
    padding-top: 0.5rem;
  }

  /* ── Left card list items — tighter alignment ────────────────────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] .ui-copy__list-item {
    padding-left: 1.25rem;
    line-height: 1.65;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] .ui-copy__list-item::before {
    top: 0.55em;
    width: 5px;
    height: 5px;
  }

  /* Right column — compact paragraphs */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] p.ui-copy__item {
    line-height: 1.6;
    margin: 0;
  }

  /* ── Includes/excludes — curated card ──────────────────────────────── */
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] {
    display: grid;
    width: 100%;
    margin-top: 1.5rem;
    background: var(--site-surface-warm);
    border-radius: 8px;
    padding: 1.5rem;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] [data-area="left"],
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] [data-area="right"] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: none;
    box-shadow: none;
    padding: 0;
    border: none;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] h3.ui-copy__item {
    margin-top: 0;
  }
  body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] .ui-copy__list-item {
    line-height: 1.6;
    color: var(--site-fg-secondary);
  }

  /* ── Tour Header Responsive ─────────────────────────────────────────── */
  @media (max-width: 1024px) {
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] {
      gap: 0.5rem;
    }
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] {
      padding-left: 0;
      margin-top: 1rem;
    }
    /* Stacked: intro quote switches to top border */
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] > .module-wrapper:first-child {
      border-left: none;
      padding-left: 0;
      border-top: 3px solid rgba(232, 101, 26, 0.2);
      padding-top: 1.25rem;
    }
  }

  @media (max-width: 640px) {
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] {
      padding: 1.5rem 1.25rem;
    }
    body[data-site="okitour"] #tour-header .ui-tags__item {
      font-size: 0.72rem;
      padding: 0.25rem 0.7rem;
    }
    body[data-site="okitour"] #tour-header .ui-day-label {
      --day-label-fz: 0.75rem;
    }
    body[data-site="okitour"] #tour-header .ui-columns[data-id="tour-includes-cols"] {
      padding: 1rem;
    }
    body[data-site="okitour"] #tour-header .ui-price-tag {
      --price-fz: 0.95rem;
    }
  }

  /* ── Tour section headings (Fotogalerie, Více z nabídky, etc.) ────────── */
  body[data-site="okitour"] #tour-gallery h3.ui-copy__item,
  body[data-site="okitour"] #tour-related h3.ui-copy__item {
    font-family: var(--site-font-heading, 'DM Sans', sans-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--site-fg);
    text-align: center;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    line-height: 1.3;
  }
  body[data-site="okitour"] #tour-gallery h3.ui-copy__item::after,
  body[data-site="okitour"] #tour-related h3.ui-copy__item::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--site-accent, #E8651A);
    border-radius: 2px;
    margin: 0.75rem auto 1.5rem;
    opacity: 0.5;
  }

  /* ── Tour Detail Pages ─────────────────────────────────────────────────── */
  body[data-site="okitour"] .tour-detail__intro {
    font-size: 1.15rem;
    color: var(--site-muted);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto var(--site-pad-lg);
  }

  body[data-site="okitour"] .tour-detail__price-badge {
    display: inline-block;
    background: var(--site-accent-light);
    color: var(--site-accent);
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--site-radius);
    border: 2px solid var(--site-accent);
    margin: var(--site-pad) 0;
  }

  body[data-site="okitour"] .tour-detail__cta-btn {
    display: inline-block;
    background: var(--site-accent);
    color: #fff;
    padding: 16px 36px;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
    margin-top: 1rem;
  }

  body[data-site="okitour"] .tour-detail__cta-btn:hover {
    background: var(--site-accent-hover);
  }

  /* ── Page: About (O nás) — Editorial Redesign ────────────────────────── */

  /* Hero: full-height, warm overlay */
  body[data-site="okitour"][data-page="o-nas"] .ui-hero .ui-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(60, 25, 5, 0.55) 0%,
      rgba(60, 25, 5, 0.40) 50%,
      rgba(60, 25, 5, 0.60) 100%
    );
    opacity: 1;
  }
  body[data-site="okitour"][data-page="o-nas"] .ui-hero__bg {
    background-position: center 38% !important;
  }

  /* Section 1: Intro — narrow centered reading column */
  body[data-site="okitour"] #about-intro .ui-section-body__inner {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
  }
  body[data-site="okitour"] #about-intro h2.ui-copy__item {
    font-family: var(--site-font-heading, 'DM Sans', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--site-accent);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 1.5rem;
  }
  body[data-site="okitour"] #about-intro h2.ui-copy__item::after {
    display: none;
  }
  body[data-site="okitour"] #about-intro p.ui-copy__item {
    line-height: 1.75;
    text-align: left;
  }

  /* Pullquotes — shared left accent bar style */
  body[data-site="okitour"] .module-wrapper--about-intro-quote,
  body[data-site="okitour"] .module-wrapper--about-itoman-quote,
  body[data-site="okitour"] .module-wrapper--about-activities-quote,
  body[data-site="okitour"] .module-wrapper--about-story-quote {
    max-width: 680px;
    margin: 2rem auto 0;
    padding: 1.25rem 2rem;
    border-left: 4px solid var(--site-accent);
    background: rgba(232, 101, 26, 0.04);
    border-radius: 0 var(--site-radius) var(--site-radius) 0;
  }
  body[data-site="okitour"] .module-wrapper--about-intro-quote p.ui-copy__item,
  body[data-site="okitour"] .module-wrapper--about-itoman-quote p.ui-copy__item,
  body[data-site="okitour"] .module-wrapper--about-activities-quote p.ui-copy__item,
  body[data-site="okitour"] .module-wrapper--about-story-quote p.ui-copy__item {
    font-family: var(--site-font-heading, 'DM Sans', sans-serif);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 400;
    color: var(--site-accent);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
  }

  /* Section 2: Itoman — image left 60%, text right 40% */
  body[data-site="okitour"] #about-itoman h2.ui-copy__item,
  body[data-site="okitour"] #about-activities h2.ui-copy__item {
    font-family: var(--site-font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  body[data-site="okitour"] #about-itoman h2.ui-copy__item::after,
  body[data-site="okitour"] #about-activities h2.ui-copy__item::after {
    display: none;
  }
  body[data-site="okitour"] #about-itoman p.ui-copy__item,
  body[data-site="okitour"] #about-activities p.ui-copy__item {
    line-height: 1.75;
  }

  /* Image / map wrappers — subtle shadow, NO orange border */
  body[data-site="okitour"] #about-itoman .ui-columns[data-id="about-itoman-cols"] > [data-area="left"] .module-wrapper,
  body[data-site="okitour"] #about-activities .ui-columns[data-id="about-activities-cols"] > [data-area="right"] .module-wrapper {
    border-radius: var(--site-radius);
    box-shadow: 0 8px 32px rgba(27, 42, 61, 0.10);
    overflow: hidden;
  }

  /* Map — stretch to fill the full column height */
  body[data-site="okitour"] #about-itoman .ui-columns[data-id="about-itoman-cols"] > [data-area="left"] {
    display: flex;
    flex-direction: column;
  }
  body[data-site="okitour"] #about-itoman .ui-columns[data-id="about-itoman-cols"] > [data-area="left"] .module-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  body[data-site="okitour"] #about-itoman .ui-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px;
  }
  body[data-site="okitour"] #about-itoman .ui-map-container {
    flex: 1;
    height: auto;
    min-height: 400px;
  }

  /* Column vertical centering */
  body[data-site="okitour"] #about-itoman .ui-columns[data-id="about-itoman-cols"] > [data-area="right"],
  body[data-site="okitour"] #about-activities .ui-columns[data-id="about-activities-cols"] > [data-area="left"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Pullquotes inside columns — full-width of column */
  body[data-site="okitour"] #about-itoman .module-wrapper--about-itoman-quote,
  body[data-site="okitour"] #about-activities .module-wrapper--about-activities-quote {
    max-width: none;
    margin: 1.5rem 0 0;
  }

  /* Section 4: Values grid — ocean background */
  body[data-site="okitour"] #about-values .ui-section-body__inner {
    max-width: var(--content-max-width, 1140px);
    margin-inline: auto;
  }
  body[data-site="okitour"] #about-values h2.ui-copy__item {
    text-align: center;
    font-family: var(--site-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 2rem;
  }
  body[data-site="okitour"] #about-values h2.ui-copy__item::after {
    display: none;
  }
  /* Equal-height cards — match homepage values-grid style */
  body[data-site="okitour"] #about-values .ui-grid {
    align-items: stretch;
  }
  body[data-site="okitour"] #about-values .ui-grid__cell {
    display: flex;
  }
  body[data-site="okitour"] #about-values .module-wrapper.module-ui-serviceBlock {
    flex: 1;
  }
  body[data-site="okitour"] #about-values .ui-service-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--site-radius);
    box-shadow: none;
    border: none;
    transition: box-shadow var(--transition-default), transform var(--transition-default);
  }
  body[data-site="okitour"] #about-values .ui-service-block:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-4px);
  }
  body[data-site="okitour"] #about-values .ui-service-block__icon {
    width: 64px;
    height: 64px;
    opacity: 1;
    margin-bottom: 20px;
    background: var(--site-accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body[data-site="okitour"] #about-values .ui-service-block__icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.75;
    color: var(--site-accent);
  }
  body[data-site="okitour"] #about-values .ui-service-block__title {
    font-family: var(--site-font-accent);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: var(--site-fg);
  }
  body[data-site="okitour"] #about-values .ui-service-block__description {
    line-height: 1.6;
    color: var(--site-muted);
    max-width: 240px;
  }

  /* Story section — text left, diploma right */
  body[data-site="okitour"] #about-story .ui-columns[data-id="about-story-cols"] > [data-area="left"] {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: start;
  }
  body[data-site="okitour"] #about-story .ui-columns[data-id="about-story-cols"] > [data-area="right"] {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding-top: 0.5rem;
  }
  body[data-site="okitour"] #about-story .ui-columns[data-id="about-story-cols"] > [data-area="right"] .module-wrapper {
    border-radius: var(--site-radius);
    box-shadow: 0 8px 32px rgba(27, 42, 61, 0.10);
    overflow: hidden;
  }
  body[data-site="okitour"] #about-story h2.ui-copy__item::after {
    display: none;
  }

  /* Closing section — centered text + family photo */
  body[data-site="okitour"] #about-closing .ui-section-body__inner {
    text-align: center;
    max-width: var(--content-max-width, 1100px);
    margin: 0 auto;
  }
  body[data-site="okitour"] #about-closing p.ui-copy__item {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-bottom: 0.25rem;
  }
  body[data-site="okitour"] #about-closing h3.ui-copy__item {
    font-family: var(--site-font-heading, 'DM Sans', sans-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--site-fg);
    margin-bottom: 2rem;
  }
  body[data-site="okitour"] #about-closing h3.ui-copy__item::after {
    display: none;
  }
  /* Family photo — shadow only, NO orange border */
  body[data-site="okitour"] #about-closing .module-wrapper.module-ui-image {
    border-radius: var(--site-radius);
    box-shadow: 0 8px 32px rgba(27, 42, 61, 0.10);
    max-width: 800px;
    margin-inline: auto;
    overflow: hidden;
  }

  /* Responsive — about columns collapse */
  @media (max-width: 900px) {
    body[data-site="okitour"] #about-itoman .ui-columns[data-id="about-itoman-cols"],
    body[data-site="okitour"] #about-activities .ui-columns[data-id="about-activities-cols"],
    body[data-site="okitour"] #about-story .ui-columns[data-id="about-story-cols"] {
      grid-template-columns: 1fr !important;
    }
    body[data-site="okitour"] #about-itoman .ui-map {
      min-height: 320px;
    }
    body[data-site="okitour"] #about-itoman .ui-map-container {
      min-height: 320px;
    }
    body[data-site="okitour"] #about-activities .ui-columns[data-id="about-activities-cols"] > [data-area="right"] .ui-image,
    body[data-site="okitour"] #about-story .ui-columns[data-id="about-story-cols"] > [data-area="right"] .ui-image {
      max-width: 500px;
      margin-inline: auto;
    }
    body[data-site="okitour"] .module-wrapper--about-itoman-quote,
    body[data-site="okitour"] .module-wrapper--about-activities-quote {
      max-width: 680px;
      margin-inline: auto;
    }
  }

  /* ── Section Headers (shared) ──────────────────────────────────────────── */
  body[data-site="okitour"] .section-header {
    text-align: center;
    margin-bottom: var(--site-pad-lg);
  }

  body[data-site="okitour"] .section-header h2 {
    font-family: var(--site-font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--site-fg);
    margin-bottom: 0.5rem;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] .section-header p {
    font-size: 1.0625rem;
    color: var(--site-muted);
  }

  /* ── Related Tours ─────────────────────────────────────────────────────── */
  body[data-site="okitour"] .related-tours {
    margin-top: var(--site-pad-lg);
    padding-top: var(--site-pad-lg);
    border-top: 1px solid var(--site-border);
  }

  body[data-site="okitour"] .related-tours h3 {
    font-family: var(--site-font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--site-fg);
  }

  body[data-site="okitour"] .related-tours__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  body[data-site="okitour"] .related-tours__list a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--site-surface);
    color: var(--site-accent);
    border-radius: var(--site-radius-sm);
    text-decoration: none;
    font-family: var(--site-font-accent);
    font-weight: 500;
    transition: background 0.2s ease;
    border: 1px solid var(--site-border);
  }

  body[data-site="okitour"] .related-tours__list a:hover {
    background: var(--site-accent-light);
    border-color: var(--site-accent);
  }

  /* ── Pre-Footer CTA Band ───────────────────────────────────────────────── */
  body[data-site="okitour"] .okitour-footer__cta-band {
    background: var(--site-accent);
    padding: 48px var(--edge);
    text-align: center;
  }

  body[data-site="okitour"] .okitour-footer__cta-band h3 {
    font-family: var(--site-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 20px;
    line-height: var(--site-heading-line-height);
  }

  body[data-site="okitour"] .okitour-footer__cta-band a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    border-radius: var(--button-radius);
    font-family: var(--site-font-accent);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
  }

  body[data-site="okitour"] .okitour-footer__cta-band a:hover {
    background: #fff;
    color: var(--site-accent);
  }

  /* ── Footer Grid ───────────────────────────────────────────────────────── */
  body[data-site="okitour"] .okitour-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
    padding: 60px var(--edge) 32px;
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

  body[data-site="okitour"] .okitour-footer__col-heading {
    font-family: var(--site-font-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0 0 16px;
  }

  /* Brand column */
  body[data-site="okitour"] .okitour-footer__brand-top {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  body[data-site="okitour"] .okitour-footer__logo {
    height: 40px;
    width: auto;
    filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(1.1);
  }

  body[data-site="okitour"] .okitour-footer__shisa {
    width: 48px;
    height: auto;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
  }

  body[data-site="okitour"] .okitour-footer__shisa:hover {
    opacity: 1;
  }

  body[data-site="okitour"] .okitour-footer__brand-tagline {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 12px 0 20px;
  }

  body[data-site="okitour"] .okitour-footer__brand-social {
    display: flex;
    gap: 16px;
  }

  body[data-site="okitour"] .okitour-footer__brand-social a {
    color: rgba(255,255,255,0.7);
    font-family: var(--site-font-accent);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  body[data-site="okitour"] .okitour-footer__brand-social a:hover {
    color: #fff;
  }

  /* Nav column */
  body[data-site="okitour"] .okitour-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  body[data-site="okitour"] .okitour-footer__nav-list li {
    margin-bottom: 10px;
  }

  body[data-site="okitour"] .okitour-footer__nav-list a {
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  body[data-site="okitour"] .okitour-footer__nav-list a:hover {
    color: #fff;
  }

  /* Contact column */
  body[data-site="okitour"] .okitour-footer__contact-info {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
  }

  body[data-site="okitour"] .okitour-footer__contact-info a {
    color: var(--site-accent);
  }

  body[data-site="okitour"] .okitour-footer__contact-info a:hover {
    color: #fff;
  }

  body[data-site="okitour"] .okitour-footer__contact-address {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  /* Footer bottom */
  body[data-site="okitour"] .okitour-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 24px var(--edge) 32px;
    margin-top: 0;
    text-align: center;
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  body[data-site="okitour"] .okitour-footer__bottom p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
  }

  @media (max-width: 768px) {
    body[data-site="okitour"] .okitour-footer__grid {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 40px var(--edge) 24px;
    }

    body[data-site="okitour"] .okitour-footer__cta-band {
      padding: 36px var(--edge);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: UTILITIES — Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer utilities {

  /* ── Tablet (max 1024px) ───────────────────────────────────────────────── */
  @media (max-width: 1024px) {
    body[data-site="okitour"] {
      --site-pad: 1.25rem;
      --site-pad-lg: 2rem;
      --edge: 32px;
    }

    body[data-site="okitour"] .ui-hero {
      --ui-hero-height: 50vh;
    }

    body[data-site="okitour"] .ui-hero[data-compact="true"] {
      --ui-hero-height: 30vh;
    }
  }

  /* ── Mobile (max 768px) ────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    body[data-site="okitour"] {
      --site-pad: 1rem;
      --site-pad-lg: 1.5rem;
      --site-font-size: 16px;
      --edge: 24px;
    }

    body[data-site="okitour"] .ui-hero {
      --ui-hero-height: 45vh;
    }

    body[data-site="okitour"] .ui-hero[data-compact="true"] {
      --ui-hero-height: 25vh;
    }

    body[data-site="okitour"] .ui-hero[data-compact="true"] .ui-hero__content {
      padding: 2rem 1.25rem calc(2rem + 100px);
    }

    body[data-site="okitour"] .ui-navbar {
      --ui-navbar-height: 60px;
    }

    body[data-site="okitour"] .ui-contact-form__submit {
      width: 100%;
    }

    body[data-site="okitour"] .ui-pricing__table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    body[data-site="okitour"] .section-header h2 {
      font-size: 1.5rem;
    }
  }

  /* ── Small Mobile (max 480px) ──────────────────────────────────────────── */
  @media (max-width: 480px) {
    body[data-site="okitour"] {
      --site-pad: 0.75rem;
      --site-pad-lg: 1.25rem;
      --edge: 16px;
    }

    body[data-site="okitour"] .ui-hero {
      --ui-hero-height: 40vh;
    }

  }

  /* ── Scroll-triggered reveal (CSS-only states) ─────────────────────────── */
  body[data-site="okitour"] .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body[data-site="okitour"] .revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYER: OVERRIDES — Final Authority
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer overrides {

  /* ── Smooth page transitions ───────────────────────────────────────────── */
  body[data-site="okitour"] [data-area="main"] {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  body[data-site="okitour"] [data-area="main"][data-transitioning="true"] {
    opacity: 0;
    visibility: hidden;
  }

  /* ── Scroll behavior ───────────────────────────────────────────────────── */
  html[data-site="okitour"] {
    scroll-behavior: smooth;
  }

  /* ── Links — animated underline reveal ─────────────────────────────────── */
  body[data-site="okitour"] a:not([class]) {
    color: var(--site-accent);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast);
  }

  body[data-site="okitour"] a:not([class])::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--site-accent);
    transition: width var(--transition-default);
  }

  body[data-site="okitour"] a:not([class]):hover {
    color: var(--site-accent-hover);
  }

  body[data-site="okitour"] a:not([class]):hover::after {
    width: 100%;
  }

  /* ── Headings — premium serif ──────────────────────────────────────────── */
  body[data-site="okitour"] h1,
  body[data-site="okitour"] h2,
  body[data-site="okitour"] h3,
  body[data-site="okitour"] h4 {
    font-family: var(--site-font-heading);
    font-weight: 400;
    line-height: var(--site-heading-line-height);
    color: var(--site-fg);
  }

  /* Tour header h3 — force body font (overrides global heading serif above) */
  body[data-site="okitour"] #tour-header h3.ui-copy__item {
    font-family: var(--site-font-body);
  }

  /* ── Images ────────────────────────────────────────────────────────────── */
  body[data-site="okitour"] img {
    max-width: 100%;
    height: auto;
  }

  /* ── Social feed images ────────────────────────────────────────────────── */
  body[data-site="okitour"] .social-ig__post {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  body[data-site="okitour"] .social-ig__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNLAYERED — Section content padding & overrides
   Unlayered rules ALWAYS beat layered rules (including module @layer).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Canvas: zero side-padding — sections/hero/dividers go edge-to-edge.
   background: sand — overrides theme=light #fff fallback in module @layer */
body[data-site="okitour"] .ui-canvas[data-module="ui.canvas"],
body[data-site="okitour"] .ui-canvas[data-mod="ui_canvas"] {
  padding-inline: 0;
  background: var(--site-bg, #F5EFE4);
}

/* Section body: no side-padding (bg bleeds edge-to-edge); __inner owns content inset */
body[data-site="okitour"] .ui-section-body {
  padding-inline: 0;
}

body[data-site="okitour"] .ui-section-body__inner {
  padding-inline: var(--edge);
}

/* ── Section spacing — generous, premium breathing room ────────────────── */
body[data-site="okitour"] #intro-section {
  padding-block: 0 0;
}

body[data-site="okitour"] #categories-section {
  padding-block: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 40px);
}

body[data-site="okitour"] #facebook-section {
  padding-block: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 80px);
}

/* SSR hidden posts — module CSS not available at initial render, so site CSS must handle */
body[data-site="okitour"] .social-fb__post--hidden,
body[data-site="okitour"] .social-ig__post--hidden {
  display: none;
}

body[data-site="okitour"] #facebook-section .ui-section-body__inner {
  padding-inline: 0;
}

/* ── Footer — unlayered to beat module @layer ───────────────────────────── */
body[data-site="okitour"] .ui-section-footer[data-mod="ui_section_footer"] {
  background: var(--site-fg);
  color: rgba(255,255,255,0.85);
  padding: 0;
  border-top: none;
}

body[data-site="okitour"] .okitour-footer__cta-band {
  background: var(--site-accent);
  padding: 48px var(--edge);
  text-align: center;
}

body[data-site="okitour"] .okitour-footer__cta-band h3 {
  font-family: var(--site-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  color: #fff;
  margin: 0 0 20px;
  line-height: var(--site-heading-line-height);
}

body[data-site="okitour"] .okitour-footer__cta-band a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  border-radius: var(--button-radius);
  font-family: var(--site-font-accent);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

body[data-site="okitour"] .okitour-footer__cta-band a:hover {
  background: #fff;
  color: var(--site-accent);
}

body[data-site="okitour"] .okitour-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding: 60px var(--edge) 32px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

body[data-site="okitour"] .okitour-footer__col {
  text-align: left;
}

body[data-site="okitour"] .okitour-footer__col-heading {
  font-family: var(--site-font-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0 0 16px;
}

body[data-site="okitour"] .okitour-footer__logo {
  height: 44px;
  width: auto;
  filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(1.1);
  margin-bottom: 12px;
}

body[data-site="okitour"] .okitour-footer__brand-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 280px;
}

body[data-site="okitour"] .okitour-footer__brand-social {
  display: flex;
  gap: 16px;
}

body[data-site="okitour"] .okitour-footer__brand-social a {
  color: var(--site-accent);
  font-family: var(--site-font-accent);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

body[data-site="okitour"] .okitour-footer__brand-social a:hover {
  color: #fff;
}

body[data-site="okitour"] .okitour-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body[data-site="okitour"] .okitour-footer__nav-list li {
  margin-bottom: 8px;
}

body[data-site="okitour"] .okitour-footer__nav-list a {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

body[data-site="okitour"] .okitour-footer__nav-list a:hover {
  color: #fff;
}

body[data-site="okitour"] .okitour-footer__contact-info {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}

body[data-site="okitour"] .okitour-footer__contact-info p {
  margin: 0 0 6px;
}

body[data-site="okitour"] .okitour-footer__contact-info a {
  color: var(--site-accent);
  text-decoration: none;
}

body[data-site="okitour"] .okitour-footer__contact-info a:hover {
  color: #fff;
}

body[data-site="okitour"] .okitour-footer__contact-address {
  margin-bottom: 10px;
  line-height: 1.4;
}

body[data-site="okitour"] .okitour-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px var(--edge) 32px;
  text-align: center;
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body[data-site="okitour"] .okitour-footer__bottom .okitour-footer__shisa {
  width: 40px;
  height: auto;
  opacity: 0.55;
}

body[data-site="okitour"] .okitour-footer__bottom p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

@media (max-width: 768px) {
  body[data-site="okitour"] .okitour-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px var(--edge) 24px;
  }

  body[data-site="okitour"] .okitour-footer__cta-band {
    padding: 36px var(--edge);
  }
}

body[data-site="okitour"] #nabidka-intro {
  padding-block: 1rem 1rem;
}

body[data-site="okitour"] #nabidka-intro .ui-section-body__inner {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
  padding-top: 2.5rem;
}

body[data-site="okitour"] #nabidka-intro .ui-section-body__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

body[data-site="okitour"] #nabidka-choices {
  padding-block: clamp(40px, 5vw, 80px) clamp(60px, 8vw, 120px);
}

/* ── Nabídka cards — UNLAYERED overrides ─────────────────────────────────── */
body[data-site="okitour"] #nabidka-choices .ui-service-block__image-wrap {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

body[data-site="okitour"] #nabidka-choices .ui-service-block__title {
  margin: 0;
  color: var(--site-accent);
}

body[data-site="okitour"] #nabidka-choices .ui-service-block__title a {
  color: inherit;
  text-decoration: none;
}

body[data-site="okitour"] #nabidka-choices .ui-service-block__description {
  margin: 0;
}

/* ── Hero overlays — page-specific ───────────────────────────────────────── */
body[data-site="okitour"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,18,36,0.25) 0%,
    rgba(10,18,36,0.52) 35%,
    rgba(10,18,36,0.62) 65%,
    rgba(10,18,36,0.70) 100%
  );
  opacity: 1;
}

body[data-site="okitour"] .ui-hero__bg {
  background-position: center 65%;
}

body[data-site="okitour"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: var(--ui-hero-overlay-color, rgba(10,18,36,1));
}

/* Nabídka hero overlays */
body[data-site="okitour"][data-page^="nabidka"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,18,36,0.52) 0%,
    rgba(10,18,36,0.35) 50%,
    rgba(10,18,36,0.18) 100%
  );
  opacity: 1;
}

body[data-site="okitour"][data-page^="nabidka"] .ui-hero__bg {
  background-position: center 40%;
}

body[data-site="okitour"][data-page^="nabidka/jednodenni"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,18,36,0.48) 0%,
    rgba(10,18,36,0.32) 50%,
    rgba(10,18,36,0.15) 100%
  );
  opacity: 1;
}

body[data-site="okitour"][data-page^="nabidka/jednodenni"] .ui-hero__bg {
  background-position: center 55%;
}

body[data-site="okitour"][data-page^="nabidka/special"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,18,36,0.45) 0%,
    rgba(10,18,36,0.30) 50%,
    rgba(10,18,36,0.12) 100%
  );
  opacity: 1;
}

body[data-site="okitour"][data-page^="nabidka/special"] .ui-hero__bg {
  background-position: center 40%;
}

body[data-site="okitour"][data-page^="sluzby"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10,18,36,0.50) 0%,
    rgba(10,18,36,0.35) 50%,
    rgba(10,18,36,0.18) 100%
  );
  opacity: 1;
}

body[data-site="okitour"][data-page^="sluzby"] .ui-hero__bg {
  background-position: center 60%;
}

/* ── Instagram module — sand background ──────────────────────────────────── */
body[data-site="okitour"] .module-wrapper.module-social-instagram {
  background: var(--site-bg-sand);
}

body[data-site="okitour"] .social-ig__wrap {
  padding: clamp(40px, 6vw, 80px) var(--edge) clamp(32px, 5vw, 60px);
}

/* ── Header + Navbar — UNLAYERED ─────────────────────────────────────────── */
body[data-site="okitour"] .ui-layout__cell[data-area="header"] {
  background: var(--site-bg-sand);
}
body[data-site="okitour"] .ui-navbar {
  --ui-navbar-bg: rgba(245, 239, 228, 0.92);
  background: rgba(245, 239, 228, 0.92);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* ── Footer — UNLAYERED ──────────────────────────────────────────────────── */
body[data-site="okitour"] .ui-section-footer {
  --ui-sec-footer-bg: var(--site-fg);
  --ui-sec-footer-fg: rgba(255,255,255,0.7);
  background: var(--site-fg);
  color: rgba(255,255,255,0.7);
  border-top: none;
}

/* ── Hero text — premium layered typography ──────────────────────────────── */
body[data-site="okitour"] .ui-hero__title {
  color: #fff;
  font-family: var(--site-font-heading);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 4px 24px rgba(0,0,0,0.4);
}

body[data-site="okitour"] .ui-hero__subtitle {
  color: rgba(255,255,255,0.95);
  font-family: var(--site-font-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.6),
    0 3px 16px rgba(0,0,0,0.35);
}

body[data-site="okitour"] .ui-hero__trust {
  color: rgba(255,255,255,0.92);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.55),
    0 2px 12px rgba(0,0,0,0.3);
}

body[data-site="okitour"] .ui-hero__usp {
  font-family: var(--site-font-accent);
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.5),
    0 2px 10px rgba(0,0,0,0.25);
}

/* ── Itinerary — Premium Zigzag Cards (unlayered to beat @layer atoms) ── */

/* Container */
body[data-site="okitour"] .ui-itinerary__wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* Section title */
body[data-site="okitour"] .ui-itinerary__title {
  font-family: var(--site-font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--site-fg);
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(232, 101, 26, 0.15);
}

/* Kill default timeline line */
body[data-site="okitour"] .ui-itinerary__list[data-variant="timeline"] .ui-itinerary__step::after {
  display: none;
}

/* Step list */
body[data-site="okitour"] .ui-itinerary__list {
  gap: 1.75rem;
}

/* ── Each step = card ──────────────────────────────────────────────────── */
body[data-site="okitour"] .ui-itinerary__step {
  display: block;
  padding: 0;
  padding-bottom: 0;
  background: #fff;
  border-radius: var(--site-radius);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
  body[data-site="okitour"] .ui-itinerary__step:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
  }
}

/* ── Marker — large ghost number on text side ─────────────────────────── */
body[data-site="okitour"] .ui-itinerary__marker {
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 2;
}

body[data-site="okitour"] .ui-itinerary__number {
  background: transparent;
  color: #f0cdb8;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  font-family: var(--site-font-heading);
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.10);
}

/* Even steps: marker on right side (text side) */
body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__marker {
  left: auto;
  right: 1.25rem;
}

/* Fade ghost number when text is expanded so it doesn't overlay readable text */
body[data-site="okitour"] .ui-itinerary__step:has(.is-expanded) .ui-itinerary__marker {
  opacity: 0.15;
  transition: opacity 0.3s ease;
}

/* ── Content — image-heavy 2-col (7fr image / 5fr text) ───────────────── */
body[data-site="okitour"] .ui-itinerary__content {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: 1fr auto;
  padding: 0;
  min-width: 0;
}

body[data-site="okitour"] .ui-itinerary__step-title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--site-font-heading);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--site-fg);
  letter-spacing: -0.01em;
  margin: 0;
  padding: 2rem 1.75rem 0.75rem 1.75rem;
  align-self: end;
  position: relative;
}

/* Accent bar under title */
body[data-site="okitour"] .ui-itinerary__step-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--site-accent);
  border-radius: 2px;
  margin-top: 0.75rem;
  opacity: 0.6;
}

body[data-site="okitour"] .ui-itinerary__step-desc-wrap,
body[data-site="okitour"] .ui-itinerary__step-desc {
  grid-column: 1;
  grid-row: 2;
  color: var(--site-muted);
  line-height: 1.7;
  max-width: none;
  margin: 0;
  padding: 0.75rem 1.75rem 1.75rem 1.75rem;
  align-self: start;
  border-left: 3px solid rgba(232, 101, 26, 0.12);
  margin-left: 1.75rem;
  padding-left: 1rem;
  padding-right: 1.75rem;
}
/* When wrapped, inner <p> inherits text styles but not layout */
body[data-site="okitour"] .ui-itinerary__step-desc-wrap .ui-itinerary__step-desc {
  grid-column: unset;
  grid-row: unset;
  padding: 0;
  margin: 0;
  border-left: none;
  margin-left: 0;
}
body[data-site="okitour"] .ui-itinerary__read-more {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
}

/* Image — right column, spans both rows, cover crop */
body[data-site="okitour"] .ui-itinerary__step-image {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  min-height: 340px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  display: block;
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  body[data-site="okitour"] .ui-itinerary__step:hover .ui-itinerary__step-image {
    transform: scale(1.04);
  }
}

/* ── Zigzag: even steps = image left (7fr), text right (5fr) ──────────── */
body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__content {
  grid-template-columns: 7fr 5fr;
}

body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-title {
  grid-column: 2;
}

body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-desc-wrap,
body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-desc {
  grid-column: 2;
}

body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-image {
  grid-column: 1;
  grid-row: 1 / -1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body[data-site="okitour"] .ui-itinerary__content,
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__content {
    grid-template-columns: 1fr;
  }
  body[data-site="okitour"] .ui-itinerary__step-image,
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-image {
    grid-column: 1;
    grid-row: 1;
    height: 220px;
  }
  body[data-site="okitour"] .ui-itinerary__step-title,
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-title {
    grid-column: 1;
    grid-row: 2;
    padding: 1.25rem 1.25rem 0;
  }
  body[data-site="okitour"] .ui-itinerary__step-desc-wrap,
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-desc-wrap,
  body[data-site="okitour"] .ui-itinerary__step-desc,
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__step-desc {
    grid-column: 1;
    grid-row: 3;
    padding: 0.35rem 1.25rem 1.25rem;
  }
  body[data-site="okitour"] .ui-itinerary__marker {
    left: 0.75rem;
  }
  body[data-site="okitour"] .ui-itinerary__step:nth-child(even) .ui-itinerary__marker {
    left: 0.75rem;
    right: auto;
  }
}

@media (max-width: 640px) {
  body[data-site="okitour"] .ui-itinerary__title {
    font-size: 1.35rem;
    margin-bottom: 1.5rem;
  }
  body[data-site="okitour"] .ui-itinerary__step-image {
    min-height: 180px;
    max-height: 250px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOSAIC GALLERY — Site-level overrides for ui.media.pipeline mosaic variant
   ═══════════════════════════════════════════════════════════════════════════════ */

body[data-site="okitour"] .ui-media--mosaic {
  --ui-media-mosaic-gap: 5px;
  --ui-media-mosaic-radius: 10px;
  --ui-media-mosaic-row: 240px;
}

body[data-site="okitour"] .ui-media--mosaic__tile {
  box-shadow: 0 2px 12px rgba(60, 25, 5, 0.12);
}

body[data-site="okitour"] .ui-media--mosaic__tile figcaption {
  font-family: var(--site-font-body, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

body[data-site="okitour"] .module-wrapper--tour-gallery .ui-section__body-inner {
  max-width: 1100px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   JAPONSKO VE ŠKOLE — Premium School Program Page
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero — visible image with warm gradient overlay ─────────────────── */
body[data-site="okitour"][data-page="skoly"] .ui-hero[data-variant="compact"] {
  min-height: 55vh;
}

body[data-site="okitour"][data-page="skoly"] .ui-hero[data-variant="compact"] .ui-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(60, 25, 5, 0.35) 0%,
    rgba(60, 25, 5, 0.25) 40%,
    rgba(60, 25, 5, 0.55) 100%
  );
  opacity: 1;
}

body[data-site="okitour"][data-page="skoly"] .ui-hero__bg {
  background-position: center 35%;
}

body[data-site="okitour"][data-page="skoly"] .ui-hero[data-variant="compact"] .ui-hero__content {
  padding-bottom: calc(2.5rem + 160px);
}

body[data-site="okitour"][data-page="skoly"] .ui-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

body[data-site="okitour"][data-page="skoly"] .ui-hero__cta {
  background: var(--site-accent);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 0.8rem 2.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-top: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

body[data-site="okitour"][data-page="skoly"] .ui-hero__cta:hover {
  background: #d45a15;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* School intro section — decorative top line + spacing */
body[data-site="okitour"] #school-intro {
  padding-block: 1rem 1rem;
}
body[data-site="okitour"] #school-intro .ui-section-body__inner {
  position: relative;
  padding-top: 2.5rem;
}
body[data-site="okitour"] #school-intro .ui-section-body__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

/* ── Intro section — accent-border lead + image left / text right ────── */

/* Space between lead text and columns below */
body[data-site="okitour"] #school-intro .ui-section-body__inner > .module-wrapper:first-child {
  margin-bottom: 2.5rem;
}

/* Constrain + center the lead copy block */
body[data-site="okitour"] #school-intro .ui-section-body__inner > .module-wrapper:first-child .ui-copy {
  max-width: 68ch;
  text-align: left;
  margin-inline: auto;
  border-left: 3px solid var(--site-accent);
  padding-left: 1.25rem;
  padding-block: 0.25rem;
}

/* Lead statement — editorial feel, aligned with site */
body[data-site="okitour"] #school-intro .ui-section-body__inner > .module-wrapper:first-child p.ui-copy__item {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: var(--site-fg-secondary);
  opacity: 0.88;
  margin-bottom: 0;
}

/* Columns: image LEFT (5fr), text RIGHT (7fr) */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] {
  display: flex;
  flex-direction: column;
  align-self: start;
}

/* Shadow on wrapper — keeps it separate from overflow clip */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] .module-wrapper {
  border-radius: var(--site-radius);
  box-shadow: 0 8px 32px rgba(60, 25, 5, 0.15);
  transition: box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] .ui-image__img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] .module-wrapper:hover {
    box-shadow: 0 16px 48px rgba(60, 25, 5, 0.28);
  }
  body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] .module-wrapper:hover .ui-image__img {
    transform: scale(1.05);
  }
}

/* Right column — premium text layout */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  padding-left: clamp(0px, 2vw, 24px);
}

/* Description text — vertical accent on text only */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:first-child p.ui-copy__item {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--site-fg);
  border-bottom: none;
  margin-bottom: 0;
  letter-spacing: 0.005em;
}
/* Centered decorative line between content blocks */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:first-child,
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:nth-child(3) {
  padding-bottom: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
}
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:first-child::after,
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:nth-child(3)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

/* Description — styled first line */
body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="right"] > .module-wrapper:first-child p.ui-copy__item::first-line {
  font-weight: 600;
  color: var(--site-fg);
}

/* Audience heading — underline accent like program section */
/* ── Global section heading style for okitour — underline accent ──────── */
body[data-site="okitour"] .ui-copy__item:is(h2, h3) {
  font-family: var(--site-font-heading, 'DM Sans', sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--site-fg);
  margin-bottom: 1.5rem;
  padding-left: 0;
  border-left: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
body[data-site="okitour"] .ui-copy__item:is(h2, h3)::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  border-radius: 2px;
  background: var(--site-accent);
  margin: 12px auto 0;
}
/* Tour header headings already have border-bottom decoration — no bar */
body[data-site="okitour"] #tour-header .ui-copy__item:is(h2, h3)::after {
  display: none;
}

/* Inside columns/grids headings are left-aligned — bar follows */
body[data-site="okitour"] .ui-columns__cell .ui-copy__item:is(h2, h3)::after,
body[data-site="okitour"] .ui-grid__cell .ui-copy__item:is(h2, h3)::after {
  margin-left: 0;
  margin-right: auto;
}

/* ── Global list style for okitour ────────────────────────────────────── */
body[data-site="okitour"] .ui-copy__list {
  --ui-copy-list-gap: 0.1rem;
}
body[data-site="okitour"] .ui-copy__list-item {
  color: var(--site-fg);
  padding-block: 0.35em;
  margin-left: 2rem;
  border-bottom: 1px solid rgba(60, 25, 5, 0.06);
}
body[data-site="okitour"] .ui-copy__list-item::before {
  width: 7px;
  height: 7px;
  margin-top: calc(var(--ui-copy-lh, 1.65) / 2 * 1em - 3.5px);
  background: var(--site-accent);
  border: none;
  opacity: 0.45;
}
body[data-site="okitour"] .ui-copy__list-item:last-child {
  border-bottom: none;
}

/* ── Program section — expectations LEFT, images RIGHT ───────────────── */

/* Left column — text layout */
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="left"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: start;
  padding-right: clamp(0px, 2vw, 24px);
}

/* Decorative divider above closing note */
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="left"] > .module-wrapper:nth-last-child(2) {
  padding-bottom: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
}
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="left"] > .module-wrapper:nth-last-child(2)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
}

/* Closing note — soft aside after the expectations list */
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="left"] > .module-wrapper:last-child p.ui-copy__item {
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid rgba(232, 101, 26, 0.3);
  line-height: 1.7;
  color: var(--site-fg-secondary);
}

/* Right column: stacked images */
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: start;
  padding-top: 0.5rem;
}

/* Shadow on wrapper — keeps it separate from overflow clip */
body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] .module-wrapper {
  border-radius: var(--site-radius);
  box-shadow: 0 8px 32px rgba(60, 25, 5, 0.15);
  transition: box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] .ui-image__img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] .module-wrapper:hover {
    box-shadow: 0 16px 48px rgba(60, 25, 5, 0.28);
  }
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] .module-wrapper:hover .ui-image__img {
    transform: scale(1.05);
  }
}

/* ── Info card — price/contact LEFT, practical info RIGHT ────────────── */

/* Left column: title + price + contact */
body[data-site="okitour"][data-page="skoly"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Contact paragraph — accent card style (now in left column) */
body[data-site="okitour"][data-page="skoly"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="left"] > .module-wrapper:last-child p.ui-copy__item {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(232, 101, 26, 0.06);
  border-left: 3px solid var(--site-accent);
  border-radius: 0 var(--site-radius) var(--site-radius) 0;
  font-weight: 500;
  color: var(--site-fg);
  line-height: 1.6;
}

/* Right column — remove inherited quote bar from wrapper */
body[data-site="okitour"][data-page="skoly"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] > .module-wrapper:first-child {
  border-left: none;
  padding-left: 0;
}

/* Right column practical list items */
body[data-site="okitour"][data-page="skoly"] #tour-header .ui-columns[data-id="tour-header-cols"] > [data-area="right"] .ui-copy__list-item {
  line-height: 1.65;
  margin-bottom: 0.55rem;
  padding-left: 1.25rem;
}

/* Email links — prominent accent */
body[data-site="okitour"] .ui-link--email {
  color: var(--site-accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

body[data-site="okitour"] .ui-link--email:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Gallery section — compact mosaic ─────────────────────────────────── */

body[data-site="okitour"] #school-gallery {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

body[data-site="okitour"] #school-gallery h2.ui-copy__item {
  font-family: var(--site-font-heading, 'DM Sans', sans-serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  text-align: center;
}

/* Compact mosaic for school gallery — tighter tiles */
body[data-site="okitour"] #school-gallery .ui-media--mosaic {
  --ui-media-mosaic-row: 200px;
  --ui-media-mosaic-gap: 6px;
  --ui-media-mosaic-radius: 8px;
}

/* Force 3-col on school gallery even at tablet */
@media (min-width: 600px) {
  body[data-site="okitour"] #school-gallery .ui-media--mosaic {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 200px !important;
    grid-template-rows: unset !important;
    grid-template-areas: unset !important;
  }
  body[data-site="okitour"] #school-gallery .ui-media--mosaic .ui-media--mosaic__tile {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
  }
  /* First tile spans 2x2 for hero effect */
  body[data-site="okitour"] #school-gallery .ui-media--mosaic .ui-media--mosaic__tile[data-index="0"] {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    min-height: unset !important;
  }
}

/* ── Responsive — school page ────────────────────────────────────────── */
@media (max-width: 900px) {
  body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] {
    grid-template-columns: 1fr !important;
  }
  body[data-site="okitour"] #school-intro .ui-columns[data-id="school-intro-cols"] > [data-area="left"] .ui-image {
    max-width: 400px;
  }
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] {
    grid-template-columns: 1fr !important;
  }
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] {
    flex-direction: row;
    gap: 1rem;
  }
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] .module-wrapper {
    flex: 1;
  }
  body[data-site="okitour"][data-page="skoly"] #tour-header .ui-columns[data-id="tour-header-cols"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body[data-site="okitour"][data-page="skoly"] .ui-hero[data-variant="compact"] {
    min-height: 45vh;
  }
  body[data-site="okitour"] #school-program .ui-columns[data-id="school-program-cols"] > [data-area="right"] {
    flex-direction: column;
  }
}