/* sumava-home.css — styly titulky (FÁZE 3a, 2. 9. 2026): 1:1 spojení inline <style> bloků z /web/index.html
   (hlavní · sth-overrides · tipy-forecast · test11-va3 · fc2-quad · pm-hp-map). Verze = filemtime (sumava-homepage.php). */

/* ===== HLAVNÍ ===== */
/* ===================================================
   SUMAVA.EU — CLEAN MODERN REBUILD v2
   CSS @layer architecture | ES2022 | Zero dependencies
   =================================================== */

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img { display: block; max-width: 100%; }
  a { text-decoration: none; }
  button { cursor: pointer; border: none; background: none; font-family: inherit; }
}

@layer base {
  :root {
    --green-deep: #17462F;
    --green-mid: #1a5c3a;
    --gold: #c9a84c;
    --white: #f8f9fa;
    --bg-light: #f8f5f0;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', system-ui, sans-serif;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-size: 17px;
    overflow-x: hidden;
  }
}

@layer layout {
  .sth-wrap { font-family: var(--font-sans); color: #1a1a1a; -webkit-font-smoothing: antialiased; line-height: 1.6; }
  .sth-wrap a { text-decoration: none !important; }
  .sth-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
  .sth-section-title { display: inline-block; background: none; color: var(--green-deep); padding: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0; }
  .sth-section-title.on-dark { color: #fff; }
  .sth-section-more { font-size: 14px; font-weight: 600; color: var(--green-deep); text-decoration: none; transition: opacity .2s; }
  .sth-section-more:hover { opacity: 0.7; }
}

@layer components {
  /* === TOPBAR === */
  .sth-topbar {
    background: var(--green-deep);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 0.35s ease, opacity 0.35s;
  }
  @starting-style {
    .sth-topbar { opacity: 0; transform: translateY(-100%); }
  }
  .sth-topbar-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .sth-topbar-camlogo { flex-shrink: 0; }
  .sth-topbar-camlogo img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; transition: opacity .3s; }
  .sth-topbar-brand { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.02em; }
  .sth-topbar-quote { flex: 1; text-align: center; padding: 0 24px; overflow: hidden; min-width: 0; }
  .sth-topbar-quote p { font-size: 14px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.6); transition: opacity 0.5s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sth-topbar-right { display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; }
  .sth-topbar-right a { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); text-decoration: none; transition: color .2s; white-space: nowrap; padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; }
  .sth-topbar-right a:hover { color: #fff; }
  @media(max-width:1379px) and (min-width:769px) { .sth-topbar-right a[href$="/encyklopedie/"] { display: none; } }
  @media(max-width:768px) {
    .sth-topbar { flex-direction: column; height: auto; padding: 10px 16px; gap: 8px; }
    .sth-topbar-quote { display: none; }
    .sth-topbar-right { gap: 12px; width: 100%; max-width: 100%; justify-content: flex-start; box-sizing: border-box; }
  }

  /* === HERO === */
  .sth-hero { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
  .sth-hero-slides { position: absolute; inset: 0; }
  .sth-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
  .sth-hero-slide.active { opacity: 1; }
  .sth-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
  .sth-hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.45) 100%); }
  .sth-hero-content { position: relative; z-index: 10; padding: 60px 24px; }
  .sth-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(3rem,8vw,6rem); font-weight: 700; font-style: italic; color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,0.3); margin-bottom: 8px; }
  .sth-hero h2 { font-family: var(--font-sans); font-size: clamp(1.1rem,2.5vw,1.5rem); font-weight: 400; color: rgba(255,255,255,0.85); letter-spacing: 0.05em; text-shadow: 0 1px 10px rgba(0,0,0,0.2); }
  .sth-hero-quote { font-family: var(--font-sans); font-size: clamp(0.8rem,1.7vw,1rem); font-weight: 300; font-style: italic; color: rgba(255,255,255,0.72); letter-spacing: 0.03em; line-height: 1.5; margin: 16px auto 0; max-width: 620px; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,0.35); transition: opacity .5s; }
  .sth-hero-dots { display: none; }

  /* === NEWS — healsai.eu dark style, hero prosvítá === */
  .sth-news {
    position: relative;
    padding: 56px 24px;
    background: transparent;
    overflow: hidden;
    margin-top: -120px; /* překryv přes hero */
  }
  /* tmavý gradient — hero prosvítá shora, pak plné dno */
  .sth-news::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom,
        rgba(250,248,245,0.55) 0%,
        rgba(250,248,245,0.85) 70px,
        rgba(250,248,245,0.98) 150px,
        #faf8f5 210px
      );
    pointer-events: none;
    z-index: 0;
  }
  .sth-news-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
  /* ── Aktuality (23.8.2026, Marek: vzor Fotokronika — světlé pozadí, bílé karty, Inter 17/14) ── */
  .sth-news-3a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } /* 24.8. 23:45 Marek: STALO SE = třetina */
  .sth-news-3a-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .sth-side5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* 2.9.2026 03:30 Marek: zpět 3 („to bylo super“), STALO SE = přesně výška sloupce */
/* řada 7 miniatur + „… více“ přes celou šíři pod hlavní zprávou i STALO SE */
.sth-news-minis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sth-mini-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.6); border-radius: 14px; overflow: hidden; text-decoration: none !important; color: #111; transition: transform .3s, box-shadow .3s; }
.sth-mini-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.10); }
.sth-mini-card img { width: 100%; height: 96px; object-fit: cover; }
.sth-mini-body { padding: 10px 11px 12px; display: flex; flex-direction: column; flex: 1; }
.sth-mini-body .sth-glass2-cat { font-size: 9.5px; margin-bottom: 4px; }
.sth-mini-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: #111; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sth-mini-body .sth-glass2-date { margin-top: 6px; }
.sth-mini-more { align-items: center; justify-content: center; text-align: center; background: rgba(255,255,255,0.7); color: #111; gap: 4px; } /* 2.9.2026 03:50 Marek: bez zelené, jen černý text */
.sth-mini-more span { font-size: 18px; font-weight: 700; color: #111; }
.sth-mini-more small { font-size: 12px; color: #444; }
  .sth-news .sth-glass2-cat { color: #8b6914; }
  .sth-hero2 .sth-glass2-img { height: 220px; }
  .sth-hero2 .sth-glass2-title { font-size: 17px; }
  .sth-stalo-wrap { position: relative; min-width: 0; min-height: 420px; } /* výška = levý sloupec; panel se doplňuje staršími dny jen do této výšky */
  .sth-stalo { min-width: 0; position: absolute; inset: 0; overflow: hidden; /* 2.9.2026 Marek: STALO SE zkrátit (nikdy vyšší než okno), víc = rolování UVNITŘ boxu, ne okno dolů */ background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.6); border-radius: 18px; padding: 16px 18px; box-shadow: 0 8px 30px rgba(0,0,0,0.04); display: flex; flex-direction: column; align-self: stretch; }
  .sth-stalo-head { display: flex; flex-direction: column; gap: 10px; }
  .sth-stalo-lbl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .sth-stalo-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #8b6914; white-space: nowrap; }
  .sth-stalo-sub { font-size: 12px; color: #888; }
  .sth-stalo-flt { font-size: 12px; color: #888; display: inline-flex; gap: 4px; align-items: baseline; }
  .sth-stalo-flt button { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 600; color: #888; cursor: pointer; border-radius: 4px; }
  .sth-stalo-flt button:hover { color: #17462F; }
  .sth-stalo-flt button.is-on { color: #17462F; text-decoration: underline; text-underline-offset: 3px; }
  .sth-stalo-div { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: 10.5px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1px; }
  .sth-stalo-div::before, .sth-stalo-div::after { content: ''; flex: 1; height: 1px; background: rgba(17,17,17,0.08); }
  .sth-stalo-div + .sth-stalo-row { border-top: none; }
  .sth-stalo-days { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
  .sth-stalo-day, .sth-stalo-cal { white-space: nowrap; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; background: rgba(17,17,17,0.05); color: #111; border: 1px solid rgba(17,17,17,0.1); text-decoration: none !important; transition: background .2s, color .2s; }
  .sth-stalo-day.is-on { background: #17462F; color: #fff; border-color: #17462F; }
  .sth-stalo-day:disabled { opacity: .4; cursor: default; }
  .sth-stalo-day:disabled:not(.is-on) { text-decoration: line-through; }
  .sth-stalo-day:hover:not(.is-on):not(:disabled), .sth-stalo-cal:hover { background: rgba(17,17,17,0.1); }
  .sth-stalo-cal { color: #17462F; }
  .sth-stalo-calbox { margin-top: 8px; background: rgba(17,17,17,0.03); border: 1px solid rgba(17,17,17,0.08); border-radius: 12px; padding: 10px; }
  .sth-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .sth-cal-title { font-size: 13px; font-weight: 700; color: #17462F; text-transform: capitalize; }
  .sth-cal-nav { border: none; background: rgba(17,17,17,0.06); color: #17462F; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
  .sth-cal-nav:disabled { opacity: .3; cursor: default; }
  .sth-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
  .sth-cal-dow { font-size: 10px; font-weight: 700; color: #888; text-align: center; padding: 2px 0; text-transform: uppercase; }
  .sth-cal-day { font-size: 12px; font-weight: 600; text-align: center; padding: 5px 0; border-radius: 8px; border: none; background: transparent; }
  span.sth-cal-day.is-off { color: #c8c4bd; }
  button.sth-cal-day { color: #111; background: rgba(23,70,47,0.08); cursor: pointer; transition: background .15s; }
  button.sth-cal-day:hover { background: rgba(23,70,47,0.18); }
  button.sth-cal-day.is-on { background: #17462F; color: #fff; }
  .sth-stalo-list { margin-top: 6px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 6px; }
  .sth-stalo-row { padding: 7px 0; border-top: 1px solid rgba(17,17,17,0.08); }
  .sth-stalo-row:first-child { border-top: none; }
  .sth-stalo-row-head { display: flex; gap: 8px; align-items: center; min-width: 0; cursor: pointer; border-radius: 10px; margin: 0 -8px; padding: 2px 8px; transition: background .2s; }
  .sth-stalo-row-head:hover, .sth-stalo-row-head:focus-visible { background: rgba(23,70,47,0.06); outline: none; }
  .sth-stalo-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: #111; padding: 3px 6px; border-radius: 999px; flex: 0 0 auto; background: rgba(17,17,17,0.07); }
  .sth-stalo-txt { flex: 1; min-width: 0; }
  .sth-stalo-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sth-stalo-row.is-open .sth-stalo-title { white-space: normal; }
  .sth-stalo-more { font-size: 12px; font-weight: 700; color: #17462F; white-space: nowrap; flex: 0 0 auto; }
  .sth-stalo-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1), opacity .25s; opacity: 0; }
  .sth-stalo-body > * { overflow: hidden; min-height: 0; padding: 0 0 0 36px; }
  .sth-stalo-row.is-open .sth-stalo-body { grid-template-rows: 1fr; opacity: 1; }
  .sth-stalo-row.is-open .sth-stalo-body > * { padding: 6px 0 2px 36px; }
  .sth-stalo-body p { font-size: 13.5px; color: #333; line-height: 1.55; margin: 0 0 6px; }
  .sth-stalo-body p:last-child { margin-bottom: 0; }
  @media (prefers-reduced-motion: reduce) { .sth-stalo-body { transition: none; } }
  .sth-stalo-empty { padding: 12px 0; font-size: 14px; color: #888; }
  .sth-stalo-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
  .sth-stalo-all { font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 999px; color: #17462F; background: none; border: 1px solid rgba(23,70,47,0.4); text-decoration: none !important; cursor: pointer; font-family: inherit; transition: background .2s; }
  .sth-stalo-all[hidden] { display: none; }
  .sth-stalo-wrap.is-expanded .sth-stalo { position: relative; inset: auto; }
  .sth-stalo-wrap.is-expanded .sth-stalo-list { -webkit-mask-image: none; mask-image: none; }
  .sth-stalo-all:hover { background: rgba(23,70,47,0.06); }
  @media (max-width: 1000px) { .sth-news-3a { grid-template-columns: 1fr; } .sth-stalo-wrap { min-height: 0; } .sth-stalo { position: relative; inset: auto; height: auto; } .sth-stalo-list { overflow: hidden; } .sth-news-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* mobil: pravidlo dvou (2.9.) */ .sth-stalo-list { -webkit-mask-image: none; mask-image: none; } }
  @media (max-width: 600px) { .sth-side5 { grid-template-columns: 1fr; } .sth-stalo { padding: 14px; } .sth-stalo-day, .sth-stalo-cal { padding: 5px 8px; font-size: 11.5px; } .sth-stalo-body > *, .sth-stalo-row.is-open .sth-stalo-body > * { padding-left: 0; } }
  .sth-glass {
    position: relative;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff;
    transition: all 0.35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
  }
  .sth-glass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 60%); pointer-events: none; border-radius: 16px; }
  .sth-glass::after { display: none; }
  .sth-glass:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,140,92,0.2);
  }
  .sth-glass-img { width: 100%; height: 170px; object-fit: cover; transition: transform 0.5s cubic-bezier(.4,0,.2,1); opacity: 0.92; }
  .sth-glass:hover .sth-glass-img { transform: scale(1.04); opacity: 1; }
  .sth-glass-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
  /* pill tag — healsai badge style */
  .sth-glass-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(74,140,92,0.85);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
    width: fit-content;
  }
  .sth-glass-title { font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 6px; color: #fff; letter-spacing: -0.01em; }
  .sth-glass-excerpt { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; flex: 1; }
  .sth-glass-date { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 10px; font-weight: 500; letter-spacing: 0.03em; }

  /* === CAMS === */
  .sth-cams { padding: 56px 40px; overflow: hidden; position: relative; }
  .sth-cams-bg { position: absolute; inset: 0; background: var(--green-deep); }
  .sth-cams-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .12; mix-blend-mode: overlay; }
  .sth-cams-inner { position: relative; z-index: 10; max-width: 100%; }
  .sth-cam-row { position: relative; z-index: 10; display: flex; gap: 16px; margin-bottom: 16px; -webkit-mask-image: linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%); mask-image: linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%); overflow: hidden; }
  .sth-cam-track { display: flex; gap: 16px; }
  .sth-cam-row.left .sth-cam-track { animation: sthCamLeft 90s linear infinite; }
  .sth-cam-row.right .sth-cam-track { animation: sthCamRight 90s linear infinite; }
  .sth-cam-row:hover .sth-cam-track { animation-play-state: paused; }
  @keyframes sthCamLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes sthCamRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
  .sth-cam-card {
    flex-shrink: 0;
    width: 360px;
    height: 220px;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
  }
  .sth-cam-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,0.08),transparent 50%,rgba(255,255,255,0.04)); border-radius: 18px; z-index: 2; pointer-events: none; transition: opacity 0.4s; }
  .sth-cam-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.25); }
  .sth-cam-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
  .sth-cam-card:hover .sth-cam-img { transform: scale(1.05); }
  .sth-cam-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(transparent,rgba(0,0,0,0.7)); z-index: 4; opacity: 0; transition: opacity 0.3s; }
  /* :has() for hover without JS */
  .sth-cam-card:has(:hover) .sth-cam-overlay, .sth-cam-card:hover .sth-cam-overlay { opacity: 1; }
  .sth-cam-name { font-size: 16px; font-weight: 700; color: #fff; }
  .sth-cam-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 2px; }
  .sth-cam-dot { width: 5px; height: 5px; border-radius: 50%; background: #ef4444; animation: sthBlink 1.5s infinite; }
  @keyframes sthBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .sth-cams-header { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: space-between; }
  @media(max-width:768px) { .sth-cam-card { width: 260px; height: 160px; } }

  /* === FOTO (Fotokronika) === */
  .sth-foto { padding: 56px 24px; background: #faf8f5; content-visibility: auto; contain-intrinsic-size: 0 500px; }
  .sth-foto-inner { max-width: 1200px; margin: 0 auto; }
  .sth-foto-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media(max-width:900px) { .sth-foto-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px) { .sth-foto-grid { grid-template-columns: 1fr; } }

  /* === MINI (Miniatury) === */
  .sth-mini { padding: 56px 24px; background: #f0f4f8; content-visibility: auto; contain-intrinsic-size: 0 500px; }
  .sth-mini-inner { max-width: 1200px; margin: 0 auto; }
  .sth-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media(max-width:900px) { .sth-mini-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px) { .sth-mini-grid { grid-template-columns: 1fr; } }

  /* Glass2 card */
  .sth-glass2 {
    position: relative;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none !important;
    color: #1a1a1a;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
  }
  .sth-glass2::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.3) 100%); pointer-events: none; transition: opacity 0.4s; }
  .sth-glass2::after { content: ""; position: absolute; inset: -1px; border-radius: 19px; background: linear-gradient(135deg,rgba(255,255,255,0.8),rgba(255,255,255,0.2),rgba(255,255,255,0.6)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; opacity: 0.5; pointer-events: none; transition: opacity 0.4s; }
  .sth-glass2:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); border-color: rgba(255,255,255,0.8); }
  .sth-glass2:hover::after { opacity: 1; }
  .sth-glass2-img { width: 100%; height: 170px; object-fit: cover; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
  .sth-glass2:hover .sth-glass2-img { transform: scale(1.04); }
  .sth-glass2-body { padding: 16px 18px; position: relative; z-index: 2; }
  .sth-glass2-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
  .sth-foto .sth-glass2-cat { color: #8b6914; }
  .sth-mini .sth-glass2-cat { color: #2563eb; }
  .sth-kultura .sth-glass2-cat { color: #8b4513; }
  .sth-glass2-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; color: #111; }
  .sth-glass2-excerpt { font-size: 14px; color: #333; line-height: 1.55; }
  .sth-glass2-date { font-size: 11px; color: #888; margin-top: 8px; }

  /* === TIPY NA VÝLET — světlý, jemný background === */
  .sth-tipy {
    position: relative;
    overflow: hidden;
    padding: 56px 24px;
    width: 100%;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
    background: #f4f7f5;
  }
  .sth-tipy-bg { position: absolute; inset: 0; }
  .sth-tipy-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.06; filter: saturate(0.5); }
  /* jemný zelený gradient overlay */
  .sth-tipy::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 60% at 0% 50%, rgba(23,70,47,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 100% 80%, rgba(74,140,92,0.05) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
  }
  .sth-tipy-in { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
  @media(max-width:600px){ .sth-tip-card{min-width:300px;max-width:300px} .sth-tip-img{height:170px} }
@media(max-width:768px) { .sth-tipy-in { grid-template-columns: 1fr; } }
  .sth-tipy-header h2 { color: var(--green-deep); font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
  .sth-tipy-header p { color: rgba(23,70,47,0.55); font-size: 13px; margin-bottom: 16px; }
  .sth-tipy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: var(--green-deep); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; transition: all .3s; letter-spacing: 0.04em; text-transform: uppercase; }
  .sth-tipy-btn:hover { background: #0f2e1e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23,70,47,0.2); }
  .sth-tipy-nav { display: flex; gap: 8px; margin-top: 14px; }
  .sth-tipy-nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(23,70,47,0.18); background: rgba(23,70,47,0.04); color: var(--green-deep); cursor: pointer; font-size: 14px; transition: all .2s; display: flex; align-items: center; justify-content: center; }
  .sth-tipy-nav button:hover { background: rgba(23,70,47,0.1); border-color: rgba(23,70,47,0.3); }
  .sth-tip-cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right,#000 85%,transparent 100%);
    mask-image: linear-gradient(to right,#000 85%,transparent 100%);
  }
  .sth-tip-cards::-webkit-scrollbar { display: none; }
  .sth-tip-card {
    min-width: 360px;
    max-width: 360px; /* 29.8.2026 Marek: Tipy ~o 70 % větší, lehce menší než karty Miniatur (389) */
    scroll-snap-align: start;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(23,70,47,0.10);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: #111;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(23,70,47,0.06);
  }
  .sth-tip-card:hover { border-color: rgba(23,70,47,0.22); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(23,70,47,0.12); }
  .sth-tip-img { width: 100%; height: 200px; object-fit: cover; transition: transform .5s; }
  .sth-tip-card:hover .sth-tip-img { transform: scale(1.03); }
  .sth-tip-body { padding: 16px 18px; }
  .sth-tip-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; background: rgba(74,140,92,0.85); border-radius: 999px; padding: 2px 9px; display: inline-block; margin-bottom: 7px; }
  .sth-tip-title { font-size: 18px; font-weight: 700; margin: 0 0 5px; line-height: 1.4; color: #111; }
  .sth-tip-excerpt { font-size: 14.5px; color: #444; margin: 0; line-height: 1.55; }
  .sth-tip-date { font-size: 12px; color: #888; margin-top: 8px; }
/* 2.9.2026 LIDÉ ŠUMAVY v horním karuselu: výřez hlavy „vystupuje“ z karty (3D), jinak klasická fotka */
.sth-lide-card { overflow: visible; margin-top: 26px; min-width: 250px; max-width: 250px; } /* 2.9.2026 03:30 Marek: aspoň 3,5 karty vidět */
.sth-lide-card .sth-tip-body { padding: 12px 14px; } .sth-lide-card .sth-tip-title { font-size: 15px; } .sth-lide-card .sth-tip-excerpt { font-size: 13px; line-height: 1.45; } .sth-lide-card .sth-tip-cat { font-size: 9.5px; }
.sth-lide-media { position: relative; height: 150px; border-radius: 16px 16px 0 0; overflow: hidden; background: #17462F; }
.sth-lide-card.has-cut .sth-lide-media { overflow: visible; }
.sth-lide-bg { position: absolute; inset: 0; border-radius: 16px 16px 0 0; overflow: hidden; } .sth-lide-bg::before { content: ''; position: absolute; inset: -14px; background: var(--bg) center 30% / cover no-repeat; filter: blur(10px) brightness(.62) saturate(1.1); } /* fotorealisticky: rozostřená původní fotka za výřezem, oříznutá (bez halo kolem karty) */
.sth-lide-card.has-cut .sth-lide-media::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 8px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(10px); }
.sth-lide-cut { position: absolute; left: 50%; bottom: 0; height: 172px; width: auto; max-width: 92%; transform: translateX(-50%); object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.35)); z-index: 2; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.sth-lide-card:hover .sth-lide-cut { transform: translateX(-50%) translateY(-6px) scale(1.04); }
.sth-lide-media .sth-tip-img { height: 150px; }

  /* === KULTURNĚ-HISTORICKÝ DROBNOHLED === */
  .sth-drobno { padding: 56px 24px; background: #f5f0e8; content-visibility: auto; contain-intrinsic-size: 0 500px; }
  .sth-drobno-inner { max-width: 1200px; margin: 0 auto; }
  .sth-drobno-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media(max-width:900px) { .sth-drobno-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px) { .sth-drobno-grid { grid-template-columns: 1fr; } }
  .sth-drobno .sth-glass2-cat { color: #7c4f1e; }

  /* === KULTURA === */
  .sth-kultura { padding: 56px 24px; background: var(--bg-light); content-visibility: auto; contain-intrinsic-size: 0 500px; }
  .sth-kultura-inner { max-width: 1200px; margin: 0 auto; }
  .sth-kultura-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media(max-width:900px) { .sth-kultura-grid { grid-template-columns: repeat(2,1fr); } }
  @media(max-width:600px) { .sth-kultura-grid { grid-template-columns: 1fr; } }

  /* === POČASÍ === */
  .sth-pocasi { position: relative; padding: 40px 24px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 0 500px; }
  .sth-pocasi-bg { position: absolute; inset: 0; background: linear-gradient(135deg,#17462F 0%,#1a5438 50%,#17462F 100%); }
  .sth-pocasi-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .12; mix-blend-mode: overlay; }
  .sth-pocasi-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; }
  .sth-pocasi-grid2 { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; grid-template-rows: 1fr; gap: 14px; height: 340px; margin-top: 18px; } /* 24.8. 23:50 Marek: rubrika nižší o ~1/4 (460→340) */
  .sth-pocasi-map { grid-column: 1; grid-row: 1; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); position: relative; }
  .sth-pocasi-map iframe { width: 100%; height: 100%; border: none; }
  /* Liquid glass dlazdice */
  .sth-pocasi-quad { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); position: relative; background: rgba(255,255,255,0.06); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 32px rgba(0,0,0,0.22); transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s; text-decoration: none; color: inherit; display: block; }
  .sth-pocasi-quad::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.12) 0%, transparent 55%); pointer-events: none; z-index: 1; }
  .sth-pocasi-quad:hover { transform: translateY(-3px); border-color: rgba(201,168,76,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 18px 44px rgba(0,0,0,0.35); }
  .sth-pocasi-quad iframe { width: 100%; height: 100%; border: none; }
  .sth-pocasi-quad-label { position: absolute; top: 12px; left: 14px; z-index: 10; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1.5px; background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); }
  /* Heatmap dlazdice (iframe overlay click) */
  .sth-pocasi-heatmap { position: relative; padding: 0; }
  .sth-pocasi-heatmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; pointer-events: none; z-index: 0; }
  .sth-pocasi-heatmap::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.0) 60%, rgba(15,23,42,0.65) 100%); pointer-events: none; }
  .sth-pocasi-heatmap-cta { position: absolute; bottom: 14px; left: 14px; z-index: 3; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.92); text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 12px; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); }
  /* Webcamy dlazdice */
  .sth-pocasi-webcam { position: relative; }
  .sth-pocasi-webcam-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity .4s, transform .6s ease; z-index: 0; }
  .sth-pocasi-webcam:hover .sth-pocasi-webcam-img { opacity: 0.75; transform: scale(1.04); }
  .sth-pocasi-webcam-overlay { position: absolute; inset: 0; z-index: 2; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(15,23,42,0.0) 0%, rgba(15,23,42,0.35) 50%, rgba(15,23,42,0.85) 100%); }
  .sth-pocasi-webcam-name { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
  .sth-pocasi-webcam-cta { display: inline-block; margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1.5px; }
  .sth-pocasi-webcam-live { position: absolute; top: 12px; right: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: #ff6b6b; text-transform: uppercase; letter-spacing: 1.5px; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid rgba(255,107,107,0.3); }
  .sth-pocasi-webcam-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; animation: pulseLive 1.6s infinite; }
  @keyframes pulseLive { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .sth-pocasi-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,0.3); font-size: 14px; }
  /* === Dlaždice 1: Feature article (z rubriky Počasí) === */
  .sth-pocasi-feature { display: flex; flex-direction: column; padding: 0; background: rgba(255,255,255,0.06); }
  .sth-pocasi-feature .sth-pocasi-placeholder { padding: 24px; color: rgba(255,255,255,0.55); }
  .sth-pocasi-feature-img { width: 100%; height: 130px; object-fit: cover; display: block; }
  .sth-pocasi-feature-body { padding: 14px 18px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
  .sth-pocasi-feature-cat { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; color: #c9a84c; text-transform: uppercase; letter-spacing: 1.6px; }
  .sth-pocasi-feature-title { font-family: 'Playfair Display',Georgia,serif; font-size: 19px; font-weight: 700; color: #fff; line-height: 1.18; letter-spacing: -0.3px; margin: 0; }
  .sth-pocasi-feature-excerpt { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; flex: 1; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sth-pocasi-feature-cta { display: inline-block; margin-top: 6px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.78); text-transform: uppercase; letter-spacing: 1.2px; }

  /* === Dlaždice 3: pocasi.sumava.eu teaser === */
  .sth-pocasi-teaser { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 18px; background: linear-gradient(135deg, #1e3a5f 0%, #2563a8 50%, #1d4789 100%); position: relative; overflow: hidden; }
  .sth-pocasi-teaser::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 100%, rgba(255,255,255,0.10) 0%, transparent 55%), radial-gradient(circle at 80% 10%, rgba(255,255,255,0.08) 0%, transparent 50%); z-index: 1; pointer-events: none; }
  .sth-pocasi-teaser-content { position: relative; z-index: 2; }
  .sth-pocasi-teaser-badge { display: inline-block; padding: 5px 14px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 999px; margin-bottom: 18px; }
  .sth-pocasi-teaser-title { font-family: 'Playfair Display',Georgia,serif; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; color: #fff; line-height: 1.05; margin: 0 0 8px; letter-spacing: -0.5px; word-break: break-word; overflow-wrap: anywhere; }
  .sth-pocasi-teaser-subtitle { font-family: 'Playfair Display',Georgia,serif; font-style: italic; font-size: 14px; color: rgba(255,255,255,0.85); margin: 0 0 16px; }
  .sth-pocasi-teaser-cta { display: inline-block; padding: 8px 20px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px; border-radius: 999px; }

  /* === Dlaždice 4: Další články — list === */
  .sth-pocasi-list-quad { padding: 14px 14px 12px; display: flex; flex-direction: column; }
  .sth-pocasi-list-quad .sth-pocasi-quad-label { position: static; margin-bottom: 8px; align-self: flex-start; }
  .sth-pocasi-list { display: flex; flex-direction: column; gap: 0; flex: 1; }
  .sth-pocasi-list .sth-pocasi-placeholder { color: rgba(255,255,255,0.55); padding: 8px 0; }
  .sth-pocasi-list-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: inherit; transition: opacity 0.15s; }
  .sth-pocasi-list-item:last-child { border-bottom: 0; }
  .sth-pocasi-list-item:hover { opacity: 0.85; }
  .sth-pocasi-list-img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: rgba(255,255,255,0.05); }
  .sth-pocasi-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .sth-pocasi-list-title { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sth-pocasi-list-date { font-family: 'Inter', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }

  /* === uzdravuje.eu lakaci banner (legacy, ponechano kvuli kompatibilite jinde) === */
  .sth-uzdravuje-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px; background: linear-gradient(135deg, #17462F 0%, #1a5438 45%, #0f3322 100%); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; text-decoration: none; cursor: pointer; }
  .sth-uzdravuje-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(201,168,76,0.18) 0%, transparent 55%), radial-gradient(circle at 80% 18%, rgba(255,255,255,0.08) 0%, transparent 50%); z-index: 1; pointer-events: none; }
  .sth-uzdravuje-banner:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(23,70,47,0.55); border-color: rgba(201,168,76,0.45); }
  .sth-uzdravuje-content { position: relative; z-index: 2; }
  .sth-uzdravuje-badge { display: inline-block; padding: 6px 18px; background: rgba(201,168,76,0.18); border: 1px solid rgba(201,168,76,0.45); color: #d4b865; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 28px; }
  .sth-uzdravuje-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; color: #fff; line-height: 1.05; margin: 0 0 14px; letter-spacing: -0.8px; word-break: break-word; overflow-wrap: anywhere; }
  .sth-uzdravuje-subtitle { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-style: italic; color: rgba(255,255,255,0.78); margin: 0 0 36px; }
  .sth-uzdravuje-cta { display: inline-block; padding: 12px 30px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; border-radius: 999px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
  .sth-uzdravuje-banner:hover .sth-uzdravuje-cta { background: #c9a84c; border-color: #c9a84c; color: #17462F; }
  @media(max-width:1024px) { .sth-pocasi-grid2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: auto; } .sth-pocasi-map { grid-column: 1 / span 2; grid-row: auto; height: 200px; } .sth-pocasi-quad { height: 200px; } .sth-pocasi-webcam-name { font-size: 18px; } }
  @media(max-width:600px) { .sth-pocasi-grid2 { grid-template-columns: 1fr; } .sth-pocasi-map { grid-column: 1; height: 160px; } .sth-uzdravuje-title { font-size: 36px; } }

  /* Forecast widget */
  .sth-forecast { padding: 12px; color: #fff; height: 100%; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
  .sth-forecast-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(255,255,255,0.06); border-radius: 8px; font-size: 13px; }
  .sth-forecast-time { font-weight: 700; min-width: 50px; color: rgba(255,255,255,0.7); font-size: 12px; }
  .sth-forecast-temp { font-weight: 800; font-size: 15px; min-width: 40px; }
  .sth-forecast-icon { font-size: 20px; }
  .sth-forecast-desc { font-size: 12px; color: rgba(255,255,255,0.6); flex: 1; }

  /* Pocasi article */
  .sth-pocasi-article-content { padding: 14px; color: #fff; height: 100%; display: flex; flex-direction: column; }
  .sth-pocasi-article-img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
  .sth-pocasi-article-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 6px; }
  .sth-pocasi-article-excerpt { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; flex: 1; overflow: hidden; }
  .sth-pocasi-article-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 10px; transition: all 0.2s; }
  .sth-pocasi-article-link:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

  /* === DOPORUČUJEME === */
  .sth-dopor { position: relative; overflow: hidden; padding: 56px 24px; background: #fff; }
  .sth-dopor-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; }
  .sth-dopor-content { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  @media(max-width:768px) { .sth-dopor-content { grid-template-columns: 1fr; } }
  .sth-dopor-glass { background: rgba(23,70,47,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(23,70,47,0.1); border-radius: 18px; padding: 28px 28px 24px; position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .sth-dopor-glass::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg,rgba(23,70,47,0.06) 0%,transparent 50%,rgba(23,70,47,0.03) 100%); pointer-events: none; }
  .sth-dopor-glass::after { content: ""; position: absolute; inset: -1px; border-radius: 19px; background: linear-gradient(135deg,rgba(23,70,47,0.15),rgba(23,70,47,0.03),rgba(23,70,47,0.1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; opacity: 0.5; pointer-events: none; }
  .sth-dopor-glass p { color: #333; font-size: 17px; line-height: 2; margin-bottom: 12px; position: relative; z-index: 2; }
  .sth-dopor-glass p.sth-dopor-lead { font-size: 18px; font-weight: 700; color: #1a1a1a; }
  .sth-dopor-glass p.sth-dopor-bold { font-size: 18px; font-weight: 700; color: #1a1a1a; }
  .sth-dopor-btn { display: inline-block; padding: 14px 36px; background: var(--green-deep); color: #fff; border-radius: 10px; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 4px 20px rgba(23,70,47,0.3); margin-top: 8px; transition: all 0.3s; position: relative; z-index: 2; }
  .sth-dopor-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(23,70,47,0.4); }
  .sth-dopor-slider { position: relative; width: 100%; height: 100%; min-height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(23,70,47,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
  .sth-dopor-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
  .sth-dopor-slide.active { opacity: 1; }
  .sth-dopor-slide img { width: 100%; height: 100%; object-fit: cover; }
  .sth-dopor-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
  .sth-dopor-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .sth-dopor-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(23,70,47,0.25); transition: all 0.3s; }
  .sth-dopor-dot.active::before { background: var(--green-deep); transform: scale(1.3); }

  /* === GALERIE === */
  .sth-galerie { position: relative; overflow: hidden; padding: 56px 24px; }
  .sth-galerie-bg { position: absolute; inset: 0; background: var(--green-deep); }
  .sth-galerie-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .12; mix-blend-mode: overlay; }
  .sth-galerie-inner { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; }
  .sth-galerie-scroll { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right,#000 90%,transparent 100%); mask-image: linear-gradient(to right,#000 90%,transparent 100%); padding-bottom: 8px; }
  .sth-galerie-scroll::-webkit-scrollbar { display: none; }
  .sth-galerie-card { flex-shrink: 0; width: 300px; height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); position: relative; cursor: pointer; transition: all 0.4s cubic-bezier(.4,0,.2,1); }
  .sth-galerie-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,0.06),transparent 50%); border-radius: 14px; z-index: 2; pointer-events: none; }
  .sth-galerie-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.3); }
  .sth-galerie-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
  .sth-galerie-card:hover img { transform: scale(1.05); }

  /* === FOOTER === */
  /* Kultivovaný jednořádkový footer */
  .sth-footer { padding: 22px 28px; background: #f2f7f4; border-top: 1px solid rgba(23,70,47,0.08); }
  .sth-footer-inner { max-width: 1280px; margin: 0 auto; }
  .sth-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-family: 'Inter', system-ui, sans-serif; }
  .sth-footer-copy { font-size: 13px; font-weight: 500; color: rgba(23,70,47,0.82); letter-spacing: 0.2px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .sth-footer-copy-r { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(23,70,47,0.55); font-size: 9px; font-weight: 700; color: rgba(23,70,47,0.82); line-height: 1; }
  .sth-footer-partners-link { font-size: 13px; font-weight: 600; color: var(--green-deep); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color .25s, color .25s; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
  .sth-footer-partners-link:hover { border-bottom-color: #c9a84c; color: #c9a84c; }
  .sth-footer-hogn { font-size: 13px; color: rgba(23,70,47,0.82); white-space: nowrap; }
  .sth-footer-hogn-label { font-style: italic; color: rgba(23,70,47,0.82); margin-right: 4px; }
  .sth-footer-hogn a { font-weight: 600; color: var(--green-deep); text-decoration: none; border-bottom: 1px solid rgba(23,70,47,0.18); padding-bottom: 1px; transition: color .25s, border-color .25s; }
  .sth-footer-hogn a:hover { color: #c9a84c; border-color: #c9a84c; }
  .sth-footer-contact { font-size: 13px; color: var(--green-deep); font-weight: 600; text-decoration: none; transition: color .25s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  .sth-footer-contact::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #c9a84c; }
  .sth-footer-contact:hover { color: #c9a84c; }
  @media (max-width: 720px) {
    .sth-footer-row { flex-direction: column; gap: 10px; text-align: center; }
  }
  .sth-footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(23,70,47,0.08); color: var(--green-deep); font-size: 18px; transition: all 0.3s; text-decoration: none; }
  .sth-footer-social a:hover { background: var(--green-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(23,70,47,0.2); }
  .sth-footer-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(23,70,47,0.06); text-align: center; font-size: 12px; color: #8a9b92; }
  .sth-footer-bottom a { color: var(--green-deep); text-decoration: none; font-weight: 600; }
  @media(max-width:768px) { .sth-footer-row { flex-direction: column; text-align: center; } .sth-footer-partners { flex-wrap: wrap; justify-content: center; } }
  /* SEO prerender — Nejnovější články: sr-only (v DOM pro crawlery, skryté pro návštěvníky). Generuje sumava-seo-prerender.php */
  .sth-seo-links { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .sth-seo-col h3 { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
  .sth-seo-col h3 a { color: var(--green-deep); text-decoration: none; }
  .sth-seo-col h3 a:hover { color: #c9a84c; }
  .sth-seo-col ul { list-style: none; margin: 0; padding: 0; }
  .sth-seo-col li { margin: 0 0 5px; }
  .sth-seo-col li a { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.35; color: rgba(23,70,47,0.78); text-decoration: none; transition: color .2s; }
  .sth-seo-col li a:hover { color: #c9a84c; }

  /* 22.8.2026 (Marek): scroll-driven fadeUp (animation-timeline:view) SMAZÁN — animoval transform proti :hover → karty/Miniatury blikaly */

  /* Loading skeleton */
  .sth-skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}

@layer utilities {
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

/* ═══════════════════════════════════════════════
   TEST10 ENHANCEMENTS — topbar search + polish
   ═══════════════════════════════════════════════ */
@layer components {
  /* TOPBAR SEARCH — kompaktni glass v dark topbaru, vedle "Uzdravuje" */
  .sth-topbar-search { position: relative; flex-shrink: 0; margin-left: 4px; }
  .sth-topbar-search-form { display: flex; align-items: center; }
  .sth-topbar-search-label { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 14px; width: 190px; max-width: 190px; transition: background .25s, border-color .25s, width .35s cubic-bezier(.4,0,.2,1), box-shadow .25s; cursor: text; }
  .sth-topbar-search-label:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
  .sth-topbar-search-label:focus-within { background: rgba(255,255,255,0.15); border-color: rgba(201,168,76,0.6); width: 320px; max-width: 320px; box-shadow: 0 0 0 4px rgba(201,168,76,0.18), 0 8px 24px rgba(0,0,0,0.25); }
  .sth-topbar-search-icon { width: 14px; height: 14px; color: rgba(255,255,255,0.7); flex-shrink: 0; transition: color .2s; }
  .sth-topbar-search-label:focus-within .sth-topbar-search-icon { color: #c9a84c; }
  .sth-topbar-search input { flex: 1; min-width: 0; border: none; outline: none; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; background: transparent; color: #fff; padding: 3px 0; }
  .sth-topbar-search input::placeholder { color: rgba(255,255,255,0.5); }
  .sth-topbar-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .sth-topbar-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

  /* SEARCH RESULTS DROPDOWN */
  .sth-search-results { position: absolute; top: calc(100% + 10px); right: 0; width: min(420px, calc(100vw - 24px)); background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.12); max-height: 480px; overflow-y: auto; padding: 8px; display: none; z-index: 200; animation: sth-search-pop .18s ease; }
  .sth-search-results.open { display: block; }
  @keyframes sth-search-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .sth-search-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #17462F; transition: background .15s; }
  .sth-search-result:hover, .sth-search-result.active { background: rgba(23,70,47,0.07); }
  .sth-search-result-img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: rgba(23,70,47,0.08); }
  .sth-search-result-body { flex: 1; min-width: 0; }
  .sth-search-result-title { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sth-search-result-date { font-size: 12px; color: rgba(23,70,47,0.55); font-weight: 500; }
  .sth-search-empty, .sth-search-loading { padding: 28px 16px; text-align: center; color: rgba(23,70,47,0.45); font-size: 14px; font-family: 'Inter', sans-serif; }
  .sth-search-more { display: block; padding: 12px; text-align: center; color: var(--green-deep); font-weight: 700; font-size: 13px; text-decoration: none; border-top: 1px solid rgba(23,70,47,0.08); margin-top: 4px; }
  .sth-search-more:hover { background: rgba(201,168,76,0.1); border-radius: 10px; }

  /* TEST10 visual polish */
  .sth-news-tile, .sth-tip-card, .sth-galerie-card, .sth-dopor-glass { will-change: transform; }
  .sth-news-tile { transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; }
  .sth-news-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
  .sth-tip-card { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s; border: 1px solid transparent; }
  .sth-tip-card:hover { transform: translateY(-3px); border-color: rgba(23,70,47,0.15); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
  .sth-pocasi-quad, .sth-pocasi-map { transition: border-color .35s, box-shadow .35s; }
  .sth-pocasi-quad:hover, .sth-pocasi-map:hover { border-color: rgba(201,168,76,0.35); }
  .sth-section-title { background: linear-gradient(135deg, #17462F 0%, #1a5c3a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .sth-section-title.on-dark { background: linear-gradient(135deg, #fff 0%, #d4b865 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  @media (max-width: 768px) {
    .sth-topbar-search { margin-left: 0; }
    .sth-topbar-search-label { width: 150px; max-width: 150px; padding: 5px 12px; }
    .sth-topbar-search-label:focus-within { width: min(280px, calc(100vw - 80px)); max-width: 280px; }
    .sth-topbar-search input { font-size: 13px; }
    .sth-search-results { width: min(360px, calc(100vw - 16px)); max-height: 360px; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .sth-news-tile, .sth-tip-card, .sth-topbar-search-label, .sth-search-results { transition: none; animation: none; }
  }
}

/* ═══════════════════════════════════════
   MOBILE BOTTOM TAB BAR (iOS HIG)
═══════════════════════════════════════ */
.sth-tabbar { display: none; }
.sth-tabbar-more { display: none; }

@media (max-width: 768px) {
  /* Hide topbar nav links + search on mobile (search will live in More sheet) */
  .sth-topbar-right { display: none !important; } .sth-topbar { display: none !important; }

  /* Reserve space at bottom for fixed tab bar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .sth-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    align-items: stretch;
    justify-content: space-around;
    background: rgba(15, 23, 42, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid rgba(255,255,255,0.10);
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0,0,0,0.22);
  }
  .sth-tab {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    min-height: 52px;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
  }
  .sth-tab svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .sth-tab:hover, .sth-tab:focus-visible { color: #fff; outline: 0; }
  .sth-tab:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); border-radius: 12px; }
  .sth-tab:active { transform: scale(0.94); }
  .sth-tab[aria-current="page"] { color: #4ade80; }

  /* "Více" bottom sheet */
  .sth-tabbar-more { position: fixed; inset: 0; z-index: 10000; }
  .sth-tabbar-more[aria-hidden="true"] { display: none; }
  .sth-tabbar-more[aria-hidden="false"] { display: block; }
  .sth-tabbar-more-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0; animation: sthTabbarFade 0.2s forwards;
  }
  .sth-tabbar-more-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-radius: 24px 24px 0 0;
    padding: 12px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    animation: sthTabbarSlide 0.28s cubic-bezier(.2,.8,.2,1) forwards;
    max-height: 80vh;
    overflow-y: auto;
  }
  .sth-tabbar-more-handle {
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .sth-tabbar-more-sheet a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 8px;
    font-size: 15px; font-weight: 600;
    color: #fff; text-decoration: none;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    min-height: 48px;
  }
  .sth-tabbar-more-sheet a:last-of-type { border-bottom: 0; }
  .sth-tabbar-more-sheet a svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; color: rgba(255,255,255,0.6); }
  .sth-tabbar-more-search {
    margin: 8px 0 14px;
    background: rgba(255,255,255,0.08);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
  }
  .sth-tabbar-more-search svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.55); stroke-width: 2; fill: none; flex-shrink: 0; }
  .sth-tabbar-more-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: #fff; font-size: 15px; font-family: inherit;
    -webkit-appearance: none;
  }
  .sth-tabbar-more-search input::placeholder { color: rgba(255,255,255,0.45); }
  @keyframes sthTabbarFade { to { opacity: 1; } }
  @keyframes sthTabbarSlide { to { transform: translateY(0); } }

  @media (prefers-reduced-motion: reduce) {
    .sth-tabbar-more-backdrop, .sth-tabbar-more-sheet { animation-duration: 0.01s; }
  }
}

/* ===== sth-overrides ===== */
/* ============================================================
   TEST-HERO OVERRIDES — preview na /test-hero.html
   (aditivní; nic nepřepisuje original, jen override na konci head)
   ============================================================ */

/* (1) Topbar splývá s HERO — průhledný gradient + blur místo plné zelené */
.sth-topbar{
  position:absolute; top:0; left:0; right:0; z-index:1000;
  background:linear-gradient(180deg, rgba(8,20,13,0.82) 0%, rgba(8,20,13,0.34) 55%, rgba(8,20,13,0) 100%) !important;
  -webkit-backdrop-filter:blur(6px) saturate(125%); backdrop-filter:blur(6px) saturate(125%);
  border-bottom:none !important;
}
.sth-hero{ min-height:580px; }

/* (2) HERO — víc lesku a sytosti + jemný sheen, ostřejší titulek */
.sth-hero-slide img{ filter:saturate(1.15) contrast(1.07) brightness(1.04); }
.sth-hero-slide::after{
  background:
    radial-gradient(130% 80% at 50% -5%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(120% 110% at 50% 125%, rgba(0,0,0,0.30) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.46) 100%) !important;
}
.sth-hero h1{ text-shadow:0 2px 44px rgba(0,0,0,0.45), 0 0 2px rgba(255,255,255,0.35); }

/* (3) Plynulý přechod HERO → Aktuality: pozvolný gradient + pozvolný blur */
.sth-news{ margin-top:-170px; }
.sth-news::before{
  background:
    linear-gradient(to bottom,
      rgba(250,248,245,0.00) 0%,
      rgba(250,248,245,0.60) 90px,
      rgba(250,248,245,0.92) 170px,
      #faf8f5 240px) !important;
}
.sth-news::after{
  content:''; position:absolute; top:0; left:0; right:0; height:230px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 70%, #000 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 70%, #000 100%);
  z-index:0; pointer-events:none;
}

/* (4) Odmlžení sekcí Tláskal (Fotokronika) / Miniatury — pryč s bílým závojem */
.sth-glass2::before{
  background:linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 55%) !important;
  opacity:1 !important;
}
.sth-glass2::after{ opacity:0.4 !important; }
.sth-glass2 img, .sth-mini img, .sth-foto img{ opacity:1 !important; filter:saturate(1.06) contrast(1.05); }

/* (6) Mikro background do zelených sekcí — ať to není jen sytě zelená.
   Zelený "wash" zůstává dominantní, pod ním prosvítá jemná foto-textura. */
.sth-cams-bg.bg-on{ background: linear-gradient(135deg, rgba(20,60,40,0.86) 0%, rgba(12,36,25,0.93) 100%), url('https://www.sumava.eu/wp-content/uploads/2026/06/DSC_8168_hdr.webp') center/cover no-repeat !important; } /* 2.9.2026: fotka pozadí až při přiblížení (IO), ať nesoupeří s první obrazovkou */
.sth-pocasi-bg{
  background:
    linear-gradient(135deg, rgba(23,70,47,0.85) 0%, rgba(26,84,56,0.78) 50%, rgba(15,40,28,0.92) 100%),
    url('https://www.sumava.eu/wp-content/uploads/2026/06/sumava_header.webp') center/cover no-repeat !important;
}
.sth-galerie-bg.bg-on{ background: linear-gradient(135deg, rgba(20,60,40,0.86) 0%, rgba(12,36,25,0.93) 100%), url('https://www.sumava.eu/wp-content/uploads/2026/06/DSC08220.webp') center/cover no-repeat !important; }

/* ===== sth-tipy-forecast ===== */
        .sth-tipy-forecast{grid-column:1/-1;margin-bottom:34px;border-radius:22px;overflow:hidden;background:#0d1714;box-shadow:0 18px 50px rgba(0,0,0,.35);}
        .sth-tipy-forecast iframe{display:block;width:100%;height:380px;border:0;transition:height .35s ease;}
        @media(max-width:760px){
          .sth-tipy-forecast{margin-bottom:22px;border-radius:16px;}
          .sth-tipy-forecast iframe{height:340px;}
        }
      

/* ===== test11-va3 (pás Tipy na výlet) ===== */
  .va3-hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(61,220,120,.18);
  background:radial-gradient(120% 90% at 50% 0%,rgba(23,70,47,.35),rgba(10,15,26,0) 60%)}
@media(min-width:769px){.va3-hero{padding-top:54px}}
.va3-heroin{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(300px,34vh,400px)}
.va3-heroin::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(61,220,120,.05) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(61,220,120,.04) 0 1px,transparent 1px 64px),radial-gradient(60% 80% at 50% 50%,rgba(61,220,120,.10),transparent 70%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 40%,transparent 100%)}
.va3-c{position:absolute;width:18px;height:18px;z-index:5;pointer-events:none}
.va3-c.tl{top:14px;left:14px;border-top:2px solid rgba(61,220,120,.7);border-left:2px solid rgba(61,220,120,.7)}
.va3-c.tr{top:14px;right:14px;border-top:2px solid rgba(61,220,120,.7);border-right:2px solid rgba(61,220,120,.7)}
.va3-c.bl{bottom:14px;left:14px;border-bottom:2px solid rgba(61,220,120,.7);border-left:2px solid rgba(61,220,120,.7)}
.va3-c.br{bottom:14px;right:14px;border-bottom:2px solid rgba(61,220,120,.7);border-right:2px solid rgba(61,220,120,.7)}
.va3-mid{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 40px;pointer-events:none;z-index:5}
.va3-mid .l1,.va3-mid .l2{font:700 13px/1 var(--font-ui,sans-serif);letter-spacing:.15em;padding:9px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(8,13,20,.8);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.va3-mid .l1{color:#5df593;border:1.5px solid rgba(61,220,120,.85);text-shadow:0 0 10px rgba(61,220,120,.8);
  box-shadow:0 0 16px rgba(61,220,120,.45),0 0 44px rgba(61,220,120,.2),inset 0 0 14px rgba(61,220,120,.12);animation:va3lbl 3.2s ease-in-out infinite}
.va3-mid .l2{color:#e8c979;border:1.5px solid rgba(201,168,76,.8);text-shadow:0 0 10px rgba(201,168,76,.75);
  box-shadow:0 0 16px rgba(201,168,76,.4),0 0 44px rgba(201,168,76,.18),inset 0 0 14px rgba(201,168,76,.1);animation:va3lbl 3.2s ease-in-out infinite 1.6s}
@keyframes va3lbl{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
@media(max-width:768px){.va3-mid .l1,.va3-mid .l2{font-size:10px;letter-spacing:.07em;padding:6px 9px}}
.va3-line{position:absolute;top:50%;left:40px;right:40px;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(61,220,120,0),rgba(61,220,120,.35) 20%,rgba(61,220,120,.35) 80%,rgba(61,220,120,0))}
.va3-let{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3;
  font:700 clamp(90px,14vh,150px)/1 var(--font-display,serif);color:rgba(61,220,120,.34);
  -webkit-text-stroke:2px rgba(93,245,147,.9);text-shadow:0 0 18px rgba(61,220,120,.8),0 0 50px rgba(61,220,120,.45),0 0 110px rgba(61,220,120,.3);animation:va3glow 4s ease-in-out infinite}
@keyframes va3glow{0%,100%{opacity:.78}50%{opacity:1}}
.va3-swrap{position:relative}
.va3-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;font:700 14px/1 var(--font-ui,sans-serif);color:#5df593;
  background:rgba(8,13,20,.72);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  border:1.5px solid rgba(61,220,120,.75);box-shadow:0 0 14px rgba(61,220,120,.4),0 6px 16px rgba(0,0,0,.4);
  text-shadow:0 0 8px rgba(61,220,120,.8);transition:box-shadow .2s,border-color .2s,color .2s,transform .2s}
.va3-ar.l{left:8px}
.va3-ar.r{right:8px}
.va3-ar:hover{color:#fff;border-color:#5df593;box-shadow:0 0 22px rgba(61,220,120,.75),0 0 50px rgba(61,220,120,.3),0 6px 16px rgba(0,0,0,.45);transform:translateY(-50%) scale(1.08)}
.va3-ar:active{transform:translateY(-50%) scale(.95)}
.va3-swalpha .va3-ar{color:#e8c979;border-color:rgba(201,168,76,.7);box-shadow:0 0 14px rgba(201,168,76,.35),0 6px 16px rgba(0,0,0,.4);text-shadow:0 0 8px rgba(201,168,76,.75)}
.va3-swalpha .va3-ar:hover{color:#fff;border-color:#e8c979;box-shadow:0 0 22px rgba(201,168,76,.65),0 0 50px rgba(201,168,76,.26),0 6px 16px rgba(0,0,0,.45)}
@media(max-width:768px){.va3-ar{width:32px;height:32px;font-size:12px}.va3-ar.l{left:5px}.va3-ar.r{right:5px}}
.va3-strip{position:relative;z-index:4;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;cursor:grab;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.va3-strip::-webkit-scrollbar{display:none}
.va3-strip.grabbing{cursor:grabbing}
.va3-top{padding:18px 40px 6px}
.va3-alpha{padding:6px 40px 18px}
@media(max-width:768px){.va3-top{padding:14px 16px 6px}.va3-alpha{padding:6px 16px 14px}.va3-mid{padding:0 16px}.va3-line{left:16px;right:16px}}
.va3-scard{flex:0 0 auto;display:block;width:200px;height:110px;position:relative;border-radius:18px;overflow:hidden;text-decoration:none;
  background:rgba(14,24,32,.4);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  transition:opacity .35s,transform .25s,border-color .25s,box-shadow .3s}
.va3-scard::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 26%,transparent 50%);opacity:.55}
.va3-scard::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 45%,rgba(61,220,120,.14) 52%,transparent 64%);
  transform:translateX(-130%)}
.va3-scard:hover::after,.va3-scard.lit::after{animation:va3sheen .9s ease}
@keyframes va3sheen{to{transform:translateX(130%)}}
.va3-top .va3-scard{border:2px solid rgba(61,220,120,.75);transform:perspective(700px) rotateX(7deg);
  box-shadow:0 0 14px rgba(61,220,120,.5),0 0 40px rgba(61,220,120,.22),0 12px 28px rgba(0,0,0,.4),inset 0 0 24px rgba(61,220,120,.14);
  animation:va3fT 5.2s ease-in-out infinite}
.va3-top .va3-scard:hover{border-color:#5df593;transform:perspective(700px) rotateX(0) scale(1.05);animation:none;
  box-shadow:0 0 22px rgba(61,220,120,.75),0 0 70px rgba(61,220,120,.35),0 16px 34px rgba(0,0,0,.5),inset 0 0 30px rgba(61,220,120,.2)}
.va3-alpha .va3-scard{border:2px solid rgba(255,255,255,.42);transform:perspective(700px) rotateX(-7deg);
  box-shadow:0 0 14px rgba(201,168,76,.3),0 0 36px rgba(201,168,76,.14),0 -8px 28px rgba(0,0,0,.35),inset 0 0 24px rgba(255,255,255,.07);
  animation:va3fA 6s ease-in-out infinite}
.va3-alpha .va3-scard:hover{border-color:#e8c979;transform:perspective(700px) rotateX(0) scale(1.05);animation:none;
  box-shadow:0 0 22px rgba(201,168,76,.6),0 0 64px rgba(201,168,76,.28),0 12px 30px rgba(0,0,0,.5),inset 0 0 28px rgba(255,255,255,.1)}
@keyframes va3fT{0%,100%{transform:perspective(700px) rotateX(7deg) translateY(0)}50%{transform:perspective(700px) rotateX(7deg) translateY(-5px)}}
@keyframes va3fA{0%,100%{transform:perspective(700px) rotateX(-7deg) translateY(0)}50%{transform:perspective(700px) rotateX(-7deg) translateY(5px)}}
.va3-strip .va3-scard:nth-child(3n){animation-delay:-1.8s}
.va3-strip .va3-scard:nth-child(3n+1){animation-delay:-3.4s}
.va3-scard.dim,.va3-gcard.dim{animation-play-state:paused}
.va3-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.78}
.va3-noimg{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,rgba(23,70,47,.5),rgba(10,15,26,.6))}
.va3-noimg .bl{font:700 58px/1 var(--font-display,serif);color:rgba(61,220,120,.16)}
.va3-noimg .em{position:absolute;font-size:24px;opacity:.85;left:0;right:0;top:0;bottom:0;display:grid;place-items:center}
.va3-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,6,0) 35%,rgba(4,8,6,.88))}
.va3-rank{position:absolute;top:8px;right:10px;font:700 10px/1 var(--font-ui,sans-serif);letter-spacing:.1em;color:var(--zlato,#c9a84c)}
.va3-lchip{position:absolute;top:6px;left:8px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:8px;
  font:700 14px/1 var(--font-display,serif);color:#ffd98a;background:rgba(6,10,8,.72);border:1px solid rgba(201,168,76,.65);
  box-shadow:0 0 10px rgba(201,168,76,.35);text-shadow:0 0 8px rgba(201,168,76,.8)}
.va3-txt{position:absolute;left:12px;right:12px;bottom:9px;display:flex;flex-direction:column;gap:2px}
.va3-txt .n{font:700 13px/1.15 var(--font-ui,sans-serif);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.va3-txt .m{font:500 10.5px/1 var(--font-ui,sans-serif);color:var(--text-mut,rgba(233,240,251,.66));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va3-wrap{max-width:1180px;margin:0 auto;padding:26px 20px calc(70px + env(safe-area-inset-bottom))}
.va3-eyebrow{font:600 11px/1.4 var(--font-mono,monospace);letter-spacing:.22em;text-transform:uppercase;color:var(--text-mut,rgba(233,240,251,.66));margin:0}
.va3-sel{position:relative;padding:22px 26px;border-radius:22px;border:1.5px solid rgba(61,220,120,.4);
  background:var(--mlha,rgba(16,22,32,.55));-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 0 34px rgba(61,220,120,.14),0 18px 40px rgba(0,0,0,.4)}
.va3-sel .va3-c{width:14px;height:14px}
.va3-sel .va3-c.tl{top:10px;left:10px}
.va3-sel .va3-c.br{bottom:10px;right:10px}
.va3-selhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.va3-selhead .r{display:flex;align-items:center;gap:14px}
.va3-count{font:700 13px/1 var(--font-ui,sans-serif);color:var(--zivot,#3ddc78)}
.va3-reset{display:none;font:600 12px/1 var(--font-ui,sans-serif);color:var(--text-mut,rgba(233,240,251,.66));background:none;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;cursor:pointer}
.va3-rows{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.va3-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.va3-rowl{font:600 11px/1 var(--font-ui,sans-serif);letter-spacing:.14em;color:var(--zlato,#c9a84c);min-width:86px}
.va3-chip{font:600 12.5px/1 var(--font-ui,sans-serif);padding:9px 15px;border-radius:999px;cursor:pointer;transition:all .2s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);background:rgba(14,24,32,.4);color:rgba(248,245,240,.85)}
.va3-chip.on{border:1.5px solid rgba(61,220,120,.95);background:rgba(61,220,120,.16);color:var(--zivot,#3ddc78);
  box-shadow:0 0 14px rgba(61,220,120,.5),0 0 36px rgba(61,220,120,.22);text-shadow:0 0 12px rgba(61,220,120,.7)}
.va3-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 4px}
.va3-lnav{display:flex;gap:7px;flex-wrap:wrap}
.va3-lnav a{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:1px solid rgba(61,220,120,.35);
  background:var(--mlha,rgba(16,22,32,.55));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:700 14px/1 var(--font-display,serif);color:#fff;text-decoration:none;transition:.2s}
.va3-lnav a:hover{border-color:var(--zivot,#3ddc78);color:var(--zivot,#3ddc78)}
.va3-g{display:grid;grid-template-columns:64px 1fr;gap:18px;margin-top:28px;scroll-margin-top:74px}
.va3-gl{display:flex;flex-direction:column;align-items:center;gap:10px}
.va3-gl .t{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;border:1.5px solid rgba(61,220,120,.5);
  background:var(--mlha,rgba(16,22,32,.55));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 18px rgba(61,220,120,.18);font:700 26px/1 var(--font-display,serif);color:var(--zivot,#3ddc78)}
.va3-gl .v{flex:1;width:1px;background:linear-gradient(180deg,rgba(61,220,120,.4),rgba(61,220,120,0))}
@media(max-width:600px){.va3-g{grid-template-columns:44px 1fr;gap:12px}.va3-gl .t{width:40px;height:40px;border-radius:12px;font-size:20px}}
.va3-gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.va3-gcard{display:block;position:relative;height:156px;border-radius:18px;overflow:hidden;text-decoration:none;
  border:1.5px solid rgba(61,220,120,.4);background:rgba(14,24,32,.45);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  box-shadow:0 0 18px rgba(61,220,120,.12),0 14px 30px rgba(0,0,0,.35),inset 0 0 26px rgba(61,220,120,.06);
  transition:opacity .35s,transform .25s,border-color .25s,box-shadow .25s}
.va3-gcard:hover{border-color:#5df593;transform:translateY(-3px);box-shadow:0 0 16px rgba(61,220,120,.55),0 0 46px rgba(61,220,120,.25),0 18px 36px rgba(0,0,0,.45)}
.va3-gcard::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.24) 45%,rgba(61,220,120,.12) 52%,transparent 64%);transform:translateX(-130%)}
.va3-gcard:hover::after,.va3-gcard.lit::after{animation:va3sheen .9s ease}
.va3-gcard .va3-noimg{background:linear-gradient(160deg,rgba(23,70,47,.55),rgba(10,15,26,.65))}
.va3-gcard .va3-noimg .bl{font-size:84px;color:rgba(61,220,120,.12)}
.va3-gcard .va3-noimg .em{font-size:34px;opacity:.9}
.va3-cs{position:absolute;width:11px;height:11px;pointer-events:none}
.va3-cs.tl{top:8px;left:8px;border-top:1.5px solid rgba(61,220,120,.85);border-left:1.5px solid rgba(61,220,120,.85)}
.va3-cs.br{bottom:8px;right:8px;border-bottom:1.5px solid rgba(61,220,120,.85);border-right:1.5px solid rgba(61,220,120,.85)}
.va3-gem{position:absolute;top:9px;right:11px;font-size:15px}
.va3-gtxt{position:absolute;left:14px;right:14px;bottom:11px;display:flex;flex-direction:column;gap:3px}
.va3-gtxt .n{font:700 15px/1.15 var(--font-ui,sans-serif);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.va3-gtxt .m{font:500 11px/1 var(--font-ui,sans-serif);color:var(--text-mut,rgba(233,240,251,.66));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va3-old{margin-top:50px;text-align:center;font:500 13px/1.6 var(--font-ui,sans-serif);color:var(--text-mut,rgba(233,240,251,.66))}
.va3-old a{color:var(--zivot,#3ddc78);text-decoration:none}
.va3-old a:hover{color:var(--zlato,#c9a84c)}
@media(prefers-reduced-motion:reduce){.va3-let,.va3-scard,.va3-scard::after,.va3-gcard::after,.va3-mid .l1,.va3-mid .l2{animation:none !important}*{transition-duration:.01ms !important}}
  #sth-vylet-band{cursor:pointer}
  #sth-vylet-band .va3-img[data-bg]{background:linear-gradient(160deg,rgba(23,70,47,.55),rgba(10,15,26,.65))}
  #sth-vylet-band .va3-hero{margin-top:0;color:var(--text-dark,#e8f0f8);border-top:1px solid rgba(61,220,120,.18);border-radius:22px;
    background:var(--noc,#0a0f1a) radial-gradient(120% 90% at 50% 0%,rgba(61,220,120,.16),rgba(10,15,26,0) 60%)} /* tmavý pás jako /vylet (AR neon potřebuje noc) */
  #sth-vylet-band .va3-hero .va3-heroin{min-height:clamp(280px,30vh,360px)}
  @media(min-width:769px){#sth-vylet-band .va3-hero{padding-top:0}}
  /* 22.8.2026 (Marek): karty STOJÍ (drift smazán v JS), bez levitace, bez 3D natočení, bez backdrop-filter, bez hover efektu — v Chrome s GPU se jinak při přejetí myší překresloval celý pás (blikání); posun jen šipky (po jedné kartě)/drag */
  #sth-vylet-band .va3-scard{animation:none !important;transition:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(14,24,32,.85)}
  #sth-vylet-band .va3-top .va3-scard,#sth-vylet-band .va3-top .va3-scard:hover{transform:none;border-color:rgba(61,220,120,.75);
    box-shadow:0 0 14px rgba(61,220,120,.5),0 0 40px rgba(61,220,120,.22),0 12px 28px rgba(0,0,0,.4),inset 0 0 24px rgba(61,220,120,.14)}
  #sth-vylet-band .va3-alpha .va3-scard,#sth-vylet-band .va3-alpha .va3-scard:hover{transform:none;border-color:rgba(255,255,255,.42);
    box-shadow:0 0 14px rgba(201,168,76,.3),0 0 36px rgba(201,168,76,.14),0 -8px 28px rgba(0,0,0,.35),inset 0 0 24px rgba(255,255,255,.07)}
  #sth-vylet-band .va3-mid .l1,#sth-vylet-band .va3-mid .l2,#sth-vylet-band .va3-let{animation:none !important}
  #sth-vylet-band .va3-ar{transition:none}
  /* 23.8. večer (Marek): pás bez zeleného pozadí, bez rohových rámečků; kraje karet do postupného bluru, šipky ostré navrchu */
  #sth-vylet-band .va3-hero{background:transparent;border-top:none}
  #sth-vylet-band .va3-c{display:none}

  /* 24.8.2026 (Marek): postupný blur krajů pásu — vrstvený (Chromium neumí změkčit backdrop-filter maskou → 4 vrstvy 3/2.5/2/1.5 px, kумulativně 9→1.5 px k okraji) */
  #sth-vylet-band .va3-swrap::before,#sth-vylet-band .va3-swrap::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  #sth-vylet-band .va3-swrap::before{left:0;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 100%);mask-image:linear-gradient(to right,#000 45%,transparent 100%)}
  #sth-vylet-band .va3-swrap::after{right:0;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 100%);mask-image:linear-gradient(to left,#000 45%,transparent 100%)}
  #sth-vylet-band .va3-eb{position:absolute;top:0;bottom:0;width:170px;z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
  #sth-vylet-band .va3-eb.l{left:0;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 100%);mask-image:linear-gradient(to right,#000 45%,transparent 100%)}
  #sth-vylet-band .va3-eb.r{right:0;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 100%);mask-image:linear-gradient(to left,#000 45%,transparent 100%)}
  #sth-vylet-band .va3-eb::before,#sth-vylet-band .va3-eb::after{content:'';position:absolute;top:0;bottom:0;pointer-events:none}
  #sth-vylet-band .va3-eb::before{width:125px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  #sth-vylet-band .va3-eb::after{width:80px;-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
  #sth-vylet-band .va3-eb.l::before,#sth-vylet-band .va3-eb.l::after{left:0;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 100%);mask-image:linear-gradient(to right,#000 45%,transparent 100%)}
  #sth-vylet-band .va3-eb.r::before,#sth-vylet-band .va3-eb.r::after{right:0;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 100%);mask-image:linear-gradient(to left,#000 45%,transparent 100%)}
  @media(max-width:768px){#sth-vylet-band .va3-swrap::before,#sth-vylet-band .va3-swrap::after{width:20px}#sth-vylet-band .va3-eb{width:85px}#sth-vylet-band .va3-eb::before{width:62px}#sth-vylet-band .va3-eb::after{width:40px}}

  #sth-vylet-band .va3-scard::after{display:none}
  

/* ===== fc2-quad ===== */
@media(max-width:1024px){#sth-fc2-quad{height:340px}}

/* ===== pm-hp-map ===== */
.pm-hp-map{height:100%}.pm-hp-map>.pm-map{height:100%!important;border-radius:18px}