/* ============================================================================
   pages/tools.css — „Pomůcky a rady" (Fáze 8 redesignu — Claude Design bundle)
   ============================================================================
   Bento grid 12 sloupců. 15 karet:
     - 1× hero (span 8, row 2)
     - 3× medium (span 4)
     - 11× small (span 3)

   Pořadí karet se řídí relevance-skóre — pomůcka s nejvyšším skóre se vykreslí
   v hero pozici. CSS se stará jen o layout; PHP určuje, která karta má
   .card--hero.

   Tokeny: z design-tokens.css (--blue, --green, --ink, --line, --bg, --surface).
   Pro barevnou paritu s designem přidáváme:
     --green-50, --green-100, --blue-50, --blue-100, --line-strong.
   ============================================================================ */

.page-pomucky {
  --surface:      var(--bg-surface);
  --line-strong:  #DDE1EB;
  --green-50:     #F1F9EA;
  --green-100:    #E1F2D1;
  --blue-50:      #EEF1FA;
  --blue-100:     #DCE3F3;
  --alert:        #C03030;
  --ink-faint:    #A5ACBF;

  /* Sdílený layout token — na FHD 1320 px (mírně širší než historický 1280),
     na velkých monitorech do 1800 px. */
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 32px 40px 80px;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.page-pomucky .breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.page-pomucky .breadcrumb a:hover { color: var(--blue); }
.page-pomucky .breadcrumb__sep { color: var(--ink-faint); }

/* ================================================================
   HERO — dvousloupcové rozložení (úvod vlevo, počasí vpravo,
   filtr na plnou šířku dole)
   ================================================================ */
.pomucky-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px 56px 40px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.pomucky-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(102, 188, 41, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 15% 90%, rgba(0, 32, 114, 0.04) 0%, transparent 60%);
}
.pomucky-hero > * { position: relative; z-index: 1; }

.pomucky-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 56px;
  align-items: end;
}
.pomucky-hero__intro { min-width: 0; }

.pomucky-hero__lead {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 15px;
  color: var(--blue);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-style: italic;
}
.pomucky-hero__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 820px;
  text-wrap: balance;
}
.pomucky-hero__title em {
  font-style: italic;
  color: var(--blue);
}
.pomucky-hero__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}

/* Aktuální počasí — pravý mini-dashboard ----------------------- */
.pomucky-hero__weather {
  background: linear-gradient(155deg, #FAFCFF 0%, #F1F5FB 100%);
  border: 1px solid var(--blue-100, #DDE5F2);
  border-radius: 18px;
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.pomucky-hero__weather::after {
  /* jemný „glow" v rohu, ladí s ::before na hero kontejneru */
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,32,114,.08) 0%, transparent 70%);
  pointer-events: none;
}
.pomucky-hero__weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pomucky-hero__weather-tag {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}
.pomucky-hero__weather-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 2px rgba(0,32,114,.06);
}
.pomucky-hero__weather-temp {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: 60px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  margin-top: 2px;
}
.pomucky-hero__weather-temp .u {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  color: var(--ink-muted);
  margin-left: 6px;
  font-weight: 400;
  letter-spacing: 0;
}
.pomucky-hero__weather-feels {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.pomucky-hero__weather-feels strong {
  color: var(--ink);
  font-weight: 600;
}
.pomucky-hero__weather-stats {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(0,32,114,.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pomucky-hero__weather-stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
}
.pomucky-hero__weather-stats .k {
  color: var(--ink-muted);
  font-weight: 500;
}
.pomucky-hero__weather-stats .v {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pomucky-hero__weather-stats .v strong { font-weight: 600; }
.pomucky-hero__weather-stats .v.is-rain {
  color: #1F6FB8;
  font-weight: 600;
}

/* Filter strip — full-width pod horní 2-col mřížkou ------------ */
.pomucky-hero__filter {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pomucky-chips-label {
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  margin-bottom: 14px;
}
.pomucky-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pomucky-chip {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
}
.pomucky-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pomucky-chip.is-active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 1px 3px rgba(0,32,114,.2);
}
.pomucky-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* ================================================================
   SECTION HEADER
   ================================================================ */
.pomucky-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
}
.pomucky-sec-head__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.pomucky-sec-head__sub {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 620px;
  text-align: right;
  text-wrap: balance;
}

/* ================================================================
   BENTO GRID
   ================================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Řádky se řídí obsahem — žádné umělé 1fr natahování, takže karty
     nenaberou zbytečně prázdné místo. V rámci jedné řady grid stejně
     automaticky srovná výšku sousedů (align-items: stretch). */
  grid-auto-rows: auto;
  gap: 20px;
  margin-bottom: 56px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .2s ease;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 20px rgba(15,25,51,.05), 0 1px 3px rgba(15,25,51,.03);
  transform: translateY(-2px);
}
.card.is-hidden { display: none; }

/* ---- Hero card ---- */
.card--hero {
  grid-column: span 8;
  grid-row: span 2;
  padding: 28px 36px;
  background: linear-gradient(135deg, #F8FBF4 0%, #FFFFFF 70%);
  border-color: var(--green-100);
}
.card--hero.hero-verdict-warn {
  background: linear-gradient(135deg, #FEF7EC 0%, #FFFFFF 70%);
  border-color: #F6D9B0;
}
.card--hero.hero-verdict-bad {
  background: linear-gradient(135deg, #FBEDED 0%, #FFFFFF 70%);
  border-color: #F0BDBD;
}
.card--hero.hero-verdict-info {
  background: linear-gradient(135deg, #EEF1FA 0%, #FFFFFF 70%);
  border-color: var(--blue-100);
}
.card--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(102,188,41,.08) 0%, transparent 60%);
}
.card--hero .card__scene {
  position: absolute;
  right: 40px;
  top: 92px; /* pod kickerem – aby ikona nenarazila do pilulky */
  width: 180px;
  height: 180px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card--hero .card__scene > div {
  width: 160px;
  height: 160px;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15,25,51,.06), inset 0 0 0 1px rgba(255,255,255,.45);
}
.card--hero .card__body {
  position: relative;
  max-width: 60%;
}
.card--hero .card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--green);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  margin-bottom: 14px;
}
.card--hero.hero-verdict-warn .card__kicker { background: var(--warm, #E8994F); }
.card--hero.hero-verdict-bad  .card__kicker { background: var(--alert); }
.card--hero.hero-verdict-info .card__kicker { background: var(--blue); }

.card--hero .card__kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.card--hero .card__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.card--hero .card__title em {
  font-style: italic;
  color: var(--green-deep);
}
.card--hero.hero-verdict-warn .card__title em { color: #A85820; }
.card--hero.hero-verdict-bad  .card__title em { color: var(--alert); }
.card--hero.hero-verdict-info .card__title em { color: var(--blue); }

.card--hero .card__answer {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 18px;
  text-wrap: pretty;
}
.card--hero .card__answer strong { color: var(--green-deep); }
.card--hero.hero-verdict-warn .card__answer strong { color: #A85820; }
.card--hero.hero-verdict-bad  .card__answer strong { color: var(--alert); }
.card--hero.hero-verdict-info .card__answer strong { color: var(--blue); }

.card--hero .card__stats {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(102,188,41,.15);
}
.card--hero.hero-verdict-warn .card__stats { border-top-color: rgba(232,153,79,.2); }
.card--hero.hero-verdict-bad  .card__stats { border-top-color: rgba(192,48,48,.2); }
.card--hero.hero-verdict-info .card__stats { border-top-color: rgba(0,32,114,.12); }

.card--hero .card__stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -.01em;
}
.card--hero .card__stat-num span.sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--ink-muted);
  margin-left: 4px;
  font-weight: 400;
}
.card--hero .card__stat-lbl {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 5px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.card--hero .card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--blue);
  color: white;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  align-self: flex-start;
  transition: all .15s;
}
.card--hero .card__cta:hover { background: var(--blue-deep, #001550); }
.card--hero .card__cta::after {
  content: '→';
  font-size: 16px;
}

/* ---- Medium & small cards ---- */
.card--md {
  grid-column: span 4;
  /* min-height je záměrně nízký — výšku drive-uje obsah, ne násilné
     min-height, aby karty neměly prázdné pásy mezi popiskem a footerem. */
  min-height: 180px;
}
.card--sm {
  grid-column: span 3;
  min-height: 180px;
}

.card__icon {
  width: 72px;
  height: 72px;
  background: var(--blue-50);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 14px;
  flex-shrink: 0;
  overflow: visible; /* některé animace (kapky, jiskry, dým) přečnívají */
  transition:
    transform .35s cubic-bezier(.3,.7,.25,1.2),
    box-shadow .35s ease,
    background-color .35s ease;
  will-change: transform;
  position: relative;
}
.card__icon svg {
  /* Ikony jsou navržené v 48×48 native size — drž je tak, animace tím
     mají správnou amplitudu (CSS px transformy nemění měřítko se size). */
  width: 48px;
  height: 48px;
  display: block;
  overflow: visible;
}
.card:hover .card__icon {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -12px rgba(20, 30, 70, 0.18);
}

/* =======================================================================
 * Animované ikony (převzato z nahled.html — design + animace 1:1)
 * ---------------------------------------------------------------------
 * Každá ikona má pojmenované SVG prvky (class="wl", "frame", "body", ..).
 * Aktivace animací:
 *   1) Na kartách jsou animace defaultně PAUSED a běží jen při hoveru.
 *   2) Na detail stránce (.stub-hero__scene) běží trvale.
 * Výsledek: stejné ikony i animace na obou místech.
 * ======================================================================= */

/* --- KEYFRAMES (verbatim z nahled.html) -------------------------------- */

@keyframes ws-wheel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ws-bike-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.5px); } }

@keyframes ws-plant-sway    { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes ws-leaf-rustle-l { 0%,100% { transform: rotate(-4deg); }   50% { transform: rotate(4deg); } }
@keyframes ws-leaf-rustle-r { 0%,100% { transform: rotate(4deg); }    50% { transform: rotate(-4deg); } }
@keyframes ws-rain-drop { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

/* Fishing — fish wiggles as if caught, line sways gently */
@keyframes ws-fish-wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
@keyframes ws-fish-tail   { 0%,100% { transform: scaleY(0.85); } 50% { transform: scaleY(1.15); } }
@keyframes ws-line-sway   { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes ws-bubble-up { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.7; } 100% { transform: translateY(-18px) scale(1); opacity: 0; } }

/* Runner — 4-keyframe leg cycle */
@keyframes ws-run-bob {
  0%, 50%, 100% { transform: translateY(-0.6px); }
  25%, 75%      { transform: translateY(0.6px); }
}
@keyframes ws-run-leg-front {
  0%, 100% { d: path("M24 24 L28 29 L30 35"); }
  25%      { d: path("M24 24 L25 30 L25 36"); }
  50%      { d: path("M24 24 L21 29 L18 34"); }
  75%      { d: path("M24 24 L26 26 L22 30"); }
}
@keyframes ws-run-leg-back {
  0%, 100% { d: path("M24 24 L21 29 L18 34"); }
  25%      { d: path("M24 24 L26 26 L22 30"); }
  50%      { d: path("M24 24 L28 29 L30 35"); }
  75%      { d: path("M24 24 L25 30 L25 36"); }
}
@keyframes ws-run-arm-front {
  0%, 100% { d: path("M27 14 L24 17 L21 13"); }
  50%      { d: path("M27 14 L30 17 L28 21"); }
}
@keyframes ws-run-arm-back {
  0%, 100% { d: path("M27 14 L30 17 L28 21"); }
  50%      { d: path("M27 14 L24 17 L21 13"); }
}
@keyframes ws-run-spd {
  0%   { transform: translateX(14px); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.35; }
  100% { transform: translateX(-16px); opacity: 0; }
}

/* Paw print */
@keyframes ws-paw-pulse { 0%,100% { transform: scale(1); }    50% { transform: scale(1.06); } }
@keyframes ws-toe-step  { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-0.8px); opacity: 0.85; } }

@keyframes ws-shirt-sway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ws-drop-fall  { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

@keyframes ws-thermo-fill { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes ws-thermo-bulb { 0%,100% { transform: scale(1); }    50% { transform: scale(1.08); } }

/* Car wash */
@keyframes ws-car-bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.5px); } }
@keyframes ws-foam-jiggle { 0%,100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.08) translateY(-0.5px); } }
@keyframes ws-sparkle     { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes ws-bubble-pop  { 0% { transform: scale(0.6); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

@keyframes ws-moon-shadow  { 0% { transform: translateX(-20px); } 100% { transform: translateX(20px); } }
@keyframes ws-star-twinkle { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* Wildfire */
@keyframes ws-flame-flick-main { 0%,100% { transform: scale(1,1) skewX(0deg); } 25% { transform: scale(1.04,0.96) skewX(-3deg); } 50% { transform: scale(0.96,1.06) skewX(0deg); } 75% { transform: scale(1.04,0.98) skewX(3deg); } }
@keyframes ws-flame-flick-s    { 0%,100% { transform: scaleY(1) skewX(0); } 50% { transform: scaleY(1.15) skewX(2deg); } }
@keyframes ws-ember-rise { 0% { transform: translate(0,0) scale(1); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 0.6; } 100% { transform: translate(-2px,-14px) scale(0.4); opacity: 0; } }

@keyframes ws-mush-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ws-spore-rise   { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 20% { opacity: 0.75; } 80% { opacity: 0.75; } 100% { transform: translateY(-18px) scale(1); opacity: 0; } }

/* WATER icon — three wavy lines moving at different speeds (parallax) */
@keyframes ws-water-wave { 0% { transform: translateX(0); } 100% { transform: translateX(-16px); } }

@keyframes ws-grill-flame { 0%,100% { transform: scaleY(0.9); } 50% { transform: scaleY(1.15); } }
@keyframes ws-smoke-rise  { 0% { transform: translate(0,4px) scale(0.4); opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.5; } 100% { transform: translate(-3px,-14px) scale(1.3); opacity: 0; } }

@keyframes ws-pollen-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ws-pollen-fly  { 0% { transform: translate(0,0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 0.6; } 100% { transform: translate(18px,-10px) scale(0.3); opacity: 0; } }

/* --- ANIMATIONS → SVG PARTS (verbatim z nahled.html) ------------------- */

.ws-ico-bike .frame { animation: ws-bike-bob 0.8s ease-in-out infinite; }
.ws-ico-bike .wl    { transform-origin: 13px 34px; animation: ws-wheel-spin 1.5s linear infinite; }
.ws-ico-bike .wr    { transform-origin: 35px 34px; animation: ws-wheel-spin 1.5s linear infinite; }

.ws-ico-plant .plant  { transform-origin: 24px 40px; animation: ws-plant-sway 4s ease-in-out infinite; }
.ws-ico-plant .leaf-l { transform-origin: 20px 22px; animation: ws-leaf-rustle-l 3s ease-in-out infinite; }
.ws-ico-plant .leaf-r { transform-origin: 28px 20px; animation: ws-leaf-rustle-r 3s ease-in-out infinite; }
.ws-ico-plant .drop   { animation: ws-rain-drop 2.8s linear infinite; }
.ws-ico-plant .drop-1 { animation-delay: -0.1s; }
.ws-ico-plant .drop-2 { animation-delay: -0.8s; }
.ws-ico-plant .drop-3 { animation-delay: -1.5s; }
.ws-ico-plant .drop-4 { animation-delay: -2.2s; }

.ws-ico-fish .body   { transform-origin: 28px 32px; animation: ws-fish-wiggle 1.4s ease-in-out infinite; }
.ws-ico-fish .tail   { transform-origin: 37px 32px; animation: ws-fish-tail 0.7s ease-in-out infinite; }
.ws-ico-fish .line-g { transform-origin: 38px 6px;  animation: ws-line-sway 2.4s ease-in-out infinite; }
.ws-ico-fish .bub    { animation: ws-bubble-up 2.4s linear infinite; }
.ws-ico-fish .b1     { animation-delay: -0.2s; }
.ws-ico-fish .b2     { animation-delay: -1s; }
.ws-ico-fish .b3     { animation-delay: -1.7s; }

.ws-ico-run .body-bob   { animation: ws-run-bob 0.55s ease-in-out infinite; }
.ws-ico-run .leg-front  { d: path("M24 24 L28 29 L30 35"); animation: ws-run-leg-front 0.55s ease-in-out infinite; }
.ws-ico-run .leg-back   { d: path("M24 24 L21 29 L18 34"); animation: ws-run-leg-back 0.55s ease-in-out infinite; }
.ws-ico-run .arm-front  { d: path("M27 14 L24 17 L21 13"); animation: ws-run-arm-front 0.55s ease-in-out infinite; }
.ws-ico-run .arm-back   { d: path("M27 14 L30 17 L28 21"); animation: ws-run-arm-back 0.55s ease-in-out infinite; }
.ws-ico-run .spd        { animation: ws-run-spd 0.8s linear infinite; }
.ws-ico-run .s1         { animation-delay: -0.1s; }
.ws-ico-run .s2         { animation-delay: -0.4s; }
.ws-ico-run .s3         { animation-delay: -0.65s; }

.ws-ico-paw .pad { transform-origin: 24px 32px; animation: ws-paw-pulse 2.4s ease-in-out infinite; }
.ws-ico-paw .t1  { transform-origin: 12px 16px; animation: ws-toe-step 2s ease-in-out infinite; }
.ws-ico-paw .t2  { transform-origin: 20px 10px; animation: ws-toe-step 2s ease-in-out infinite; animation-delay: -0.4s; }
.ws-ico-paw .t3  { transform-origin: 28px 10px; animation: ws-toe-step 2s ease-in-out infinite; animation-delay: -0.8s; }
.ws-ico-paw .t4  { transform-origin: 36px 16px; animation: ws-toe-step 2s ease-in-out infinite; animation-delay: -1.2s; }

.ws-ico-shirt .shirt { transform-origin: 24px 14px; animation: ws-shirt-sway 2.4s ease-in-out infinite; }
.ws-ico-shirt .drop  { animation: ws-drop-fall 2.4s linear infinite; }
.ws-ico-shirt .d1    { animation-delay: -0.1s; }
.ws-ico-shirt .d2    { animation-delay: -0.9s; }
.ws-ico-shirt .d3    { animation-delay: -1.7s; }

.ws-ico-thermo .fill { transform-origin: 24px 34px; animation: ws-thermo-fill 3s ease-in-out infinite; }
.ws-ico-thermo .bulb { transform-origin: 24px 36px; animation: ws-thermo-bulb 3s ease-in-out infinite; }

.ws-ico-car .car   { animation: ws-car-bounce 1.2s ease-in-out infinite; }
.ws-ico-car .foam  { transform-origin: 24px 18px; animation: ws-foam-jiggle 2s ease-in-out infinite; }
.ws-ico-car .spk   { animation: ws-sparkle 1.8s ease-in-out infinite; }
.ws-ico-car .s1    { transform-origin: 12px 12px; animation-delay: -0.1s; }
.ws-ico-car .s2    { transform-origin: 22px 10px; transform-box: fill-box; animation-delay: -0.6s; }
.ws-ico-car .s3    { transform-origin: 32px 13px; animation-delay: -1.1s; }
.ws-ico-car .s4    { transform-origin: 40px 14px; animation-delay: -1.5s; }
.ws-ico-car .bub   { transform-box: fill-box; transform-origin: center; animation: ws-bubble-pop 2.2s ease-out infinite; }
.ws-ico-car .bb1   { animation-delay: -0.2s; }
.ws-ico-car .bb2   { animation-delay: -0.9s; }
.ws-ico-car .bb3   { animation-delay: -1.6s; }

.ws-ico-moon .shadow { animation: ws-moon-shadow 5s ease-in-out infinite alternate; }
.ws-ico-moon .s1     { transform-origin: 10px 10px; animation: ws-star-twinkle 1.8s ease-in-out infinite; }
.ws-ico-moon .s2     { transform-origin: 38px 14px; animation: ws-star-twinkle 1.8s ease-in-out infinite; animation-delay: -0.6s; }
.ws-ico-moon .s3     { transform-origin: 40px 36px; animation: ws-star-twinkle 1.8s ease-in-out infinite; animation-delay: -1.2s; }

.ws-ico-fire .fl-main { transform-origin: 24px 40px; animation: ws-flame-flick-main 0.8s ease-in-out infinite; }
.ws-ico-fire .fl-l    { transform-origin: 12px 40px; animation: ws-flame-flick-s 0.7s ease-in-out infinite; animation-delay: -0.2s; }
.ws-ico-fire .fl-r    { transform-origin: 36px 40px; animation: ws-flame-flick-s 0.7s ease-in-out infinite; animation-delay: -0.35s; }
.ws-ico-fire .em      { animation: ws-ember-rise 2.2s linear infinite; }
.ws-ico-fire .e1      { animation-delay: -0.3s; }
.ws-ico-fire .e2      { animation-delay: -0.9s; }
.ws-ico-fire .e3      { animation-delay: -1.5s; }
.ws-ico-fire .e4      { animation-delay: -2.0s; }

.ws-ico-mush .mush { transform-origin: 24px 40px; animation: ws-mush-breathe 3s ease-in-out infinite; }
.ws-ico-mush .sp   { animation: ws-spore-rise 3s linear infinite; }
.ws-ico-mush .sp1  { animation-delay: -0.2s; }
.ws-ico-mush .sp2  { animation-delay: -0.8s; }
.ws-ico-mush .sp3  { animation-delay: -1.4s; }
.ws-ico-mush .sp4  { animation-delay: -2s; }
.ws-ico-mush .sp5  { animation-delay: -2.6s; }

.ws-ico-swim .wv1 { animation: ws-water-wave 4s linear infinite; }
.ws-ico-swim .wv2 { animation: ws-water-wave 3s linear infinite; }
.ws-ico-swim .wv3 { animation: ws-water-wave 5s linear infinite; }

.ws-ico-grill .fl1 { transform-origin: 18px 32px; animation: ws-grill-flame 0.7s ease-in-out infinite; }
.ws-ico-grill .fl2 { transform-origin: 24px 32px; animation: ws-grill-flame 0.7s ease-in-out infinite; animation-delay: -0.2s; }
.ws-ico-grill .fl3 { transform-origin: 30px 32px; animation: ws-grill-flame 0.7s ease-in-out infinite; animation-delay: -0.4s; }
.ws-ico-grill .sm  { animation: ws-smoke-rise 2.4s linear infinite; }
.ws-ico-grill .sm1 { animation-delay: -0.1s; }
.ws-ico-grill .sm2 { animation-delay: -0.8s; }
.ws-ico-grill .sm3 { animation-delay: -1.6s; }

.ws-ico-pollen .stem { transform-origin: 18px 40px; animation: ws-pollen-sway 3s ease-in-out infinite; }
.ws-ico-pollen .p    { animation: ws-pollen-fly 2.8s linear infinite; }
.ws-ico-pollen .p1   { animation-delay: -0.1s; }
.ws-ico-pollen .p2   { animation-delay: -0.7s; }
.ws-ico-pollen .p3   { animation-delay: -1.3s; }
.ws-ico-pollen .p4   { animation-delay: -1.9s; }
.ws-ico-pollen .p5   { animation-delay: -2.5s; }

/* DRONE — quadcopter hovering, propellers spinning */
@keyframes ws-drone-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes ws-prop-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ws-ico-drone .drone { animation: ws-drone-hover 1.8s ease-in-out infinite; }
.ws-ico-drone .prop  { transform-box: fill-box; transform-origin: center; animation: ws-prop-spin 0.18s linear infinite; }

/* MIGRAINE — head pulse + 3 koncentrické vlny bolesti */
@keyframes ws-mig-head { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ws-mig-wave { 0% { transform: scale(0.85); opacity: 0; } 20% { opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ws-mig-brow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.4px); } }
.ws-ico-migraine .head { transform-origin: 24px 26px; transform-box: fill-box; animation: ws-mig-head 1.1s ease-in-out infinite; }
.ws-ico-migraine .brow { animation: ws-mig-brow 1.1s ease-in-out infinite; }
.ws-ico-migraine .wave { transform-origin: 24px 24px; transform-box: fill-box; animation: ws-mig-wave 1.8s ease-out infinite; }
.ws-ico-migraine .w1   { animation-delay: 0s; }
.ws-ico-migraine .w2   { animation-delay: -0.6s; }
.ws-ico-migraine .w3   { animation-delay: -1.2s; }

/* HOT CAR — slunce pulzuje, vlny horka stoupají vzhůru nad autem */
@keyframes ws-hot-sun  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ws-hot-wave { 0% { transform: translateY(2px); opacity: 0; } 25% { opacity: 0.75; } 75% { opacity: 0.45; } 100% { transform: translateY(-7px); opacity: 0; } }
.ws-ico-hotcar .sun   { transform-origin: 39px 10px; transform-box: fill-box; animation: ws-hot-sun 1.6s ease-in-out infinite; }
.ws-ico-hotcar .hwave { animation: ws-hot-wave 2.4s ease-in-out infinite; }
.ws-ico-hotcar .hw1   { animation-delay: 0s; }
.ws-ico-hotcar .hw2   { animation-delay: -0.8s; }
.ws-ico-hotcar .hw3   { animation-delay: -1.6s; }

/* --- ŘÍZENÍ PŘEHRÁVÁNÍ ------------------------------------------------- */
/* Defaultně na kartách pauza, na hover karty + na detail vždy běh. */

.card .ws-ico * { animation-play-state: paused; }
.card:hover .ws-ico *,
.stub-hero__scene .ws-ico * { animation-play-state: running; }

/* Respektuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .card__icon, .card__icon svg { transition: none; }
  .card:hover .card__icon { transform: none; box-shadow: none; }
  .ws-ico *, .stub-hero__scene .ws-ico *, .card:hover .ws-ico * { animation: none !important; transition: none !important; }
}
.card:not(.card--hero) .card__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.card__desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0 0 16px;
  flex: 1;
  text-wrap: pretty;
  hyphens: auto;
  /* Popisek je zaříznut na max 3 řádky — jedna delší věta nesmí
     protáhnout celou řadu gridu. Přesah se elegantně utne. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  gap: 8px;
}

/* Verdict pills */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.verdict--good { background: var(--green-50); color: var(--green-deep); }
.verdict--ok   { background: #FEF5E7; color: #A86B20; }
.verdict--warn { background: #FEF0E0; color: #A85820; }
.verdict--bad  { background: #FBEDED; color: var(--alert); }
.verdict--info { background: var(--blue-50); color: var(--blue); }
.verdict__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;   /* aby flexbox tečku nestlačil, když se dlouhý label
                       (např. „Smrtelně nebezpečné") zalomí na dva řádky */
  align-self: center;
}

.card__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.card__num sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
  margin-left: 3px;
  vertical-align: baseline;
  bottom: 0;
}

/* Category tags */
.card__tags {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 4px;
}
.tag-mini {
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: .01em;
}

/* Animations */
.anim-blow { animation: blow 4s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes blow {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  30% { transform: rotate(-3deg) skewX(-2deg); }
  60% { transform: rotate(2deg) skewX(1deg); }
}
.anim-pulse { animation: sunPulse 3s ease-in-out infinite; transform-origin: center; }
@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .85; }
}
.anim-drip { animation: drip 2s ease-in-out infinite; }
@keyframes drip {
  0% { transform: translateY(-2px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.anim-sway { animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.anim-spin-slow { animation: spin 20s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Filter state — non-matching cards fade */
.bento.filter-active .card:not(.card--hero) { opacity: .35; }
.bento.filter-active .card.matches { opacity: 1; }

/* ================================================================
   QA SECTION
   ================================================================ */
.qa-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 48px;
  margin-bottom: 56px;
}
.qa-section .pomucky-sec-head { margin-bottom: 0; }

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  margin-top: 28px;
}
.qa-item {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.qa-item:nth-last-child(-n+3) {
  border-bottom: none;
  padding-bottom: 0;
}
.qa-q {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -.005em;
}
.qa-a {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.qa-a strong {
  color: var(--blue);
  font-weight: 600;
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.how {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
.how__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.how__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 44px;
  color: var(--green);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
}
.how__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.how__desc {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ================================================================
   RESPONSIVE — breakpoint 960px
   ================================================================ */
@media (max-width: 960px) {
  .page-pomucky {
    padding: 24px 20px 60px;
  }
  .pomucky-hero {
    padding: 32px 24px 28px;
  }
  .pomucky-hero__top {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
  }
  .pomucky-hero__title { font-size: 44px; }
  .pomucky-hero__weather { padding: 20px 22px; }
  .pomucky-hero__weather-temp { font-size: 48px; }
  .pomucky-hero__filter { margin-top: 24px; padding-top: 20px; }
  .pomucky-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pomucky-sec-head__sub { text-align: left; max-width: none; }

  .bento {
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
  }
  .card--hero {
    grid-column: span 6;
    grid-row: auto;
    padding: 28px;
  }
  .card--hero .card__body { max-width: 100%; }
  .card--hero .card__scene {
    width: 120px;
    height: 120px;
    right: 20px;
    top: 20px;
  }
  .card--hero .card__title { font-size: 34px; }
  .card--md { grid-column: span 3; }
  .card--sm { grid-column: span 3; }

  .qa-section { padding: 28px 24px; }
  .qa-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .qa-item { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .qa-item:last-child { border-bottom: none; padding-bottom: 0; }

  .how {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .card--hero, .card--md, .card--sm { grid-column: span 2; }
  .card--hero .card__scene { display: none; }
  .card--hero .card__title { font-size: 28px; }
  .card--hero .card__stats { gap: 18px; flex-wrap: wrap; }
  .pomucky-hero__title { font-size: 36px; }
}

/* ============================================================================
   STUB DETAIL PAGE — stránka jedné pomůcky (cycling.php, running.php, …)
   Design parita s hlavní „Pomůcky" stránkou: verdict-tinted gradient hero,
   velká ikona, styled stats, color-coded „Jak to počítáme" kroky.
   ============================================================================ */
.page-stub { padding-top: 28px; }

.stub-hero {
  position: relative;
  background: linear-gradient(135deg, #F8FBF4 0%, #FFFFFF 70%);
  border: 1px solid var(--green-100);
  border-radius: 22px;
  padding: 40px 48px 44px;
  margin-bottom: 48px;
  overflow: hidden;
  min-height: 340px;
}
.stub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(102,188,41,.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(102,188,41,.06) 0%, transparent 60%);
}
.stub-hero > * { position: relative; z-index: 1; }

.stub-hero.stub-verdict-warn,
.page-stub.stub-verdict-warn .stub-hero {
  background: linear-gradient(135deg, #FEF7EC 0%, #FFFFFF 70%);
  border-color: #F6D9B0;
}
.stub-hero.stub-verdict-warn::before,
.page-stub.stub-verdict-warn .stub-hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(232,153,79,.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(232,153,79,.07) 0%, transparent 60%);
}

.stub-hero.stub-verdict-bad,
.page-stub.stub-verdict-bad .stub-hero {
  background: linear-gradient(135deg, #FBEDED 0%, #FFFFFF 70%);
  border-color: #F0BDBD;
}
.stub-hero.stub-verdict-bad::before,
.page-stub.stub-verdict-bad .stub-hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(192,48,48,.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(192,48,48,.06) 0%, transparent 60%);
}

.stub-hero.stub-verdict-ok,
.page-stub.stub-verdict-ok .stub-hero {
  background: linear-gradient(135deg, #FEF9F0 0%, #FFFFFF 70%);
  border-color: #F0DDB8;
}
.stub-hero.stub-verdict-ok::before,
.page-stub.stub-verdict-ok .stub-hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(216,156,58,.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(216,156,58,.05) 0%, transparent 60%);
}

.stub-hero.stub-verdict-info,
.page-stub.stub-verdict-info .stub-hero {
  background: linear-gradient(135deg, #EEF1FA 0%, #FFFFFF 70%);
  border-color: var(--blue-100);
}
.stub-hero.stub-verdict-info::before,
.page-stub.stub-verdict-info .stub-hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(0,32,114,.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(0,32,114,.04) 0%, transparent 60%);
}

/* Kicker pill */
.stub-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--green);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  margin-bottom: 24px;
}
.stub-hero__kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  animation: dotPulse 2s ease-in-out infinite;
}
.stub-verdict-warn .stub-hero__kicker { background: #E8994F; }
.stub-verdict-bad  .stub-hero__kicker { background: var(--alert); }
.stub-verdict-ok   .stub-hero__kicker { background: #D89C3A; }
.stub-verdict-info .stub-hero__kicker { background: var(--blue); }

/* Scene (big icon panel on the right) */
.stub-hero__scene {
  position: absolute;
  right: 48px;
  top: 88px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stub-hero__scene-box {
  width: 180px;
  height: 180px;
  border-radius: 40px;
  background: rgba(102,188,41,.18);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(15,25,51,.08), inset 0 0 0 1px rgba(255,255,255,.5);
}
.stub-hero__scene-box > svg {
  /* Ikona je navržena v 48×48 native size. Pro detail ji nechcame vidět
     v 48 px — vizuálně ji zvětšíme transformem (scale 2.4), aby se i
     animace zvětšily proporcionálně se zachovanou amplitudou. */
  width: 48px;
  height: 48px;
  display: block;
  overflow: visible;
  transform: scale(2.4);
  transform-origin: center;
}
/* Per-slug background color (matches color of the icon design itself,
   tj. stejné jako na kartách v tools.php). */
.stub-hero__scene-box--cycling      { background: #E3E6F2; }
.stub-hero__scene-box--garden       { background: #E7F2DA; }
.stub-hero__scene-box--fishing      { background: #DDEBF7; }
.stub-hero__scene-box--running      { background: #E1F5EE; }
.stub-hero__scene-box--dog_walk     { background: #FAEEDA; }
.stub-hero__scene-box--clothes      { background: #DDEBF7; }
.stub-hero__scene-box--comfort      { background: #FAEEDA; }
.stub-hero__scene-box--carwash      { background: #E3E6F2; }
.stub-hero__scene-box--astro        { background: #EEEDFE; }
.stub-hero__scene-box--fire_weather { background: #FCEBEB; }
.stub-hero__scene-box--mushrooms    { background: #FAECE7; }
.stub-hero__scene-box--swimming     { background: #DDEBF7; }
.stub-hero__scene-box--grilling     { background: #FAECE7; }
.stub-hero__scene-box--pollen       { background: #FAEEDA; }

/* Body (left side) */
.stub-hero__body {
  position: relative;
  max-width: 62%;
}
.stub-hero__lead {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 14px;
  color: var(--blue);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-style: italic;
}
.stub-hero__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.stub-hero__title em {
  font-style: italic;
  color: var(--green-deep);
}
.stub-verdict-warn .stub-hero__title em { color: #A85820; }
.stub-verdict-bad  .stub-hero__title em { color: var(--alert); }
.stub-verdict-ok   .stub-hero__title em { color: #A86B20; }
.stub-verdict-info .stub-hero__title em { color: var(--blue); }

.stub-hero__answer {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 28px;
  max-width: 560px;
}

/* Score + verdict meta */
.stub-hero__meta {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(102,188,41,.2);
}
.stub-verdict-warn .stub-hero__meta { border-top-color: rgba(232,153,79,.25); }
.stub-verdict-bad  .stub-hero__meta { border-top-color: rgba(192,48,48,.22); }
.stub-verdict-ok   .stub-hero__meta { border-top-color: rgba(216,156,58,.22); }
.stub-verdict-info .stub-hero__meta { border-top-color: rgba(0,32,114,.14); }

.stub-hero__score {
  min-width: 200px;
  flex: 0 0 auto;
}
.stub-hero__score-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 56px;
  color: var(--green-deep);
  line-height: 1;
  letter-spacing: -.02em;
}
.stub-hero__score-num .sub {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  color: var(--ink-muted);
  margin-left: 4px;
  font-weight: 400;
}
.stub-verdict-warn .stub-hero__score-num { color: #A85820; }
.stub-verdict-bad  .stub-hero__score-num { color: var(--alert); }
.stub-verdict-ok   .stub-hero__score-num { color: #A86B20; }
.stub-verdict-info .stub-hero__score-num { color: var(--blue); }

.stub-hero__score-lbl {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
}
.stub-hero__score-bar {
  width: 180px;
  height: 6px;
  background: rgba(15,25,51,.07);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}
.stub-hero__score-fill {
  height: 100%;
  background: var(--green);
  border-radius: 999px;
  transition: width .4s ease;
}
.stub-verdict-warn .stub-hero__score-fill { background: #E8994F; }
.stub-verdict-bad  .stub-hero__score-fill { background: var(--alert); }
.stub-verdict-ok   .stub-hero__score-fill { background: #D89C3A; }
.stub-verdict-info .stub-hero__score-fill { background: var(--blue); }

.stub-hero__verdict {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.stub-hero__headline-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stub-hero__headline-num-val {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
}
.stub-hero__headline-num-sub {
  font-size: 13px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Stats section */
.stub-stats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px;
  margin-bottom: 48px;
}
.stub-stats .pomucky-sec-head { margin-bottom: 22px; }
/* Auto-fit — zvládne 3 i 4 buňky (s AQ data) */
.stub-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 24px;
}
.stub-stat {
  padding: 16px 20px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.stub-stat__label {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.stub-stat__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 34px;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -.01em;
}
.stub-stat__num .sub {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink-muted);
  margin-left: 5px;
  font-weight: 400;
}
.stub-verdict-warn .stub-stat__num { color: #A85820; }
.stub-verdict-bad  .stub-stat__num { color: var(--alert); }
.stub-verdict-ok   .stub-stat__num { color: #A86B20; }
.stub-verdict-good .stub-stat__num { color: var(--green-deep); }

/* How-it-works section */
.stub-how-wrap { margin-bottom: 48px; }
.stub-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stub-how__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.stub-how__card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 20px rgba(15,25,51,.05);
  transform: translateY(-2px);
}
.stub-how__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background: var(--green);
  border-radius: 0 3px 0 0;
}
.stub-verdict-warn .stub-how__card::before { background: #E8994F; }
.stub-verdict-bad  .stub-how__card::before { background: var(--alert); }
.stub-verdict-ok   .stub-how__card::before { background: #D89C3A; }
.stub-verdict-info .stub-how__card::before { background: var(--blue); }

.stub-how__num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 48px;
  color: var(--green);
  line-height: 1;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.stub-verdict-warn .stub-how__num { color: #E8994F; }
.stub-verdict-bad  .stub-how__num { color: var(--alert); }
.stub-verdict-ok   .stub-how__num { color: #D89C3A; }
.stub-verdict-info .stub-how__num { color: var(--blue); }

.stub-how__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -.005em;
  line-height: 1.2;
}
.stub-how__desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.stub-back {
  margin-top: 40px;
  text-align: center;
}

/* Stub page responsive */
@media (max-width: 960px) {
  .stub-hero { padding: 28px 24px; min-height: 0; }
  .stub-hero__title { font-size: 40px; }
  .stub-hero__scene {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    justify-content: flex-start;
  }
  .stub-hero__scene-box { width: 120px; height: 120px; border-radius: 28px; }
  .stub-hero__scene-box > svg { width: 64px; height: 64px; }
  .stub-hero__body { max-width: 100%; }
  .stub-hero__meta { gap: 24px; }
  .stub-hero__score-bar { width: 150px; }
  .stub-stats { padding: 24px; }
  .stub-stats__grid { grid-template-columns: 1fr; gap: 14px; }
  .stub-how { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 600px) {
  .stub-hero__title { font-size: 32px; }
  .stub-hero__score-num { font-size: 44px; }
}