/**
 * ============================================================
 * Private Tours Czech — Design System v1
 * Autor: Claude (CEO), 2026-04-21
 * Redesign Week 20.–27.4.2026
 *
 * Použití: Přidat do main/css/design-system-v1.css
 * Importovat v style.css PŘED blog.css a tour.css
 * Komponenty jsou třídy s prefixem ptcz- (komponenty tématu)
 * ============================================================
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {

  /* — Barvy brand — */
  --ptcz-navy:          #1c1c2e;   /* primární modrá webu (shodná s buttons.css) */
  --ptcz-navy-dark:     #0f0f1e;
  --ptcz-navy-light:    #2a2a44;
  --ptcz-gold:          #1c1c2e;   /* dříve zlatá → nahrazena primární modrou */
  --ptcz-gold-dark:     #0f0f1e;
  --ptcz-gold-light:    #c8d4e8;   /* světlá modrošedá — viditelná na tmavém bg */

  /* — Barvy neutral — */
  --ptcz-white:         #FFFFFF;
  --ptcz-bg-light:      #F7F8FA;
  --ptcz-bg-medium:     #EEF0F4;
  --ptcz-border:        #E5E7EB;
  --ptcz-text:          #1A1A1A;
  --ptcz-text-muted:    #555555;
  --ptcz-text-light:    #888888;

  /* — Barvy sémantické — */
  --ptcz-success:       #16A34A;
  --ptcz-success-bg:    #F0FDF4;
  --ptcz-warning:       #D97706;
  --ptcz-warning-bg:    #FFFBEB;
  --ptcz-danger:        #DC2626;
  --ptcz-danger-bg:     #FEF2F2;

  /* — Typografie — */
  --ptcz-font:          'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ptcz-font-heading:  'Inter Tight', 'Inter', -apple-system, sans-serif;

  --ptcz-text-xs:       0.75rem;    /* 12px */
  --ptcz-text-sm:       0.875rem;   /* 14px */
  --ptcz-text-base:     1rem;       /* 16px */
  --ptcz-text-lg:       1.125rem;   /* 18px */
  --ptcz-text-xl:       1.25rem;    /* 20px */
  --ptcz-text-2xl:      1.5rem;     /* 24px */
  --ptcz-text-3xl:      1.875rem;   /* 30px */
  --ptcz-text-4xl:      2.25rem;    /* 36px */
  --ptcz-text-5xl:      3rem;       /* 48px */

  --ptcz-leading-tight:   1.25;
  --ptcz-leading-normal:  1.5;
  --ptcz-leading-relaxed: 1.7;

  /* — Spacing (4px grid) — */
  --ptcz-space-1:   0.25rem;   /* 4px */
  --ptcz-space-2:   0.5rem;    /* 8px */
  --ptcz-space-3:   0.75rem;   /* 12px */
  --ptcz-space-4:   1rem;      /* 16px */
  --ptcz-space-5:   1.25rem;   /* 20px */
  --ptcz-space-6:   1.5rem;    /* 24px */
  --ptcz-space-8:   2rem;      /* 32px */
  --ptcz-space-10:  2.5rem;    /* 40px */
  --ptcz-space-12:  3rem;      /* 48px */
  --ptcz-space-16:  4rem;      /* 64px */
  --ptcz-space-20:  5rem;      /* 80px */

  /* — Border radius — */
  --ptcz-radius-sm:   4px;
  --ptcz-radius-md:   8px;
  --ptcz-radius-lg:   12px;
  --ptcz-radius-xl:   16px;
  --ptcz-radius-full: 9999px;

  /* — Shadows — */
  --ptcz-shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --ptcz-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --ptcz-shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --ptcz-shadow-xl:  0 16px 40px rgba(0,0,0,0.16);

  /* — Transitions — */
  --ptcz-transition-fast:   150ms ease;
  --ptcz-transition-normal: 250ms ease;
  --ptcz-transition-slow:   400ms ease;

  /* — Z-index — */
  --ptcz-z-raised:   10;
  --ptcz-z-dropdown: 100;
  --ptcz-z-sticky:   200;
  --ptcz-z-modal:    1000;

  /* — Layout — */
  --ptcz-content-max-width:     900px;
  --ptcz-content-wide-width:    1200px;
  --ptcz-content-padding-x:     1.25rem;
}


/* ============================================================
   2. BUTTONS
   ============================================================ */

.ptcz-btn {
  display: inline-block;
  font-family: var(--ptcz-font);
  font-size: var(--ptcz-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--ptcz-radius-md);
  padding: 0.75rem 1.5rem;
  transition: background-color var(--ptcz-transition-fast),
              border-color var(--ptcz-transition-fast),
              color var(--ptcz-transition-fast),
              box-shadow var(--ptcz-transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.ptcz-btn:focus-visible {
  outline: 3px solid var(--ptcz-gold);
  outline-offset: 2px;
}

/* Primary */
.ptcz-btn-primary {
  background-color: var(--ptcz-navy);
  border-color: var(--ptcz-navy);
  color: var(--ptcz-white);
}
.ptcz-btn-primary:hover,
.ptcz-btn-primary:focus {
  background-color: var(--ptcz-navy-dark);
  border-color: var(--ptcz-navy-dark);
  color: var(--ptcz-white);
  box-shadow: var(--ptcz-shadow-md);
  text-decoration: none;
}

/* Secondary */
.ptcz-btn-secondary {
  background-color: transparent;
  border-color: var(--ptcz-navy);
  color: var(--ptcz-navy);
}
.ptcz-btn-secondary:hover,
.ptcz-btn-secondary:focus {
  background-color: var(--ptcz-navy);
  color: var(--ptcz-white);
  text-decoration: none;
}

/* Ghost (průhledné) */
.ptcz-btn-ghost {
  background-color: transparent;
  border-color: var(--ptcz-gold);
  color: var(--ptcz-gold);
}
.ptcz-btn-ghost:hover,
.ptcz-btn-ghost:focus {
  background-color: var(--ptcz-gold);
  color: var(--ptcz-white);   /* white na tmavém navy bg (dříve navy na zlatém) */
  text-decoration: none;
}

/* Disabled */
.ptcz-btn:disabled,
.ptcz-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* Loading state */
.ptcz-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.ptcz-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--ptcz-white);
  border-radius: 50%;
  animation: ptcz-spin 0.7s linear infinite;
}
@keyframes ptcz-spin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Mobile: plná šířka ve stack kontextu */
@media (max-width: 767px) {
  .ptcz-btn-stack .ptcz-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--ptcz-space-3);
  }
  .ptcz-btn-stack .ptcz-btn:last-child {
    margin-bottom: 0;
  }
}


/* ============================================================
   3. CTA BLOK
   ============================================================ */

.ptcz-cta-block {
  background-color: var(--ptcz-bg-light);
  border-left: 4px solid var(--ptcz-gold);
  border-radius: var(--ptcz-radius-lg);
  padding: var(--ptcz-space-8) var(--ptcz-space-8);
  margin: var(--ptcz-space-10) 0;
  text-align: center;
}

.ptcz-cta-block .ptcz-cta-text {
  font-size: var(--ptcz-text-lg);
  font-weight: 600;
  color: var(--ptcz-navy);
  margin-bottom: var(--ptcz-space-5);
}

.ptcz-cta-block p:last-child {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptcz-space-4);
  justify-content: center;
}

@media (max-width: 767px) {
  .ptcz-cta-block {
    padding: var(--ptcz-space-6) var(--ptcz-space-4);
  }
  .ptcz-cta-block p:last-child {
    flex-direction: column;
  }
  .ptcz-cta-block .ptcz-btn {
    width: 100%;
  }
}


/* ============================================================
   4. QUICK FACTS BOX
   ============================================================ */

.ptcz-quick-facts {
  background-color: var(--ptcz-bg-light);
  border: 1px solid var(--ptcz-gold-light);
  border-radius: var(--ptcz-radius-lg);
  padding: var(--ptcz-space-6);
  margin: var(--ptcz-space-8) 0;
}

.ptcz-quick-facts-title {
  font-family: var(--ptcz-font);
  font-size: var(--ptcz-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ptcz-text-muted);
  margin-bottom: var(--ptcz-space-4);
  border-bottom: 1px solid var(--ptcz-border);
  padding-bottom: var(--ptcz-space-3);
}

.ptcz-quick-facts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ptcz-space-3);
}

.ptcz-quick-facts ul li {
  display: flex;
  align-items: baseline;
  gap: var(--ptcz-space-2);
  font-size: var(--ptcz-text-base);
  color: var(--ptcz-text);
  line-height: var(--ptcz-leading-normal);
}

.ptcz-quick-facts ul li strong {
  font-weight: 600;
  color: var(--ptcz-navy);
  min-width: 120px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .ptcz-quick-facts ul {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================================
   5. FAQ SEKCE
   ============================================================ */

.ptcz-faq {
  margin: var(--ptcz-space-12) 0;
}

.ptcz-faq > h2 {
  font-family: var(--ptcz-font-heading);
  color: var(--ptcz-navy);
  margin-bottom: var(--ptcz-space-6);
}

.ptcz-faq details {
  border-bottom: 1px solid var(--ptcz-border);
  padding: var(--ptcz-space-4) 0;
}

.ptcz-faq details:first-of-type {
  border-top: 1px solid var(--ptcz-border);
}

.ptcz-faq summary {
  font-family: var(--ptcz-font);
  font-size: var(--ptcz-text-base);
  font-weight: 600;
  color: var(--ptcz-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ptcz-space-4);
  padding: var(--ptcz-space-2) 0;
  transition: color var(--ptcz-transition-fast);
}

.ptcz-faq summary::-webkit-details-marker {
  display: none;
}

.ptcz-faq summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ptcz-gold);
  transition: transform var(--ptcz-transition-fast);
}

.ptcz-faq details[open] summary::after {
  transform: rotate(45deg);
}

.ptcz-faq summary:hover {
  color: var(--ptcz-navy-light);
}

.ptcz-faq details > p,
.ptcz-faq details > div {
  margin-top: var(--ptcz-space-3);
  font-size: var(--ptcz-text-base);
  color: var(--ptcz-text);
  line-height: var(--ptcz-leading-relaxed);
  padding-right: var(--ptcz-space-8);
}


/* ============================================================
   6. READING TIME BADGE
   ============================================================ */

.ptcz-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Dědí font-size a color z .blog-meta — stejný styl jako datum */
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}

.ptcz-reading-time::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.65;
  flex-shrink: 0;
}

/* Skrýt reading-time pokud se objeví uvnitř obsahu článku (duplikát z ACF) */
.blog-content .ptcz-reading-time {
  display: none;
}

/* FAQ je uvnitř .blog-content — šířku řeší .blog-body .container>.blog-content */

.ptcz-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ptcz-space-4);
  font-size: var(--ptcz-text-sm);
  color: var(--ptcz-text-muted);
  margin-bottom: var(--ptcz-space-6);
  padding-bottom: var(--ptcz-space-4);
  border-bottom: 1px solid var(--ptcz-border);
}

.ptcz-post-meta .ptcz-post-date {
  display: flex;
  align-items: center;
  gap: var(--ptcz-space-1);
}


/* ============================================================
   7. TABLE OF CONTENTS (TOC)
   ============================================================ */

.ptcz-toc {
  background-color: var(--ptcz-bg-light);
  border: 1px solid var(--ptcz-border);
  border-radius: var(--ptcz-radius-lg);
  padding: var(--ptcz-space-6);
  margin: var(--ptcz-space-8) 0;
  font-size: var(--ptcz-text-sm);
}

.ptcz-toc-title {
  font-family: var(--ptcz-font);
  font-size: var(--ptcz-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ptcz-text-muted);
  margin-bottom: var(--ptcz-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.ptcz-toc-toggle {
  font-size: var(--ptcz-text-xs);
  color: var(--ptcz-navy);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.ptcz-toc ol,
.ptcz-toc ul {
  margin: 0;
  padding-left: var(--ptcz-space-5);
}

.ptcz-toc li {
  margin-bottom: var(--ptcz-space-2);
  line-height: var(--ptcz-leading-normal);
}

.ptcz-toc li a {
  color: var(--ptcz-text);
  text-decoration: none;
  transition: color var(--ptcz-transition-fast);
}

.ptcz-toc li a:hover {
  color: var(--ptcz-navy);
  text-decoration: underline;
}

.ptcz-toc li.ptcz-toc-h3 {
  font-size: var(--ptcz-text-xs);
  color: var(--ptcz-text-muted);
  padding-left: var(--ptcz-space-4);
}

/* Sticky sidebar na desktopu (pokud TOC v sidebar layout) */
@media (min-width: 1024px) {
  .ptcz-toc-sticky {
    position: sticky;
    top: var(--ptcz-space-8);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

/* Collapsible na mobilu */
@media (max-width: 767px) {
  .ptcz-toc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--ptcz-transition-slow);
  }
  .ptcz-toc.is-open .ptcz-toc-body {
    max-height: 9999px;
  }
}


/* ============================================================
   8. HERO SEKCE — BLOG
   ============================================================ */

.ptcz-blog-hero {
  position: relative;
  background-color: var(--ptcz-navy);
  color: var(--ptcz-white);
  padding: var(--ptcz-space-16) 0 var(--ptcz-space-12);
  overflow: hidden;
}

.ptcz-blog-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.ptcz-blog-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--ptcz-content-max-width);
  margin: 0 auto;
  padding: 0 var(--ptcz-content-padding-x);
}

.ptcz-blog-hero__category {
  display: inline-block;
  font-size: var(--ptcz-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ptcz-gold);
  margin-bottom: var(--ptcz-space-4);
}

.ptcz-blog-hero__title {
  font-family: var(--ptcz-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: var(--ptcz-leading-tight);
  color: var(--ptcz-white);
  margin-bottom: var(--ptcz-space-6);
}

.ptcz-blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ptcz-space-4);
  font-size: var(--ptcz-text-sm);
  color: rgba(255,255,255,0.7);
}


/* ============================================================
   9. BLOG + TOUR CARD
   ============================================================ */

.ptcz-card {
  background: var(--ptcz-white);
  border: 1px solid var(--ptcz-border);
  border-radius: var(--ptcz-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--ptcz-transition-normal),
              transform var(--ptcz-transition-normal);
  display: flex;
  flex-direction: column;
}

.ptcz-card:hover {
  box-shadow: var(--ptcz-shadow-lg);
  transform: translateY(-2px);
}

.ptcz-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.ptcz-card__body {
  padding: var(--ptcz-space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ptcz-card__category {
  font-size: var(--ptcz-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ptcz-gold-dark);
  margin-bottom: var(--ptcz-space-2);
}

.ptcz-card__title {
  font-family: var(--ptcz-font-heading);
  font-size: var(--ptcz-text-xl);
  font-weight: 700;
  line-height: var(--ptcz-leading-tight);
  color: var(--ptcz-navy);
  margin-bottom: var(--ptcz-space-3);
  text-decoration: none;
  display: block;
}

.ptcz-card__title:hover {
  color: var(--ptcz-navy-light);
}

.ptcz-card__excerpt {
  font-size: var(--ptcz-text-sm);
  color: var(--ptcz-text-muted);
  line-height: var(--ptcz-leading-relaxed);
  flex: 1;
  margin-bottom: var(--ptcz-space-4);

  /* Line clamp — 3 řádky */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ptcz-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--ptcz-text-xs);
  color: var(--ptcz-text-muted);
  border-top: 1px solid var(--ptcz-border);
  padding-top: var(--ptcz-space-3);
  margin-top: auto;
}

/* Tour card variant — cena */
.ptcz-card--tour .ptcz-card__price {
  font-size: var(--ptcz-text-base);
  font-weight: 700;
  color: var(--ptcz-navy);
}

/* Grid pro karty */
.ptcz-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ptcz-space-6);
}

@media (min-width: 640px) {
  .ptcz-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ptcz-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   10. RELATED TRIP BOX
   ============================================================ */

.ptcz-related-trip {
  background: linear-gradient(135deg, var(--ptcz-navy) 0%, var(--ptcz-navy-light) 100%);
  border-radius: var(--ptcz-radius-xl);
  padding: var(--ptcz-space-8);
  margin: var(--ptcz-space-12) 0;
  color: var(--ptcz-white);
}

.ptcz-related-trip h3 {
  font-size: var(--ptcz-text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ptcz-gold);
  margin-bottom: var(--ptcz-space-4);
}

.ptcz-related-trip a {
  display: flex;
  align-items: center;
  gap: var(--ptcz-space-5);
  text-decoration: none;
  color: var(--ptcz-white);
}

.ptcz-related-trip img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: var(--ptcz-radius-md);
  flex-shrink: 0;
}

.ptcz-related-trip-title {
  font-family: var(--ptcz-font-heading);
  font-size: var(--ptcz-text-xl);
  font-weight: 700;
  display: block;
  margin-bottom: var(--ptcz-space-1);
}

.ptcz-related-trip-price {
  font-size: var(--ptcz-text-sm);
  color: var(--ptcz-gold-light);
}

@media (max-width: 767px) {
  .ptcz-related-trip a {
    flex-direction: column;
    align-items: flex-start;
  }
  .ptcz-related-trip img {
    width: 100%;
    height: 160px;
  }
}


/* ============================================================
   11. TABULKA (SCROLL WRAPPER)
   ============================================================ */

.pt-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--ptcz-space-6) 0;
  border-radius: var(--ptcz-radius-md);
  border: 1px solid var(--ptcz-border);
}

.pt-table-scroll table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--ptcz-text-sm);
}

.pt-table-scroll th {
  background-color: var(--ptcz-navy);
  color: var(--ptcz-white);
  font-weight: 600;
  text-align: left;
  padding: var(--ptcz-space-3) var(--ptcz-space-4);
  white-space: nowrap;
}

.pt-table-scroll td {
  padding: var(--ptcz-space-3) var(--ptcz-space-4);
  border-bottom: 1px solid var(--ptcz-border);
  color: var(--ptcz-text);
  vertical-align: top;
}

.pt-table-scroll tr:last-child td {
  border-bottom: none;
}

.pt-table-scroll tr:nth-child(even) td {
  background-color: var(--ptcz-bg-light);
}


/* ============================================================
   12. AI INTRO SEKCE
   ============================================================ */

.ptcz-ai-intro {
  font-size: var(--ptcz-text-lg);
  line-height: var(--ptcz-leading-relaxed);
  color: var(--ptcz-text);
  border-left: 3px solid var(--ptcz-gold);
  padding-left: var(--ptcz-space-6);
  margin: var(--ptcz-space-8) 0;
}

.ptcz-ai-intro p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   13. LAYOUT — BLOG ARTICLE
   ============================================================ */

.ptcz-article-layout {
  max-width: var(--ptcz-content-max-width);
  margin: 0 auto;
  padding: var(--ptcz-space-12) var(--ptcz-content-padding-x);
}

/* 2-sloupcový layout s TOC sidebar na desktopu */
@media (min-width: 1100px) {
  .ptcz-article-layout--with-toc {
    max-width: var(--ptcz-content-wide-width);
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--ptcz-space-12);
    align-items: start;
  }

  .ptcz-article-layout--with-toc .ptcz-toc {
    margin: 0;
  }
}


/* ============================================================
   14. UTILITY HELPERS
   ============================================================ */

/* Skip to content (accessibility) */
.ptcz-skip-link {
  position: absolute;
  top: -100%;
  left: var(--ptcz-space-4);
  background: var(--ptcz-navy);
  color: var(--ptcz-white);
  padding: var(--ptcz-space-3) var(--ptcz-space-6);
  border-radius: 0 0 var(--ptcz-radius-md) var(--ptcz-radius-md);
  font-weight: 600;
  text-decoration: none;
  z-index: var(--ptcz-z-modal);
  transition: top var(--ptcz-transition-fast);
}
.ptcz-skip-link:focus {
  top: 0;
}

/* Breadcrumb */
.ptcz-breadcrumb {
  font-size: var(--ptcz-text-sm);
  color: var(--ptcz-text-muted);
  margin-bottom: var(--ptcz-space-6);
}
.ptcz-breadcrumb a {
  color: var(--ptcz-text-muted);
  text-decoration: underline;
}
.ptcz-breadcrumb a:hover {
  color: var(--ptcz-navy);
}
.ptcz-breadcrumb span {
  margin: 0 var(--ptcz-space-2);
}

/* Visually hidden (accessibility) */
.ptcz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile menu CTA ─────────────────────────────────────
   Padding řeší obal menu (.ptcz-mm), ne item sám o sobě.
   Původní inline pravidla (header.php) přesunuta sem.
   custom.css obsluhuje .ptcz-mm__item.is-cta (border-top, link padding) — bez konfliktu.
   ────────────────────────────────────────────────────── */
.ptcz-mm .is-cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ptcz-mm .is-cta + .is-cta {
  margin-top: 12px !important;
}
.ptcz-mm .is-cta:has(.newbuttonp) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}


/* ============================================================
   15. GALLERY BLOK — integrace s existujícím lightbox.js
   Trigger: a.gallery_image | scope: data-gallery attr
   ============================================================ */

/* Volitelný nadpis nad galerií */
.ptcz-gallery__title {
  font-family: var(--ptcz-font-heading);
  font-size: var(--ptcz-text-xl);
  font-weight: 700;
  color: var(--ptcz-navy);
  margin: var(--ptcz-space-8) 0 var(--ptcz-space-4);
  line-height: var(--ptcz-leading-tight);
}

.ptcz-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ptcz-space-3);
  margin: var(--ptcz-space-8) 0;
}

/* Každý item — ořezaný wrapper s pevným poměrem stran */
.ptcz-gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--ptcz-radius-md);
  aspect-ratio: 4 / 3;
  background-color: var(--ptcz-bg-medium);
  text-decoration: none;
  /* Přidá outline při focus (přístupnost) */
  outline-offset: 2px;
}

.ptcz-gallery__item:focus-visible {
  outline: 3px solid var(--ptcz-gold);
}

/* Foto — vyplní celý item, zachová poměry */
.ptcz-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--ptcz-transition-slow);
  /* Přebíjí WP výchozí height: auto */
  max-width: none;
}

/* Hover zoom */
.ptcz-gallery__item:hover .ptcz-gallery__img,
.ptcz-gallery__item:focus-visible .ptcz-gallery__img {
  transform: scale(1.06);
}

/* Overlay při hoveru — jemné ztmavení + ikona lupy */
.ptcz-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(28, 43, 74, 0);   /* --ptcz-navy s 0 opacity */
  transition: background var(--ptcz-transition-normal);
  pointer-events: none;
  border-radius: var(--ptcz-radius-md);
}

.ptcz-gallery__item:hover::after,
.ptcz-gallery__item:focus-visible::after {
  background: rgba(28, 43, 74, 0.28);
}

/* Ikona lupy uprostřed overlaye */
.ptcz-gallery__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  opacity: 0;
  transition: opacity var(--ptcz-transition-normal);
  pointer-events: none;
}

.ptcz-gallery__item:hover::before,
.ptcz-gallery__item:focus-visible::before {
  opacity: 1;
}

/* ── Responzivita ── */

/* Tablet: 2 sloupce */
@media (max-width: 767px) {
  .ptcz-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ptcz-space-2);
  }
}

/* Mobil malý: 1 sloupec */
@media (max-width: 480px) {
  .ptcz-gallery {
    grid-template-columns: 1fr;
  }
}

/* Pokud je galerie single-item (1 foto), roztáhne se přes plnou šířku */
.ptcz-gallery:has(.ptcz-gallery__item:only-child) {
  grid-template-columns: 1fr;
}

/* 2 fotky: 2 sloupce (i na mobilu >= 480px) */
.ptcz-gallery:has(.ptcz-gallery__item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}