/* ========================================================================== 
   STP Louny — design systém a styly
   Barvy, typografie a rozestupy vycházejí ze schváleného návrhu homepage.
   ========================================================================== */

/* --- Lokální písmo --------------------------------------------------------- */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset ---------------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Responzivní obrazový zdroj — stabilní blokový obal pro flex/grid layouty.
   Konkrétní komponenty níže mu nastavují výšku jen tam, kde ji potřebují. */
.responsive-picture {
  display: block;
  width: 100%;
  min-width: 0;
}

.responsive-picture > img {
  width: 100%;
}

.product-gallery__item > .responsive-picture,
.shop-gallery__item > .responsive-picture,
.photo-strip__link > .responsive-picture,
.laundry-gallery__item > .responsive-picture,
.split-section__media > .responsive-picture,
.map-card__preview > .responsive-picture {
  height: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* --- Design tokens ---------------------------------------------------------- */

:root {
  /* Barvy — schválená paleta STP Louny */
  --color-primary: #155B8A;
  --color-secondary: #0B3D5C;
  --color-accent: #B65316;
  --color-accent-hover: #96410F;
  --color-white: #FFFFFF;
  --color-background: var(--color-white);
  --color-text: #333333;
  --color-text-muted: #6B7680;
  --color-cream: #FBF5E4;
  --color-sand: #F3EBDB;
  --color-sand-dark: #D8C7AA;
  --color-blue-light: #EAF4F9;
  --color-blue-medium: #DCEAF3;
  --color-blue-line: #CFE2EC;
  --color-border-cool: #DDE6EB;
  --color-neutral-bg: #F7F9FA;
  --color-footer-line: #1b5679;
  --color-footer-soft: #376079;

  /* Typografie */
  --font-base: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --fs-small: 1rem;          /* 16px */
  --fs-body-alt: 1.0625rem;  /* 17px */
  --fs-body: 1.125rem;       /* 18px */
  --fs-kicker: 1.125rem;     /* 18px */
  --fs-h3: clamp(1.2rem, 1.076rem + 0.53vw, 1.5rem);     /* ~19px–24px */
  --fs-h2: clamp(1.625rem, 1.2625rem + 1.55vw, 2.5rem);  /* ~26px–40px */
  --fs-hero: clamp(1.75rem, 1.336rem + 1.77vw, 2.75rem); /* ~28px–44px */
  --fs-service-title: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); /* ~36px–56px — krátké nadpisy podstránek služeb */
  --fs-account: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);    /* ~24px–28px */
  --fs-logo: 1.3125rem;      /* 21px */

  --lh-tight: 1.18;
  --lh-heading: 1.4;
  --lh-body: 1.6;
  --lh-body-loose: 1.65;

  /* Rozestupy */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* Zaoblení */
  --radius-sm: 0.1875rem; /* 3px */
  --radius-md: 0.25rem;   /* 4px — tlačítka */
  --radius-lg: 0.75rem;   /* 12px — boxy a výraznější plochy */
  --radius-full: 50%;

  /* Layout — přesně dle instrukce.md: šířka webu 85 % obrazovky,
     maximální šířka textových bloků 70 % obrazovky. Žádné jiné
     omezení šířky (max-width, padding hlavního kontejneru). */
  --container-width: 85%;
  --text-max-width: 70vw;

  --transition-fast: 150ms ease;
}

/* --- Base ------------------------------------------------------------------ */

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-background);
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--color-text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Lokální SVG ikony — stejný maskovací princip jako u ostatních ikon webu.
   Barva se dědí přes currentColor, takže zůstávají zachované všechny stavy
   hover/focus bez externího ikonového fontu. */
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.125em;
}

.ui-icon--bars {
  -webkit-mask-image: url("/Obrazky/ikony/bars.svg");
  mask-image: url("/Obrazky/ikony/bars.svg");
}

.ui-icon--xmark {
  -webkit-mask-image: url("/Obrazky/ikony/xmark.svg");
  mask-image: url("/Obrazky/ikony/xmark.svg");
}

.ui-icon--chevron-down {
  -webkit-mask-image: url("/Obrazky/ikony/chevron-down.svg");
  mask-image: url("/Obrazky/ikony/chevron-down.svg");
}

.ui-icon--house {
  -webkit-mask-image: url("/Obrazky/ikony/house.svg");
  mask-image: url("/Obrazky/ikony/house.svg");
}

.ui-icon--circle-exclamation {
  -webkit-mask-image: url("/Obrazky/ikony/circle-exclamation.svg");
  mask-image: url("/Obrazky/ikony/circle-exclamation.svg");
}

.ui-icon--circle-info {
  -webkit-mask-image: url("/Obrazky/ikony/circle-info.svg");
  mask-image: url("/Obrazky/ikony/circle-info.svg");
}

.ui-icon--clock {
  -webkit-mask-image: url("/Obrazky/ikony/clock.svg");
  mask-image: url("/Obrazky/ikony/clock.svg");
}

.ui-icon--download {
  -webkit-mask-image: url("/Obrazky/ikony/download.svg");
  mask-image: url("/Obrazky/ikony/download.svg");
}

.ui-icon--external-link {
  -webkit-mask-image: url("/Obrazky/ikony/arrow-up-right-from-square.svg");
  mask-image: url("/Obrazky/ikony/arrow-up-right-from-square.svg");
}

.ui-icon--puzzle-piece {
  -webkit-mask-image: url("/Obrazky/ikony/puzzle-piece.svg");
  mask-image: url("/Obrazky/ikony/puzzle-piece.svg");
}

.ui-icon--shirt {
  -webkit-mask-image: url("/Obrazky/ikony/shirt.svg");
  mask-image: url("/Obrazky/ikony/shirt.svg");
}

.ui-icon--shoe-prints {
  -webkit-mask-image: url("/Obrazky/ikony/shoe-prints.svg");
  mask-image: url("/Obrazky/ikony/shoe-prints.svg");
}

.ui-icon--wheelchair {
  -webkit-mask-image: url("/Obrazky/ikony/wheelchair.svg");
  mask-image: url("/Obrazky/ikony/wheelchair.svg");
}

.ui-icon--facebook {
  -webkit-mask-image: url("/Obrazky/ikony/facebook.svg");
  mask-image: url("/Obrazky/ikony/facebook.svg");
}

.text-semibold {
  font-weight: 600;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Přístupnost ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

.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;
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.site-footer :focus-visible {
  outline-color: var(--color-white);
}

/* --- Layout ------------------------------------------------------------- */

.container {
  width: var(--container-width);
  max-width: 90rem; /* 1440px */
  margin-inline: auto;
}

.section {
  background: var(--color-background);
}

.section--tinted {
  background: var(--color-cream);
}

.section--tinted-blue {
  background: var(--color-blue-light);
}

.section--tinted-neutral {
  background: var(--color-neutral-bg);
}

/* --- Chybová stránka 404 --- */
.error-page {
  background: var(--color-blue-light);
}

.error-page .container {
  padding-block: 4.75rem;
}

.error-page__panel {
  width: min(100%, 52rem);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.error-page__title {
  font-size: var(--fs-hero);
  line-height: 1.15;
}

.error-page__text,
.error-page__help {
  max-width: 42rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
}

.error-page__help a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.error-page__help a:hover {
  color: var(--color-secondary);
}

@media (max-width: 40rem) {
  .error-page .container {
    padding-block: var(--space-6);
  }

  .error-page__panel {
    padding: var(--space-5);
  }
}

/* --- Header / navigace ---------------------------------------------------- */

.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  padding-block: 1rem; /* 16px */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  min-width: 0;
}

.logo__mark {
  width: 2.75rem;
  height: auto;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  flex-shrink: 0;
}

.logo__wordmark {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 0.125rem;
  color: var(--color-secondary);
  line-height: 1.15;
}

.logo__wordmark-main,
.logo__wordmark-sub {
  display: block;
}

.logo__wordmark-main {
  font-size: 1rem;
  font-weight: 700;
}

.logo__wordmark-sub {
  font-size: 1rem;
  font-weight: 600;
}

.nav-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
  color: var(--color-secondary);
  border-radius: var(--radius-md);
}

.nav-toggle .ui-icon--xmark {
  display: none;
}

.nav-toggle[aria-expanded="true"] .ui-icon--bars {
  display: none;
}

.nav-toggle[aria-expanded="true"] .ui-icon--xmark {
  display: block;
}

.primary-nav {
  order: 3;
  flex-basis: 100%;
  display: none;
}

.primary-nav.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.primary-nav__link {
  display: block;
  padding: var(--space-2) 0.5625rem; /* 8px 9px */
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  background: var(--color-blue-light);
  color: var(--color-secondary);
  border-bottom-color: transparent;
}

.primary-nav__link[aria-current] {
  background: var(--color-blue-light);
  color: var(--color-secondary);
  border-bottom-color: transparent;
}

/* Položka navigace s rozbalovacím podmenu (např. Služby) */
.primary-nav__item--has-submenu {
  position: relative;
}

.primary-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  width: 100%;
}

.primary-nav__toggle-icon {
  font-size: 0.8125rem;
  transition: transform var(--transition-fast);
}

.primary-nav__toggle[aria-expanded="true"] .primary-nav__toggle-icon {
  transform: rotate(180deg);
}

.primary-nav__submenu {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: var(--space-4);
}

.primary-nav__submenu.is-open {
  display: flex;
  margin-top: 0.125rem;
  margin-bottom: 0.25rem;
}

.primary-nav__submenu-link {
  display: block;
  padding: var(--space-2) 0.5625rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: var(--radius-md);
}

.primary-nav__submenu-link:hover,
.primary-nav__submenu-link:focus-visible {
  background: var(--color-blue-light);
  color: var(--color-secondary);
  border-left-color: transparent;
}

.primary-nav__submenu-link[aria-current] {
  background: var(--color-blue-light);
  color: var(--color-secondary);
  border-left-color: transparent;
}

.primary-nav__submenu-link[aria-current]:not(:hover):not(:focus-visible) {
  border-left-width: 0;
}

.site-header__cta {
  display: inline-block;
  align-self: flex-start;
  padding: 0.625rem 1.125rem; /* 10px 18px */
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.site-header__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
}

@media (min-width: 72rem) { /* 1152px — plná navigace potřebuje více místa */
  .site-header .container {
    gap: 0.75rem 1.5rem;
  }

  .logo {
    flex: 0 1 auto;
    gap: var(--space-3);
  }

  .logo__mark {
    width: clamp(3.5rem, 6vw, 4.75rem);
  }

  .logo__wordmark {
    max-width: 18rem;
  }

  .logo__wordmark-main {
    font-size: clamp(1rem, 0.86rem + 0.33vw, 1.125rem);
  }

  .logo__wordmark-sub {
    font-size: 1rem;
  }

  .nav-toggle {
    display: none;
  }

  .primary-nav {
    order: 0;
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem 0.375rem;
    padding-top: 0;
  }

  .primary-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.375rem;
  }

  .site-header__cta {
    align-self: center;
    margin-left: var(--space-2);
  }

  .primary-nav__toggle {
    width: auto;
  }

  .primary-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 20rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: var(--space-2);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 0.5rem 1.5rem rgba(11, 61, 92, 0.12);
  }

  .primary-nav__item--has-submenu:hover > .primary-nav__submenu {
    display: flex;
    margin-top: 0;
    margin-bottom: 0;
  }

  .primary-nav__item--has-submenu:hover .primary-nav__toggle-icon {
    transform: rotate(180deg);
  }

  .primary-nav__submenu.is-open {
    margin-top: 0;
    margin-bottom: 0;
  }

  .primary-nav__submenu-link {
    white-space: nowrap;
  }
}

/* --- Tlačítka ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
  padding: 0.875rem 1.625rem; /* 14px 26px */
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.btn--secondary {
  padding: 0.8125rem 1.5625rem; /* 13px 25px */
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-blue-light);
  color: var(--color-secondary);
}

.btn--accent {
  padding: 0.875rem 1.625rem; /* 14px 26px */
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--accent:hover {
  background: var(--color-accent-hover);
  color: var(--color-white);
}

.link-more {
  position: relative;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
}

.link-more::before {
  content: "";
  position: absolute;
  inset: -0.625rem -0.25rem;
}

.link-more:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* --- Placeholder fotografie ------------------------------------------------- */

.placeholder-image {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-cool);
  background: var(--color-blue-light);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
}

.placeholder-image__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-primary);
  background: var(--color-white);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* Koláž více fotek místo jednoho placeholderu — použij ve split-section
   tam, kde chceme výrobky ukázat na víc snímcích (např. Obchůdek pro radost).
   Velká dlaždice + dvě menší vedle sebe, obě sloupce/řádky rovnoměrně. */
.product-gallery {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: repeat(2, minmax(9rem, 1fr));
  gap: var(--space-4);
  min-height: 19rem; /* 304px — o něco víc prostoru než běžný .split-section__media */
}

.product-gallery__main {
  grid-row: 1 / 3;
}

.product-gallery--equipment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  width: 100%;
  max-width: 32rem;
  min-height: 0;
  height: auto;
  margin-inline: auto;
  justify-self: center;
}

.product-gallery--equipment .product-gallery__item {
  aspect-ratio: 3 / 4;
}

.product-gallery--equipment .product-gallery__item img {
  object-fit: cover;
}

.product-gallery--decorations {
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: minmax(10rem, 1fr) minmax(18rem, 1.55fr);
  min-height: 0;
  height: clamp(31rem, 47vw, 38rem);
}

.product-gallery--textiles {
  min-height: 0;
  height: clamp(24rem, 38vw, 30rem);
}

.product-gallery__item {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-bg);
}

.product-gallery__item--wide-crop {
  align-self: start;
  aspect-ratio: 4 / 3;
}

.product-gallery__item img {
  width: 100%;
  height: 100%;
  min-height: 7.5rem;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.product-gallery__item--wide-crop img {
  min-height: 0;
  object-position: center 38%;
}

.product-gallery__item--contain img {
  object-fit: cover;
  object-position: center center;
}

.product-gallery__item:hover img,
.product-gallery__item:focus-visible img {
  transform: scale(1.04);
}

.shop-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, minmax(8rem, 1fr));
  gap: var(--space-4);
  min-height: 18.75rem;
}

.shop-gallery__item {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-bg);
}

.shop-gallery__item--main {
  grid-row: 1 / 3;
}

.shop-gallery__item img {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.shop-gallery__item:hover img,
.shop-gallery__item:focus-visible img {
  transform: scale(1.04);
}

/* --- Lightbox --------------------------------------------------------------- */

.lightbox {
  width: min(90vw, 72rem);
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-text);
}

.lightbox::backdrop {
  background: rgba(11, 61, 92, 0.78);
}

.lightbox__inner {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.lightbox__close {
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-secondary);
  background: var(--color-blue-light);
  border-radius: var(--radius-md);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  color: var(--color-white);
  background: var(--color-secondary);
}

.lightbox__media {
  position: relative;
}

.lightbox__image {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-bg);
}

.lightbox__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-secondary);
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  transform: translateY(-50%);
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  color: var(--color-white);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.lightbox__nav--previous {
  left: var(--space-3);
}

.lightbox__nav--next {
  right: var(--space-3);
}

.lightbox__nav--previous .ui-icon {
  transform: rotate(90deg);
}

.lightbox__nav--next .ui-icon {
  transform: rotate(-90deg);
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__caption {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* --- Hero ------------------------------------------------------------------ */

.hero .container {
  padding-block: 4rem 4.25rem; /* 64px 68px */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  align-items: center;
}

.hero__content {
  flex: 1.35 1 21.25rem; /* 340px */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero__kicker {
  font-size: var(--fs-kicker);
  line-height: var(--lh-heading);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--color-text);
}

.hero__title-highlight {
  color: var(--color-primary);
}

.hero__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-width);
}

.hero__lead--strong {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text);
}

/* Textové hero bez fotky (podstránky služeb) — vystředěný užší sloupec,
   ať obsah nepůsobí ztraceně v prázdné ploše bez protějšku fotky */
.section--tinted-blue .hero__content {
  flex: 0 1 100%;
  max-width: 40rem; /* 640px */
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.section--tinted-blue .hero__title {
  font-size: var(--fs-service-title);
}

.section--tinted-blue .hero__lead {
  font-size: 1.25rem; /* 20px */
  max-width: 42rem;
  margin-inline: auto;
}

.section--tinted-blue .hero__lead--strong {
  max-width: 42rem;
  margin-inline: auto;
}

.section--tinted-blue .hero__actions {
  justify-content: center;
}

/* Tmavá varianta hero pro výraznější servisní stránky. */
.hero--dark {
  background: var(--color-secondary);
}

.hero--dark .hero__title,
.hero--dark .hero__lead,
.hero--dark .hero__lead--strong {
  color: var(--color-white);
}

.hero--dark .hero__kicker {
  color: var(--color-sand);
}

.hero--dark .btn--primary {
  background: var(--color-accent);
}

.hero--dark .btn--primary:hover {
  background: var(--color-accent-hover);
}

.hero--dark .btn--secondary {
  border-color: var(--color-white);
}

.hero--dark :focus-visible {
  outline-color: var(--color-white);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 0.25rem;
}

/* Tlačítko s ikonou (např. telefon) */
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.btn__icon--phone {
  flex-shrink: 0;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/Obrazky/phone-128.png");
  mask-image: url("/Obrazky/phone-128.png");
}

.hero__media {
  flex: 1.55 1 22rem; /* 352px */
  min-width: 0;
  min-height: 28rem; /* 448px */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  min-height: 28rem; /* 448px */
  height: 100%;
  object-fit: cover;
}

@media (max-width: 63.999rem) { /* tablet a mobil */
  .hero--home .container {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-6);
    padding-bottom: 0;
  }

  .hero--home .hero__content {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .hero--home .hero__media {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .hero--home .hero__media img {
    min-height: 0;
    height: 100%;
    object-position: center;
  }
}

@media (min-width: 64rem) { /* 1024px */
  .hero--home .container {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: var(--space-6);
    align-items: stretch;
    width: var(--container-width);
    max-width: 90rem; /* 1440px — stejně jako základní kontejner webu */
    margin-inline: auto;
    padding-inline: 0;
    padding-block: 0;
  }

  .hero--home .hero__content {
    max-width: 48rem;
    padding-block: 6.25rem 7.75rem;
  }

  .hero--home .hero__media {
    width: 90%;
    height: 90%;
    min-height: 0;
    align-self: center;
    justify-self: end;
  }

  .hero--home .hero__media img {
    min-height: 100%;
  }
}

@media (min-width: 80rem) { /* 1280px */
  .hero--home .container {
    grid-template-columns: minmax(0, 1fr) clamp(38rem, 42vw, 52rem);
  }
}

/* --- Aktuality ------------------------------------------------------------- */

.news {
  background: linear-gradient(
    to bottom,
    var(--color-cream) 0 3rem,
    var(--color-background) 3rem 100%
  );
}

.news .container {
  padding-block: 1.5rem 3.5rem; /* 24px 56px */
}

.news__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-7); /* 48px */
}

.news__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  text-align: center;
}

/* Mobile-first: 1 sloupec, na středních obrazovkách 2, na desktopu
   pevně 4 boxy vedle sebe. */
.news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 40rem) { /* 640px */
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) { /* 1024px */
  .news__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .news .news__card-title {
    font-size: 1.25rem; /* 20px */
  }

  .news .news__card-text {
    font-size: var(--fs-body-alt); /* 17px */
  }
}

.news__card {
  position: relative;
  min-height: 18rem;
  background: var(--color-white);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg);
  padding: 2.25rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-3);
  box-shadow: 0 0.5rem 1.5rem rgba(11, 61, 92, 0.12);
  transform-origin: center top;
}

.news__card:nth-child(1) {
  transform: translateY(0.125rem) rotate(-0.7deg);
}

.news__card:nth-child(2) {
  transform: translateY(-0.125rem) rotate(0.5deg);
}

.news__card:nth-child(3) {
  transform: rotate(-0.4deg);
}

.news__card:nth-child(4) {
  transform: translateY(0.125rem) rotate(0.7deg);
}

.news__card::before {
  content: "";
  position: absolute;
  top: -0.875rem;
  left: 50%;
  width: 6rem;
  height: 1.75rem;
  background: var(--color-sand);
  border: 1px solid rgba(11, 61, 92, 0.1);
  box-shadow: 0 0.125rem 0.25rem rgba(11, 61, 92, 0.1);
  opacity: 0.82;
  z-index: 1;
  transform: translateX(-50%) rotate(-2deg);
}

.news__card:nth-child(even)::before {
  transform: translateX(-50%) rotate(1.5deg);
}

.news__card-kicker {
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.news__card-kicker--info {
  background: var(--color-blue-light);
  color: var(--color-secondary);
}

.news__card-kicker--warning {
  background: var(--color-cream);
  color: var(--color-accent);
}

.news__card-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.news__card-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  flex: 1;
}

/* Lísteček s upozorněním na Euroklíči — pískový okraj místo bílé bez
   okraje, na desktopu posunutý nahoru, ať vizuálně „přiléhá“ k hero
   sekci nad ním. */
#pomoc .news__card {
  background: var(--color-cream);
  transform: rotate(0.7deg);
}

#pomoc .news__card::before {
  background: var(--color-blue-light);
}

@media (min-width: 64rem) { /* 1024px — stejná hranice jako split-section--uneven */
  #pomoc .news__card {
    margin-top: -5.5rem; /* -88px */
  }
}

/* --- Sekce (obecné nadpisy) -------------------------------------------------- */

.eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.section-heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.section-lead {
  font-size: var(--fs-body);
  max-width: var(--text-max-width);
}

/* --- Služby ------------------------------------------------------------------ */

.services {
  padding-block: 4.75rem; /* 76px */
}

.services__heading {
  margin-bottom: var(--space-2);
}

.services__lead {
  margin-bottom: var(--space-6);
}

/* Mobile-first: 1 sloupec, na tabletu 2 sloupce (2+2+2), na desktopu
   pevně 3 sloupce (3+3) — vždy vyrovnané řazení pro 6 boxů (5 služeb + CTA),
   stejný princip jako pravidlo pro 4 karty "2+2, ne 3+1" v instrukce.md. */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) { /* 1024px */
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.services__item {
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem; /* 28px ze všech stran */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.services__item--link {
  color: inherit;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.services__item--link:hover,
.services__item--link:focus-visible {
  background: var(--color-blue-medium);
  color: inherit;
}

.services__item-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.services__icon {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1.5rem;
}

/* Vlastní ikony (PNG) obarvené na brandovou oranžovou přes CSS mask */
.services__icon--taxi,
.services__icon--pujcovna,
.services__icon--domacnost,
.services__icon--klubovna,
.services__icon--klic {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.services__icon--taxi {
  -webkit-mask-image: url("/Obrazky/senior_taxi-128.png");
  mask-image: url("/Obrazky/senior_taxi-128.png");
}

.services__icon--pujcovna {
  -webkit-mask-image: url("/Obrazky/pujcovna_pomucek-128.png");
  mask-image: url("/Obrazky/pujcovna_pomucek-128.png");
}

.services__icon--domacnost {
  -webkit-mask-image: url("/Obrazky/pomoc_v_domacnosti-128.png");
  mask-image: url("/Obrazky/pomoc_v_domacnosti-128.png");
}

.services__icon--klubovna {
  -webkit-mask-image: url("/Obrazky/klubovna-128.png");
  mask-image: url("/Obrazky/klubovna-128.png");
}

.services__icon--klic {
  -webkit-mask-image: url("/Obrazky/klic-128.png");
  mask-image: url("/Obrazky/klic-128.png");
}

.services__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.services__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  flex: 1;
}

/* Karta s fotkou místo ikony (např. Obchůdek pro radost) */
.services__item .placeholder-image {
  min-height: 12.5rem; /* 200px */
}

/* Výčet položek uvnitř karty — užší sloupec než běžné využití
   .rules-list, proto necháváme jeden sloupec a menší rozestup, stejný
   princip jako u .split-section__content .rules-list níže. */
.services__item .rules-list {
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: 0;
}

.services__item--cta {
  background: none;
  align-items: flex-start;
  justify-content: center;
}

.services__cta-text {
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--color-text);
}

.services__item--cta .btn {
  align-self: flex-start;
}

/* --- Dobrodějka ---------------------------------------------------------------- */

.charity {
  padding-block: 4.75rem; /* 76px */
}

.charity .eyebrow {
  text-align: center;
}

.charity__heading {
  margin-bottom: var(--space-2);
  text-align: center;
}

.charity__lead {
  margin-bottom: 2.5rem; /* 40px */
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 40rem) { /* 640px — mobil */
  .charity .eyebrow,
  .charity__heading,
  .charity__lead {
    text-align: left;
  }
}

.charity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); /* 320px */
  gap: 2.75rem; /* 44px */
}

.charity-card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px */
}

.charity-card .placeholder-image {
  min-height: 14.375rem; /* 230px */
}

.charity-card__image {
  width: 100%;
  min-height: 14.375rem; /* 230px */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.charity-card__title {
  font-size: clamp(1.25rem, 0.939rem + 1.33vw, 2rem); /* ~20px–32px */
  font-weight: 700;
}

.charity-card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
}

.charity-card .btn--secondary {
  align-self: flex-start;
}

/* --- Dvousloupcové bloky (Akce, O nás) ------------------------------------------ */

.split-section .container {
  padding-block: 4.75rem; /* 76px */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); /* 300px */
  gap: var(--space-7);
  align-items: center;
}

.split-section--about .container {
  padding-block: 4.5rem; /* 72px */
}

/* Dva textové sloupce stejné důležitosti (např. Pomoc v domácnosti) —
   na rozdíl od textu + fotky je chceme zarovnat nahoru, ne na střed. */
.split-section--top .container {
  align-items: start;
}

/* Obsah v krémovém zaobleném boxu místo krémového pozadí přes celou
   šířku sekce (např. „Každý nákup má dvojí smysl“ u Obchůdku pro radost). */
.split-section--boxed .container {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-7); /* 48px */
}

.split-section--boxed {
  padding-block: 4.75rem; /* 76px — stejné svislé odsazení jako běžná .split-section */
}

@media (min-width: 64rem) { /* 1024px */
  .split-section--uneven .container {
    grid-template-columns: 3fr 2fr;
  }

  .split-section--gallery-wide .container {
    grid-template-columns: 2fr 3fr;
  }

  .split-section--prani .container {
    grid-template-columns: minmax(18rem, 1.1fr) minmax(0, 1fr);
  }

  .split-section--gallery-left .container {
    grid-template-columns: 3fr 2fr;
  }

  .split-section--zakazky .container {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.1fr);
  }

  .split-section--portrait-media .container {
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  }
}

.split-section__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.split-section__content > .eyebrow {
  margin-bottom: -0.75rem;
}

.split-section__heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.split-section__subheading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.split-section__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-width);
}

.split-section .btn {
  align-self: flex-start;
}

.split-section__media {
  min-width: 0;
  width: 100%;
  min-height: 18.75rem; /* 300px */
}

.split-section__media img {
  width: 100%;
  height: 100%;
  min-height: 18.75rem; /* 300px */
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Nadpis otevírací doby je přes oba sloupce; pod ním je fotografie vlevo
   a samostatný box s rozpisem hodin vpravo. */
#oteviraci-doba .split-section__intro {
  grid-column: 1 / -1;
}

@media (min-width: 64rem) { /* 1024px */
  #oteviraci-doba .container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.split-section__media--portrait {
  width: min(100%, 26rem);
  min-height: 0;
  justify-self: center;
}

.split-section__media--portrait img {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.split-section__media--square {
  aspect-ratio: 1 / 1;
}

.split-section__media--prani {
  width: min(100%, 36rem);
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
  justify-self: center;
}

.split-section__media--prani img {
  min-height: 0;
  object-position: center 48%;
}

.split-section__media--compact {
  width: min(100%, 36rem);
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
  justify-self: center;
}

.split-section__media--compact img {
  min-height: 0;
}

.split-section__media--landscape {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.split-section__media--landscape img {
  min-height: 0;
  object-position: center 55%;
}

.split-section__media--senior-taxi {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.split-section__media--senior-taxi img {
  border-radius: 0;
  object-position: left center;
  transform: scale(1.08);
  transform-origin: left center;
}

.split-section--about .split-section__media {
  min-height: 16.25rem; /* 260px */
}

/* Uvnitř split-section je sloupec užší než celá sekce — seznam
   necháváme v jednom sloupci i na větších obrazovkách a s menším
   rozestupem mezi řádky, ať se do sloupce vejde víc odrážek. Vlastní
   margin-top rušíme — rozestup od nadpisu už dává gap rodičovského
   .split-section__content, stejně jako u ostatních prvků uvnitř. */
.split-section__content .rules-list,
.split-section__panel .rules-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: 0;
}

/* Jednoduchá odrážka v oranžové brandové barvě (např. u Pomoci
   v domácnosti) místo obecné fajfky nebo ikonky. Odrážka je box
   vysoký přesně jako první řádek textu a puntík (::before) je v něm
   vystředěný — díky tomu sedí na úroveň textu i u víceřádkových vět. */
.rules-list__icon--dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-2); /* 8px */
  height: calc(var(--fs-body) * var(--lh-body-loose));
  flex-shrink: 0;
}

.rules-list__icon--dot::before {
  content: "";
  width: 100%;
  height: var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

/* Podbarvený panel v druhém sloupci split-section — použij, když tam
   místo placeholder fotky patří krátký doplňkový text (např. otevírací
   doba u Pomoci v domácnosti). */
.split-section__panel {
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.split-section__panel-heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.split-section__panel-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Vystředěný text v sekci „Co je Euroklíč?“ — obecný limit 70vw je pro
   samostatný centrovaný text na širokých obrazovkách příliš dlouhý. */
#co-je .section-heading {
  margin-bottom: var(--space-2);
  text-align: center;
}

#co-je .section-heading + .section-lead {
  margin-top: var(--space-2);
}

#co-je .section-lead {
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

/* Vystředěná závěrečná sekce „Kam už jsme společně vyrazili“ (Akce). */
#fotogalerie .section-heading {
  margin-bottom: var(--space-4);
  text-align: center;
}

#fotogalerie .section-lead {
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

#fotogalerie .link-more {
  display: block;
  text-align: center;
}

#kdo-muze .section-heading,
#kde.prose-section .section-heading {
  margin-bottom: var(--space-4);
}

#kde.prose-section .section-lead {
  max-width: 50rem;
  margin-bottom: var(--space-4);
}

/* Obecná dvousloupcová mřížka pro obsah pod section-heading (např.
   „Kdo může Euroklíč získat?“, „Co je Euroklíč?“). */
.split-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .split-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.split-columns .rules-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: 0;
}

/* Seznam odkazů uvnitř tematické skupiny (stránka Užitečné odkazy) —
   řádky oddělené jemnou linkou, celý řádek je klikací plocha. */
.link-list {
  display: flex;
  flex-direction: column;
}

.link-list__item {
  border-top: 1px solid var(--color-border-cool);
}

.link-list__item:first-child {
  border-top: none;
}

.link-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.link-list__link:hover,
.link-list__link:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
}

.link-list__icon {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

#kdo-muze .split-columns > .split-section__content {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

#kdo-muze .highlight-note {
  background: var(--color-white);
}

.intro-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.intro-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-secondary);
}

.intro-info__item .visit-panel__icon {
  margin-top: 0.25rem;
}

/* Varianta split-section s řádkem karet-kotev pod textem a fotkou
   (např. Obchůdek pro radost). Container přestává být sám grid pro
   text+fotku — tu grid dostane vlastní vnitřní řádek (.split-section__row),
   aby karty pod ním nezabíraly grid-sloupec a text s fotkou se nezúžily. */
.split-section--with-links .container {
  display: block;
}

.split-section__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); /* 300px */
  gap: var(--space-7);
  align-items: center;
}

/* 4 karty → na desktopu 2 na řádek (2+2), ne 3+1, viz instrukce.md. */
.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7); /* 48px — stejný rozestup jako gap výše */
}

@media (min-width: 40rem) { /* 640px */
  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quick-links__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-neutral-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem; /* 28px — stejně jako .services__item */
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}

/* Barva pozadí při hoveru patří jen tam, kde je klikací celá karta
   (tedy <a>) — když je klikací jen odkaz „Více o…“ uvnitř (viz níže),
   karta je <div> a tohle pravidlo se na ni nevztahuje. */
a.quick-links__card:hover,
a.quick-links__card:focus-visible {
  background: var(--color-blue-light);
  color: inherit; /* karta je <a> — bez tohoto by text zdědil barvu a:hover */
}

/* Na podbarvené sekci (např. „Jak pomáháme“ u O organizaci) potřebují
   karty bílé pozadí, ať jsou vidět — jinde sedí na bílé ploše, tam
   zůstává výchozí --color-neutral-bg. */
.quick-links--blue .quick-links__card {
  background: var(--color-blue-light);
}

.quick-links--blue a.quick-links__card:hover,
.quick-links--blue a.quick-links__card:focus-visible {
  background: var(--color-blue-medium);
}

#jak-pomahame .quick-links__card {
  background: var(--color-white);
}

.quick-links__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Vlastní ikony (PNG) obarvené na brandovou oranžovou přes CSS mask —
   stejná technika jako .services__icon--*. */
.quick-links__icon {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  opacity: 1;
}

.quick-links__icon--site-vyrobky {
  width: 1.9rem;
  height: 1.9rem;
  -webkit-mask-image: url("/Obrazky/Site_vyrobky-128.png");
  mask-image: url("/Obrazky/Site_vyrobky-128.png");
}

.quick-links__icon--dekorace {
  width: 2.5rem;
  height: 2.5rem;
  -webkit-mask-image: url("/Obrazky/dekorace_a_drobnosti-128.png");
  mask-image: url("/Obrazky/dekorace_a_drobnosti-128.png");
}

.quick-links__icon--prani {
  -webkit-mask-image: url("/Obrazky/prani-128.png");
  mask-image: url("/Obrazky/prani-128.png");
}

.quick-links__icon--zakazky {
  width: 2.4rem;
  height: 2.4rem;
  -webkit-mask-image: url("/Obrazky/zakazkove_siti-128.png");
  mask-image: url("/Obrazky/zakazkove_siti-128.png");
}

.quick-links__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.quick-links__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  flex: 1;
}

.card-link-text {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  align-self: flex-start;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  text-decoration: none;
}

.services__item--link:hover .card-link-text,
.services__item--link:focus-visible .card-link-text,
a.quick-links__card:hover .card-link-text,
a.quick-links__card:focus-visible .card-link-text,
.card-link-text:hover,
.card-link-text:focus-visible {
  color: var(--color-secondary);
}

.card-link-text:hover,
.card-link-text:focus-visible {
  text-decoration: underline;
}

/* --- Podpořte nás ---------------------------------------------------------------- */

.support {
  padding-block: 4.75rem; /* 76px — stejný rytmus jako ostatní běžné sekce */
}

.support .container {
  padding-top: 0;
}

.support__panel {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-7); /* 48px */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

.support__panel--cta {
  background: var(--color-sand);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .support__panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

.support__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.support__heading {
  font-size: var(--fs-h2);
  font-weight: 700;
}

.support__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-width);
}

.support__account {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.support__account-label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.support__account-number {
  font-size: var(--fs-account);
  font-weight: 700;
  color: var(--color-secondary);
}

.support .btn--accent {
  align-self: flex-start;
}

.support__qr {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.support__qr-image,
.support__qr-placeholder {
  width: 14.375rem; /* 230px */
  height: 14.375rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
}

.support__qr-image {
  object-fit: contain;
}

.support__qr-placeholder {
  border: 1px solid var(--color-border-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.support__qr-placeholder span {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-primary);
}

.support__qr-caption {
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* Karty podporovatelů (stránka Podpořte nás). */
.supporters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (min-width: 40rem) { /* 640px */
  .supporters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) { /* 1024px */
  .supporters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.supporters-grid__item {
  min-height: 8rem;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-cool);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

.supporters-grid__logo {
  max-width: min(100%, 13rem);
  max-height: 5.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.supporters-grid__name {
  display: block;
  font-size: var(--fs-body-alt);
  line-height: var(--lh-body);
}

/* --- Footer ------------------------------------------------------------------- */

.site-footer {
  background: var(--color-secondary);
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-blue-light);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer-contact {
  border-bottom: 0;
}

.footer-contact__grid {
  padding-block: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-footer-line);
}

.footer-contact__item {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-white);
}

.footer-contact__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--space-2));
  left: 0;
  height: 1px;
  background: var(--color-footer-line);
}

a.footer-contact__item:hover {
  text-decoration: none;
}

.footer-contact__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-footer-soft);
}

.footer-contact__icon::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-white);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.footer-contact__icon--phone::before {
  -webkit-mask-image: url("/Obrazky/phone-128.png");
  mask-image: url("/Obrazky/phone-128.png");
}

.footer-contact__icon--email::before {
  -webkit-mask-image: url("/Obrazky/email-128.png");
  mask-image: url("/Obrazky/email-128.png");
}

.footer-contact__icon--address::before {
  -webkit-mask-image: url("/Obrazky/adresa-128.png");
  mask-image: url("/Obrazky/adresa-128.png");
}

.footer-contact__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer-contact__label {
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-white);
}

.footer-contact__value {
  font-size: var(--fs-body-alt);
  line-height: 1.45;
  color: var(--color-blue-light);
  overflow-wrap: anywhere;
}

.footer-contact__note {
  margin-top: 0.125rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-white);
}

.footer-contact__item--address {
  margin: 0;
}

.footer-grid {
  padding-block: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-6);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-col__title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.footer-organization-name {
  max-width: 25rem;
  font-size: var(--fs-account);
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-white);
}

.footer-organization-name__sub {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.footer-legal-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-blue-light);
}

.footer-legal-details strong {
  color: var(--color-white);
}

.footer-legal-details__id {
  font-size: var(--fs-body-alt);
}

.footer-legal-details__registry {
  font-size: var(--fs-small);
  line-height: 1.4;
}

.footer-col__text,
.footer-support__label {
  font-size: var(--fs-body-alt);
  line-height: 1.45;
}

.footer-col__text {
  position: relative;
  color: var(--color-blue-light);
}

a.footer-col__text::before {
  content: "";
  position: absolute;
  inset: -0.625rem -0.25rem;
}

.footer-support__label {
  color: var(--color-blue-light);
}

.footer-support__account {
  font-size: var(--fs-account);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.footer-support .btn {
  color: var(--color-white);
}

.footer-support .btn:hover {
  color: var(--color-white);
  text-decoration: none;
}

@media (min-width: 40rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .footer-contact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-contact__item:not(:last-child)::after {
    display: none;
  }
}

@media (min-width: 64rem) {
  .footer-contact__item:nth-child(2) {
    justify-self: center;
  }

  .footer-contact__item:last-child {
    justify-self: end;
  }

  .footer-grid {
    grid-template-columns: minmax(18rem, 1.4fr) repeat(3, minmax(9rem, 1fr));
  }
}

.footer-bottom {
  border-top: 0;
}

.footer-bottom .container {
  padding-block: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-blue-light);
  text-align: center;
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  text-align: left !important;
  border-top: 1px solid var(--color-footer-line);
}

.footer-bottom__inner a {
  margin-left: auto;
}

.site-credit {
  background: var(--color-blue-line);
  color: var(--color-text);
}

.site-credit .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid rgba(11, 61, 92, 0.22);
  min-height: 2.75rem;
  padding-block: 0.125rem;
  font-size: var(--fs-small);
}

.site-credit__link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
}

.site-credit__logo {
  width: 8rem;
  height: auto;
}

@media (max-width: 40rem) {
  .site-footer .footer-brand-col {
    order: 1;
  }

  .site-footer .footer-col--links {
    order: 2;
  }

  .site-footer .footer-col--services {
    order: 3;
  }

  .site-footer .footer-support {
    order: 4;
  }

  .site-footer .footer-bottom__inner a {
    margin-left: 0;
  }

  .site-footer .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* --- Znovupoužitelný popisek pro porovnávací varianty sekcí ------------------- */

.variant-label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

/* --- Podstránky služeb (např. Senior taxi) ---------------------------------- */

.pricing,
.rules,
.shopping,
.final-cta,
.prose-section {
  padding-block: 4.75rem; /* 76px — stejný rytmus jako .services / .charity */
}

/* Navazující sekce na stejném pozadí nesčítá svůj horní padding se spodním
   paddingem předchozí sekce. Mezi bloky tak zůstává jeden běžný rozestup. */
.pricing.pricing--connected {
  padding-top: 0;
}

.prose-section .section-heading + .section-lead {
  margin-top: var(--space-4);
}

.prose-section .section-heading + .person-card-grid {
  margin-top: var(--space-6);
}

/* Fotogalerie rozdělená na skupiny po akcích — každá skupina má malý
   nadpis a vlastní pás fotek (stejná komponenta .photo-strip jako na
   stránce Akce). */
.gallery-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.gallery-group__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.gallery-group .photo-strip {
  margin-top: var(--space-4);
  margin-bottom: 0;
  justify-content: flex-start;
}

/* Malý informační štítek v hero (např. provozní doba) */
.hero__meta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-secondary);
  background: var(--color-neutral-bg);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  width: fit-content;
}

.hero__meta .ui-icon {
  color: var(--color-primary);
}

/* Ceník — dva sloupce: tabulka cen a čekací doba */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-top: var(--space-6);
  align-items: stretch;
}

/* Barevná varianta ceníku Senior taxi. */
.pricing--senior-taxi {
  background: var(--color-background);
}

.pricing--senior-taxi .price-list {
  background: var(--color-cream);
}

.pricing--senior-taxi .price-list__item {
  border-top-color: var(--color-sand-dark);
}

.pricing--senior-taxi .waiting-grid__item {
  background: var(--color-blue-light);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .pricing__grid {
    grid-template-columns: 3fr 2fr;
  }
}

.pricing__fares {
  display: flex;
  flex-direction: column;
}

.pricing__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .pricing__summary {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.pricing__summary-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-cool);
}

.pricing__summary-col:first-child {
  padding-top: 0;
  border-top: none;
}

@media (min-width: 48rem) { /* 768px — tablet */
  .pricing__summary-col {
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: none;
    border-left: 1px solid var(--color-border-cool);
  }

  .pricing__summary-col:first-child {
    padding-left: 0;
    border-left: none;
  }
}

/* Stejná škála jako popisek a číslo transparentního účtu v sekci Podpořte nás */
.pricing__summary-label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pricing__summary-value {
  font-size: var(--fs-account);
  font-weight: 700;
  color: var(--color-secondary);
}

.price-list {
  flex: 1;
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6); /* 32px ze všech stran */
}

/* Světlejší neutrální podbarvení místo modré — použito na stránce
   Půjčovna kompenzačních pomůcek. */
.price-list--neutral {
  background: var(--color-neutral-bg);
}

.price-list--cream {
  background: var(--color-cream);
}

.price-list--cream .price-list__item {
  border-top-color: var(--color-sand-dark);
}

.price-list--neutral .price-list__item {
  border-top-color: var(--color-border-cool);
}

.price-list--neutral .price-list__value {
  font-size: var(--fs-body);
}

.price-list--white {
  background: var(--color-white);
}

.price-list--white .price-list__item {
  border-top-color: var(--color-border-cool);
}

.price-list--white .price-list__value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.price-list--plain {
  background: none;
  border-radius: 0;
  padding: 0;
}

.price-list--plain .price-list__item {
  border-top-color: var(--color-border-cool);
}

.price-list__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-blue-line);
}

.section--tinted .price-list__item {
  border-top-color: var(--color-sand-dark);
}

.price-list__item:first-child {
  border-top: none;
}

.price-list__label {
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 600;
}

.price-list__value {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-secondary);
  white-space: nowrap;
  text-decoration: none;
}

a.price-list__value:hover,
a.price-list__value:focus-visible {
  text-decoration: underline;
}

/* Seznam kontaktů na stránce Kontakt — omezená šířka, ať se řádky
   telefonních čísel zbytečně nerozlévají přes celý sloupec. */
#spojte-se-s-nami .split-section__content:first-child .price-list {
  max-width: 40rem;
}

#spojte-se-s-nami .hours,
#spojte-se-s-nami .hours .price-list {
  width: 100%;
  max-width: none;
}

/* Bez --white varianty chybí zarovnání ikony s telefonním/e-mailovým
   číslem (to řeší jen .price-list--white .price-list__value) — doplňujeme
   ho tu zvlášť, ať ikona nesedí nalepená na text. */
#spojte-se-s-nami .price-list__value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Kontaktní panel: vlevo lokální fotografie, která načte Google mapu až
   po výslovné aktivaci, vpravo adresa a dopravní informace. */
.location-section .container {
  display: block;
  padding-block: 4.75rem; /* 76px */
}

.location-panel {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-blue-light);
}

.map-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(16rem, 72vw, 20rem); /* 256–320px */
  background: var(--color-blue-medium);
  isolation: isolate;
}

.map-card__preview,
.map-card__image,
.map-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-card__preview {
  display: block;
  text-align: left;
}

.map-card__preview:disabled {
  cursor: wait;
}

.map-card__preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(11, 61, 92, 0.9) 100%);
  pointer-events: none;
}

.map-card__preview:focus-visible {
  outline-color: var(--color-white);
  outline-offset: -0.5rem;
}

.map-card__image {
  object-fit: cover;
  object-position: center 55%;
}

.map-card__content {
  position: absolute;
  z-index: 2;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-white);
}

.map-card__load-label {
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.map-card__notice {
  max-width: 28rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(11, 61, 92, 0.8);
}

.map-card iframe {
  border: 0;
  background: var(--color-blue-medium);
}

.map-card__map {
  visibility: hidden;
}

.map-card__map--loaded {
  visibility: visible;
}

.location-panel__content {
  min-width: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.location-panel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.location-panel__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.location-panel__title {
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-secondary);
}

.location-panel__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.location-panel__organization {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.location-panel .badge-pill {
  background: var(--color-white);
}

.directions-list.directions-list--panel {
  gap: 0;
  border-top: 1px solid var(--color-blue-line);
}

.directions-list--panel .directions-list__item {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-blue-line);
}

.location-panel__action {
  display: flex;
  align-items: center;
}

@media (max-width: 40rem) { /* 640px */
  .location-panel__content {
    order: -1;
  }
}

@media (min-width: 64rem) { /* 1024px */
  .location-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .location-panel .map-card {
    height: auto;
    min-height: 36rem; /* 576px */
  }

  .location-panel__content {
    padding: var(--space-7);
  }
}

/* V Podbořanech fungují tři vnitřní bloky jako samostatné karty.
   Obal proto nemá vlastní výplň ani zaoblení, které by karty zbytečně
   odsouvalo oproti nadpisu a okrajům kontejneru. */
#podborany .visit-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.location-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-sand);
  color: var(--color-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-md);
}

.badge-pill .ui-icon {
  color: var(--color-accent);
  font-size: 0.9375rem;
}

/* Kroky „Jak se k nám dostanete“ — kulatá ikona vlevo, název a popis
   vpravo; stejný princip kulaté ikony jako .footer-contact__icon. */
.directions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.directions-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.directions-list__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-footer-soft);
}

.directions-list__icon::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-white);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.directions-list__icon--car::before {
  -webkit-mask-image: url("/Obrazky/car-128.png");
  mask-image: url("/Obrazky/car-128.png");
}

.directions-list__icon--bus::before {
  -webkit-mask-image: url("/Obrazky/bus-128.png");
  mask-image: url("/Obrazky/bus-128.png");
}

.directions-list__icon--hours::before {
  -webkit-mask-image: url("/Obrazky/hodiny-128.png");
  mask-image: url("/Obrazky/hodiny-128.png");
}

.directions-list__icon--address::before {
  -webkit-mask-image: url("/Obrazky/adresa-128.png");
  mask-image: url("/Obrazky/adresa-128.png");
}

/* Číslovaný variant odrážky (např. Program členské schůze) — stejný
   princip kolečka jako .directions-list__icon, jen s číslem místo masky.
   Spojený selektor (ne jen modifikátor), ať přebije pozdější pravidlo
   .rules-list__icon se stejnou specificitou. */
.rules-list__icon.rules-list__icon--number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* Celá pozvánka na členskou schůzi v jednom krémovém boxu — stejný
   princip jako .split-section--boxed .container. */
#clenska-schuze .container {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-7); /* 48px */
}

/* Obecný limit 70vw je uvnitř tohoto užšího boxu zbytečně široký —
   stejný princip jako jinde omezené .section-lead (např. #co-je). */
#clenska-schuze .section-lead {
  max-width: 42rem;
}

/* Řádky Kdy/Kde (Pozvánka na členskou schůzi) — na tabletu a výš vedle
   sebe, každý v bílém boxíku, ať trochu vystoupí z krémového pozadí. */
#clenska-schuze .directions-list--meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

#clenska-schuze .directions-list--meta .directions-list__item {
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

/* Kdy/Kde: popisek menší a tlumenější, hodnota (datum/místo) naopak
   větší a výraznější — opak výchozího .directions-list (tam je title
   hlavní a text pod ním doplňkový). */
#clenska-schuze .directions-list--meta .directions-list__title {
  margin-bottom: 0.125rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

#clenska-schuze .directions-list--meta .directions-list__text {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-secondary);
}

@media (min-width: 40rem) { /* 640px */
  #clenska-schuze .directions-list--meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

#clenska-schuze .section-lead + .directions-list {
  margin-top: var(--space-6);
}

#clenska-schuze .directions-list + .btn {
  margin-top: var(--space-5);
}

#clenska-schuze .split-columns + .schuze-signature {
  margin-top: var(--space-6);
}

.directions-list__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.directions-list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Ikona špendlíku v tlačítku „Naplánovat cestu“ — stejná technika jako
   .btn__icon--phone, jen jiný zdrojový PNG (adresa/pin). */
.btn__icon--pin {
  flex-shrink: 0;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/Obrazky/adresa-128.png");
  mask-image: url("/Obrazky/adresa-128.png");
}

/* Upozornění pro členy (Pozvánka na členskou schůzi) — bílý panel místo
   výchozí modré, ať vynikne na krémovém pozadí celého boxu pozvánky;
   nadpis v akcentové barvě, stejný motiv jako varování v Aktualitách
   (news__card-kicker--warning). */
#clenska-schuze .split-section__panel {
  background: var(--color-white);
}

#clenska-schuze .split-section__panel-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent);
}

/* Identifikační údaje — nižší priorita než kontakty, proto užší panel
   místo roztažení přes celou šířku sekce. */
.identification-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

#identifikacni-udaje .split-section__panel {
  max-width: 46rem;
  background: var(--color-cream);
}

.identification-grid__logo {
  width: 8.875rem;
  height: auto;
  align-self: center;
  justify-self: center;
}

.identification-grid__content {
  max-width: 46rem;
}

.identification-grid__content .section-heading {
  margin-bottom: var(--space-5);
}

#identifikacni-udaje .split-section__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.identification-grid__name {
  margin-bottom: var(--space-4);
}

.identification-grid__databox {
  margin-top: var(--space-4);
}

@media (min-width: 48rem) { /* 768px */
  #identifikacni-udaje .split-section__panel {
    grid-template-columns: minmax(24rem, 1fr) 12.5rem;
    align-items: center;
  }
}

/* Provozní doba kanceláře (sloupec vedle Spojte se s námi) — zobrazuje
   se jen aktuálně platné období (JS přepíná podle měsíce v Europe/Prague),
   druhé si lze rozbalit tlačítkem. Bez JS zůstávají viditelná obě období. */
.hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hours--summer-active .hours__period[data-period="summer"] {
  order: 0;
}

.hours--summer-active .hours__toggle {
  order: 1;
}

.hours--summer-active .hours__period[data-period="regular"] {
  order: 2;
}

.hours__toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
}

.hours__toggle:hover,
.hours__toggle:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
}

.hours__toggle-icon {
  font-size: 0.8125rem;
  transition: transform var(--transition-fast);
}

.hours__toggle[aria-expanded="true"] .hours__toggle-icon {
  transform: rotate(180deg);
}

/* Zvýraznění dnešního dne v aktivní tabulce provozní doby — bílá,
   ať je vidět i na výchozím modrém pozadí .price-list. */
.price-list__item--today {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding-inline: var(--space-3);
}

.hours__today-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* --- Akce ---------------------------------------------------------------- */

.event-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Boxová varianta akcí (nejbližší akce) — místo linkovaného seznamu přes
   celou šířku karty vedle sebe, ať sekce nepůsobí tak roztaženě. */
#pripravujeme .section-lead,
#rok-2027 .section-lead {
  max-width: 50rem; /* 800px */
}

.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 64rem) { /* 1024px */
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.event-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem; /* 28px — stejně jako .services__item */
}

/* V sekci „Předběžně připravujeme“ (section--tinted-neutral) by boxy se
   stejnou --color-neutral-bg splynuly s pozadím sekce — proto tady bílé. */
#rok-2027 .event-box {
  background: var(--color-white);
}

#pripravujeme .event-box {
  background: var(--color-cream);
}

.event-box__date {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.event-box__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.event-box__value {
  font-size: 1.25rem; /* 20px — běžný text (18px) + 2px */
  font-weight: 700;
  color: var(--color-secondary);
}

.event-box .rules-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: 0;
}

/* Akce s výrazně víc informacemi (Harkány) — přes celou šířku mřížky,
   ať má delší text i dlouhý seznam víc prostoru. */
.event-box--wide {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
}

/* Rohová stuha s informací o obsazenosti — varianta .highlight-note
   zobrazená jako šikmý pruh přes roh karty místo odstavce v textu.
   Složený selektor (ne jen modifikátor), ať spolehlivě přebije základní
   .highlight-note bez ohledu na pořadí pravidel v souboru. */
.highlight-note.highlight-note--ribbon {
  position: absolute;
  top: 2.75rem;
  right: -3rem;
  width: 14rem;
  padding: 0.375rem 0;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 0;
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(45deg);
}

@media (max-width: 40rem) { /* 640px — na mobilu jako běžný štítek nad datem */
  .highlight-note.highlight-note--ribbon {
    position: static;
    width: fit-content;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-align: left;
    transform: none;
  }
}

@media (min-width: 40rem) { /* 640px */
  .event-box--wide .rules-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-7);
  }
}

/* Pás fotek nad odkazem na fotogalerii (Akce) — několik menších
   placeholderů vedle sebe místo jednoho velkého. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (min-width: 40rem) { /* 640px */
  .photo-strip {
    /* auto-fit (ne pevný počet 3/5 sloupců) — prázdné nevyužité
       sloupce se zruší, ať se skutečný počet fotek vždy vycentruje
       jako celek, i když jich není přesně 3 nebo 5. */
    grid-template-columns: repeat(auto-fit, 13rem);
    justify-content: center;
  }
}

@media (min-width: 64rem) { /* 1024px */
  .photo-strip {
    grid-template-columns: repeat(auto-fit, 12rem);
    justify-content: center;
  }
}

.photo-strip .placeholder-image {
  min-height: 9rem; /* 144px */
}

.photo-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.photo-strip__link {
  display: block;
  min-height: 9rem; /* 144px — stejně jako .placeholder-image výše */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo-strip__image {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.photo-strip__link:hover .photo-strip__image,
.photo-strip__link:focus-visible .photo-strip__image {
  transform: scale(1.04);
}

.photo-strip__caption {
  font-size: var(--fs-small);
  color: var(--color-text);
  text-align: center;
}

.pricing__waiting-heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

/* Dvousloupcový blok se dvěma souvisejícími podsekcemi — např. praní
   a svoz/rozvoz prádla u Pomoci v domácnosti. Na mobilu a tabletu
   pod sebou (oddělené linkou), od desktopu vedle sebe cca 50/50. */
.pricing__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .pricing__block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
    align-items: start;
  }
}

.pricing__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pricing__section-heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.pricing__section-heading--spaced {
  margin-top: var(--space-6);
}

.pricing__section + .pricing__section {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-cool);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .pricing__section + .pricing__section {
    padding-top: 0;
    border-top: none;
  }
}

.pricing__block .price-list {
  background: none;
  padding: 0;
}

.laundry-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.laundry-gallery--side {
  align-self: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 2.3fr 1.7fr;
  gap: var(--space-3);
  margin-top: 0;
  height: clamp(31rem, 48vw, 38rem);
}

@media (min-width: 40rem) { /* 640px */
  .laundry-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .laundry-gallery--side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 2.3fr 1.7fr;
  }
}

.laundry-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.laundry-gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.laundry-gallery__item--wide {
  grid-column: 1 / -1;
}

.laundry-gallery__item--wide img {
  aspect-ratio: 4 / 3;
  object-position: center 58%;
}

/* U portrétně důležitého motivu v širokém náhledu zachová horní část fotografie. */
.laundry-gallery__item--top img {
  object-position: center top;
}

.laundry-gallery__item:hover img,
.laundry-gallery__item:focus-visible img {
  transform: scale(1.04);
}

.section-heading + .pricing__block {
  margin-top: var(--space-6);
}

/* Zvýrazněná cena uvnitř .pricing__section — stejná škála jako
   popisek a hodnota u přehledu provozní doby a cen výše na stránce. */
.pricing__section-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.waiting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .waiting-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ve dvousloupcovém ceníku je na čekací dobu jen půlka šířky sekce —
   boxy proto necháváme pod sebou i na větších obrazovkách. */
.pricing__grid .waiting-grid {
  grid-template-columns: 1fr;
}

.waiting-grid__item {
  background: var(--color-neutral-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem; /* 28px — stejně jako .services__item */
}

.waiting-grid__item h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.waiting-grid__item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.visit-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: 2.5rem; /* 40px */
}

@media (min-width: 64rem) { /* 1024px */
  .visit-panel {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-7);
  }
}

/* Jednosloupcová varianta — použij, když panel obsahuje jen adresu bez
   samostatných otevíracích hodin (např. Obchůdek pro radost). */
.visit-panel--single {
  grid-template-columns: 1fr;
}

/* Trojsloupcová varianta — adresa, otevírací doba a další blok
   (např. odkaz na Facebook) vedle sebe na desktopu. */
.visit-panel--neutral {
  background: var(--color-neutral-bg);
}

.visit-panel--cream {
  background: var(--color-cream);
}

.visit-panel--cream .visit-panel__hours {
  width: min(100%, 48rem);
  justify-self: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.visit-panel--cream .visit-hours__item {
  border-bottom-color: var(--color-sand-dark);
}

.visit-panel--triple {
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) { /* 1024px */
  .visit-panel--triple {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: var(--space-7);
    row-gap: var(--space-5);
  }
}

/* Jednotlivé bloky trojsloupcového panelu jako malé bílé karty, ať
   vystoupí z podbarveného pozadí panelu (stejný princip jako bílý box
   u .visit-panel--cream .visit-panel__hours výše). */
.visit-panel--triple .visit-panel__address,
.visit-panel--triple .visit-panel__hours,
.visit-panel--triple .visit-panel__social {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem; /* 28px — stejně jako .services__item / .quick-links__card */
}

.visit-panel + .cta-panel__actions {
  margin-top: var(--space-6);
}

/* Doplňkový řádek uvnitř panelu (např. „Potkat nás můžete i na akcích“) —
   přes celou šířku pod ostatními sloupci, oddělený linkou. */
.visit-panel__followup {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-cool);
}

.visit-panel__address,
.visit-panel__hours,
.visit-panel__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Doplňkový řádek s fotkou vpravo (např. „Potkat nás můžete i na akcích“,
   Obchůdek pro radost) — mobile-first sloupec, na větších obrazovkách
   text a fotka vedle sebe. */
.visit-panel__followup {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 40rem) { /* 640px */
  .visit-panel__followup {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
  }
}

.visit-panel__followup-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}

.visit-panel__followup-image {
  flex-shrink: 0;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.visit-panel__followup > .responsive-picture {
  flex: 0 0 auto;
  width: 100%;
  max-width: 22rem;
}

.visit-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.visit-panel__icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.visit-panel__icon--address {
  -webkit-mask-image: url("/Obrazky/adresa-128.png");
  mask-image: url("/Obrazky/adresa-128.png");
}

.visit-panel__icon--hours {
  -webkit-mask-image: url("/Obrazky/hodiny-128.png");
  mask-image: url("/Obrazky/hodiny-128.png");
}

/* Rozpoznatelná značka Facebooku používá lokální SVG masku. */
.visit-panel__title .ui-icon--facebook {
  width: 1.25rem;
  font-size: 1.125rem;
  color: var(--color-accent);
  text-align: center;
}

.visit-panel p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.visit-panel__note {
  width: fit-content;
  padding: 0.625rem 1rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-secondary);
}

.visit-hours {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.visit-hours__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid rgba(207, 226, 236, 0.7);
  font-size: var(--fs-body);
}

/* Jediný řádek otevírací doby (např. Obchůdek pro radost) nepotřebuje
   oddělovací linku — nic pod ním v seznamu nenásleduje. */
.visit-hours__item:only-child {
  border-bottom: none;
}

.visit-hours__item strong {
  color: var(--color-secondary);
  white-space: nowrap;
}

.visit-panel--triple .visit-hours__item {
  justify-content: flex-start;
  gap: var(--space-6);
}

/* Užší varianta ceníkové sekce (Půjčovna kompenzačních pomůcek) — celá
   sekce včetně tabulky je vystředěná a užší než zbytek webu. */
.pricing--narrow .container {
  max-width: 50rem; /* 800px */
}

.pricing--narrow .eyebrow,
.pricing--narrow .section-heading {
  text-align: center;
}

.pricing--narrow .section-lead {
  margin-inline: auto;
  text-align: center;
}

/* Stejná užší vystředěná varianta pro panel Polohovací postele —
   bez krémového podbarvení, viditelný box zůstává jen u ceníkového seznamu. */
.shopping--narrow .container {
  max-width: 50rem; /* 800px */
}

.shopping--narrow .cta-panel__heading,
.shopping--narrow .cta-panel__text {
  text-align: center;
}

/* Ceníková tabulka (např. Půjčovna kompenzačních pomůcek) — na užších
   obrazovkách se vodorovně scrolluje uvnitř svého rámečku. */
.price-table-wrap {
  margin-top: var(--space-6);
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6); /* 32px — stejně jako .price-list */
  overflow-x: auto;
}

/* Lišta nad tabulkou naznačující, že se dá scrollovat do strany — na
   šířkách, kde se tabulka celá vejde, ji nastaví JS jako skrytou. */
.price-table-scroll-hint {
  display: none;
  margin-top: var(--space-6);
  height: 0.375rem; /* 6px */
  background: var(--color-border-cool);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.price-table-scroll-hint.is-visible {
  display: block;
}

.price-table-scroll-hint.is-visible + .price-table-wrap {
  margin-top: var(--space-3);
}

.price-table-scroll-hint__thumb {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--color-primary);
  border-radius: inherit;
  transition: transform 100ms linear, width 100ms linear;
}

.price-table {
  width: 100%;
  min-width: 32rem; /* 512px — ať sloupce necvakají do sebe, pod tím radši scroll */
  border-collapse: collapse;
}

.price-table th,
.price-table td {
  padding: var(--space-4) 0;
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--color-sand-dark);
}

.price-table th:not(:first-child),
.price-table td:not(:first-child) {
  padding-left: var(--space-4);
}

.price-table thead th {
  background: var(--color-cream);
  color: var(--color-secondary);
  font-weight: 700;
  text-align: left;
}

.price-table tbody th {
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.price-table__value {
  text-align: right;
  white-space: nowrap;
}

.price-table tbody .price-table__value {
  font-weight: 700;
  color: var(--color-secondary);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: none;
}

/* Seznam pravidel / důležitých informací — od tabletu dva sloupce,
   stejný princip jako u accordionu/FAQ s víc než 3 položkami */
.rules-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 48rem) { /* 768px — tablet */
  .rules-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-7);
  }
}

.rules-list__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.rules-list__icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.rules-list__icon--dot {
  margin-top: 0;
}

.rules-list__item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-width);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-list__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.feature-list__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 40rem) { /* 640px */
  .feature-list__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-list__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-secondary);
}

.feature-list__item .ui-icon {
  width: 1.25rem;
  color: var(--color-accent);
  text-align: center;
}

.feature-list__item .rules-list__icon--dot {
  height: 1.25rem;
}

.highlight-note {
  width: fit-content;
  padding: 0.625rem 1rem;
  background: var(--color-blue-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-secondary);
}

/* Obal pro jednu nebo víc karet „Kdo za organizací stojí“. */
.person-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* Malý box se jménem a funkcí (např. „Kdo za organizací stojí“). */
.person-card {
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 1.25rem 1.5rem;
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
}

.person-card__photo {
  min-height: 12.5rem; /* 200px — stejně jako .services__item .placeholder-image */
  margin-bottom: var(--space-3);
}

.person-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.person-card__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.person-card__role {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

.person-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.person-card__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  color: var(--color-text);
  text-decoration: none;
}

.person-card__contact-link:hover,
.person-card__contact-link:focus-visible {
  text-decoration: underline;
}

.btn__icon--email {
  flex-shrink: 0;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/Obrazky/email-128.png");
  mask-image: url("/Obrazky/email-128.png");
}

.event-dates {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-5);
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.event-dates__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.event-dates__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-dates__list li,
.event-dates__place {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.event-dates__list li {
  font-weight: 600;
  color: var(--color-secondary);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.donation-section .section-heading {
  margin-bottom: var(--space-4);
}

/* Stejný rozestup pro sekci s adresou následovanou úvodním odstavcem
   (např. „Kde nás najdete“ u Obchůdku pro radost). */
.visit-section .section-heading {
  margin-bottom: var(--space-4);
}

.visit-section > .container > .eyebrow,
.visit-section > .container > .section-heading,
.visit-section > .container > .section-lead {
  text-align: center;
}

.visit-section > .container > .section-lead {
  max-width: 50rem;
  margin-inline: auto;
}

@media (min-width: 64rem) { /* 1024px */
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.process-steps__item {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process-steps__number {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.process-steps__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.process-steps__item p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 64rem) { /* 1024px */
  .process-steps__item:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--space-5));
    transform: translate(50%, -50%);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--color-accent);
  }
}

.notice-panel {
  width: min(100%, 60rem);
  margin-inline: auto;
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-3);
}

.notice-panel__heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.notice-panel__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: 46rem;
}

/* Podbarvený panel s CTA — použitelný pro dílčí i závěrečné výzvy k akci */
.cta-panel {
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px — stejně jako .support__content */
}

.cta-panel > .eyebrow {
  margin-bottom: calc(-1 * var(--space-2));
}

/* Bez krémového podbarvení a paddingu — použij, když má být viditelný
   jen vnořený box (např. price-list), ne celý panel. */
.cta-panel--flush {
  background: none;
  padding: 0;
}

.cta-panel--neutral {
  background: var(--color-neutral-bg);
}

.cta-panel--blue {
  background: var(--color-blue-light);
}

/* Výrazné oranžové upozornění (např. dočasně omezená distribuce
   Euroklíčů) — akcentová barva slouží přesně k tomuto podle instrukce.md. */
.cta-panel--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.cta-panel--accent .eyebrow {
  color: var(--color-white);
}

.cta-panel--blue-medium {
  background: var(--color-blue-medium);
}

.cta-panel__heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.cta-panel__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-width);
}

.cta-panel__price {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  width: fit-content;
}

.cta-panel__price .cta-panel__icon-img {
  flex-shrink: 0;
}

.cta-panel__price-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cta-panel__price-label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cta-panel__price-value {
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-secondary);
}

/* Varianta se dvěma sloupci — vlevo nadpis, text a cena, vpravo objednání */
.cta-panel--with-icon .cta-panel__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cta-panel__order {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}

.cta-panel__order .pricing__waiting-heading {
  margin-bottom: 0;
}

.cta-panel__order .cta-panel__actions {
  justify-content: center;
}

.cta-panel__order .price-list {
  width: 100%;
  text-align: left;
}

/* Viditelný telefonický kontakt v cta-panel__order — stejné zarovnání
   ikony a textu jako u kontaktů na stránce Půjčovna pomůcek. */
.cta-panel__order .price-list__value,
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.phone-link {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
}

.phone-link:hover,
.phone-link:focus-visible {
  text-decoration: underline;
}

.cta-panel--with-icon .cta-panel__order {
  flex: 2;
}

@media (min-width: 48rem) { /* 768px — tablet */
  .cta-panel--with-icon {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-7);
  }

  .cta-panel--with-icon .cta-panel__body {
    flex: 3;
    max-width: 40rem;
  }
}

.cta-panel__icon-img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("/Obrazky/nakupni_taska-128.png");
  mask-image: url("/Obrazky/nakupni_taska-128.png");
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: var(--space-2);
}

.cta-panel--center {
  align-items: center;
  text-align: center;
}

.cta-panel--center .cta-panel__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.cta-panel--center .cta-panel__actions {
  justify-content: center;
}

.cta-panel--left .cta-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Dvousloupcová varianta — vlevo hlavní text a kontakty, vpravo doplňkové
   informace a odkazy ke stažení (např. Akce — Máte o některou zájem?). */
.cta-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cta-panel__aside-heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 48rem) { /* 768px — tablet, stejná hranice jako --with-icon */
  .cta-panel--split {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-7);
  }

  .cta-panel--split .cta-panel__body {
    flex: 3;
  }

  .cta-panel--split .cta-panel__aside {
    flex: 2;
  }
}

/* Odkazy ke stažení souhlasů na stránce Akce — pod sebou místo vedle
   sebe, ať jsou oba dobře čitelné i na užších obrazovkách. */
#prihlaseni .cta-panel__actions {
  flex-direction: column;
  align-items: flex-start;
}

/* ==========================================================================
   MOBIL — přepisy pro úzké obrazovky.
   Tento blok je záměrně AŽ NA KONCI souboru: obsahuje přepisy vlastností,
   které už nastavují pravidla výše (stejná specificita), a v CSS cascade
   při shodné specificitě vyhrává pravidlo, které je v souboru napsané
   později — proto musí být tento blok pod nimi, jinak se přepisy neprojeví.
   ========================================================================== */

@media (max-width: 40rem) { /* 640px — mobil */
  :root {
    --container-width: 90%;
    --text-max-width: 100%; /* na mobilu ať text využije celou šířku kontejneru */
  }

  /* Menší svislé rozestupy mezi sekcemi na mobilu */
  .hero .container {
    padding-block: 2.5rem 0; /* homepage dole plynule navazuje fotografií */
  }

  /* Všechny tmavé hero podstránek mají na mobilu stejný spodní odstup
     bez ohledu na to, zda obsahují jen nadpis, text nebo tlačítka. */
  .hero--dark .container {
    padding-bottom: var(--space-6);
  }

  .hero--home .hero__media {
    aspect-ratio: 4 / 3;
  }

  .news .container {
    padding-block: 2rem 3rem; /* 32px 48px */
  }

  .news__grid {
    gap: var(--space-4);
  }

  .news__card,
  .news__card:nth-child(1),
  .news__card:nth-child(2),
  .news__card:nth-child(3),
  .news__card:nth-child(4) {
    min-height: 0;
    padding: 1.75rem 1.25rem 1.25rem;
    transform: none;
  }

  .news__card::before {
    top: -0.625rem;
    width: 4.5rem;
    height: 1.25rem;
  }

  /* CTA na konci přehledu služeb nemá vlastní box, proto na mobilu
     nedědí vodorovné odsazení běžných karet. */
  .services__item--cta {
    padding-inline: 0;
  }

  .services,
  .charity,
  .split-section .container,
  .split-section--about .container,
  .pricing,
  .rules,
  .shopping,
  .final-cta,
  .prose-section {
    padding-block: 3rem; /* 48px */
  }

  .support {
    padding-block: 3rem; /* 48px — stejně jako ostatní běžné sekce na mobilu */
  }

  /* "Pomáháme i propojujeme" — na mobilu text nad fotkou (na desktopu beze změny) */
  .split-section--about .split-section__media {
    order: 1;
  }

  .split-section--mobile-text-first .split-section__media,
  .split-section--mobile-text-first .product-gallery {
    order: 1;
  }

  /* Velká fotka nahoře přes celou šířku, pod ní dvě menší vedle sebe
     (Dekorace a drobnosti, Šité výrobky). Varianta --equipment nemá
     .product-gallery__main a zůstává ve svém vlastním rozvrhu 2×2. */
  .product-gallery:not(.product-gallery--equipment) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    height: auto;
  }

  .product-gallery:not(.product-gallery--equipment) .product-gallery__main {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }

  .product-gallery:not(.product-gallery--equipment) .product-gallery__item:not(.product-gallery__main) {
    grid-row: 2;
    aspect-ratio: 1 / 1;
  }

  .product-gallery--equipment {
    max-width: none;
  }

  /* Podpořte naši činnost — na mobilu menší padding a jednotné zarovnání vlevo */
  .support__panel {
    padding: 1.5rem; /* 24px */
  }

  .split-section--boxed .container {
    padding: 1.5rem; /* 24px */
  }

  .split-section--boxed {
    padding-block: 3rem; /* 48px — stejně jako .split-section .container na mobilu */
  }

  /* Pozvánka na členskou schůzi — stejné zmenšení paddingu jako u
     .split-section--boxed, ať boxíky Kdy/Kde nejsou na mobilu moc úzké. */
  #clenska-schuze .container {
    padding: 1.5rem; /* 24px */
  }

  /* Trojsloupcový panel (Kde nás najdete / Kdy máme otevřeno / Facebook)
     — menší padding, ať se bílé karty uvnitř roztáhnou do šířky. */
  .visit-panel {
    padding: 1.5rem; /* 24px */
  }

  .support__qr {
    align-items: flex-start;
  }

  /* Obchůdek pro radost — na mobilu fotka úplně dole pod textem i tlačítkem
     (na desktopu zůstává fotka nahoře, stejně jako u Dobrodějky) */
  .charity-card--shop .placeholder-image,
  .charity-card--shop .charity-card__image,
  .charity-card--shop .responsive-picture {
    order: 1;
  }

  /* Ceník a CTA panely na podstránkách služeb — menší padding na mobilu,
     stejný princip jako u .support__panel výše */
  .price-list {
    padding-inline: 1rem; /* 16px */
  }

  /* Delší popisky (např. u polohovací postele) by jinak tlačily hodnotu
     mimo obrazovku — na mobilu proto popisek a hodnotu řadíme pod sebe. */
  .price-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .price-list__label,
  .price-list__value {
    display: block;
    width: 100%;
  }

  .price-list__value {
    white-space: normal;
  }

  .cta-panel {
    padding: 1.5rem; /* 24px */
  }

  .notice-panel {
    padding: 1.5rem; /* 24px */
  }

  .cta-panel--flush {
    padding: 0;
  }
}