/* ==========================================================================
   Single Post & Portfolio — Article page styles
   Depends on: archive.css (loaded first, provides .zg3-listing-container,
               breadcrumbs, portfolio card, inner-header styles)
   ========================================================================== */

/* ---------- Tag badges ---------- */
.zg3-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--zg3-r-full);
  background: var(--zg3-primary);
  color: var(--zg3-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-decoration: none;
  transition: opacity 0.2s;
}
.zg3-tag:hover { opacity: 0.85; }
.zg3-tag--outline {
  background: transparent;
  border: 1.5px solid rgba(34, 34, 34, 0.12);
  color: var(--zg3-gray);
}
.zg3-tag--outline:hover { border-color: var(--zg3-primary); color: var(--zg3-primary); }

/* ==========================================================================
   Article top section
   ========================================================================== */
.zg3-art-top {
  padding: var(--zg3-sp-32) 0 var(--zg3-sp-40);
  background: var(--zg3-bg);
}

.zg3-art-top__inner {
  max-width: 860px;
}

/* Meta row: category tag + date + reading time */
.zg3-art-meta {
  display: flex;
  align-items: center;
  gap: var(--zg3-sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--zg3-sp-20);
  margin-top: var(--zg3-sp-16);
}
.zg3-art-meta__date {
  font-size: var(--zg3-fs-small);
  color: var(--zg3-gray);
}
.zg3-art-meta__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--zg3-fs-small);
  color: var(--zg3-gray);
}
.zg3-art-meta__read svg { flex-shrink: 0; }

/* Portfolio meta small pills */
.zg3-art-meta__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--zg3-fs-micro);
  color: var(--zg3-gray);
  background: rgba(34, 34, 34, 0.05);
  padding: 4px 10px;
  border-radius: var(--zg3-r-full);
}
.zg3-art-meta__pill svg { flex-shrink: 0; }

/* H1 */
.zg3-art-h1 {
  font-size: clamp(28px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--zg3-black);
}

/* Lead / excerpt */
.zg3-art-lead {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--zg3-gray);
  max-width: 720px;
}

/* ==========================================================================
   Cover image
   ========================================================================== */
.zg3-art-cover {
  background: var(--zg3-bg);
  padding-bottom: var(--zg3-sp-48);
}
.zg3-art-cover__img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--zg3-r-lg);
  display: block;
}
@media (max-width: 767px) {
  .zg3-art-cover__img { max-height: 280px; border-radius: var(--zg3-r-md); }
}

/* ==========================================================================
   Article body (prose content centered column)
   ========================================================================== */
.zg3-art-body {
  padding-bottom: var(--zg3-sp-64);
  background: var(--zg3-bg);
}

/* Narrow centered column within the 1440 container */
.zg3-art-prose-col {
  margin-inline: auto;
}

/* ---------- Prose typography ---------- */
.zg3-prose {
  font-size: 17px;
  line-height: 1.85;
  color: var(--zg3-black);
}
.zg3-prose h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: var(--zg3-sp-48) 0 var(--zg3-sp-24);
  color: var(--zg3-black);
}
.zg3-prose h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--zg3-sp-32) 0 var(--zg3-sp-16);
}
.zg3-prose h4 {
  font-size: 18px;
  font-weight: 600;
  margin: var(--zg3-sp-24) 0 var(--zg3-sp-12);
}
.zg3-prose p { margin-bottom: var(--zg3-sp-20); }
.zg3-prose strong, .zg3-prose b { font-weight: 700; color: var(--zg3-black); }
.zg3-prose em, .zg3-prose i { font-style: italic; }
.zg3-prose a {
  color: var(--zg3-primary);
  text-decoration: underline;
  text-decoration-color: rgba(249, 60, 27, 0.35);
  transition: text-decoration-color 0.2s;
}
.zg3-prose a:hover { text-decoration-color: var(--zg3-primary); }
.zg3-prose ul, .zg3-prose ol {
  margin: var(--zg3-sp-20) 0;
  padding-left: var(--zg3-sp-24);
}
.zg3-prose ul  { list-style: disc; }
.zg3-prose ol  { list-style: decimal; }
.zg3-prose li {
    padding-left: var(--zg3-sp-24);
    position: relative;
    margin-bottom: var(--zg3-sp-8);
    color: var(--zg3-black);
}
.zg3-prose li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--zg3-primary);
    font-weight: 700;
}


.zg3-prose ul li::marker { color: var(--zg3-primary); }
.zg3-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--zg3-r-lg);
  display: block;
}
.zg3-prose blockquote {
  border-left: 3px solid var(--zg3-primary);
  padding: var(--zg3-sp-16) var(--zg3-sp-24);
  margin: var(--zg3-sp-32) 0;
  background: rgba(249, 60, 27, 0.04);
  border-radius: 0 var(--zg3-r-md) var(--zg3-r-md) 0;
  font-style: italic;
  color: var(--zg3-gray);
}
/* First child in prose should not have excessive top margin */
.zg3-prose > :first-child { margin-top: 0; }
/* Emoji-prefixed list items — hide disc marker when li starts with emoji */
.zg3-prose ul { list-style: none; padding-left: var(--zg3-sp-8); }
.zg3-prose ol { list-style: decimal; }
.zg3-prose hr {
  border: none;
  border-top: 1px solid rgba(34, 34, 34, 0.1);
  margin: var(--zg3-sp-48) 0;
}

/* Tags list below article body */
.zg3-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zg3-sp-8);
  margin-top: var(--zg3-sp-40);
  padding-top: var(--zg3-sp-32);
  border-top: 1px solid rgba(34, 34, 34, 0.08);
}

/* ==========================================================================
   Responsive video embeds — autoscale iframes (YouTube, VK, Vimeo, etc.)
   Works for Gutenberg wp-block-embed, WP [video] shortcode, classic iframes.
   ========================================================================== */

/* Gutenberg embed block wrapper */
.zg3-prose figure.wp-block-embed {
  margin: var(--zg3-sp-32) 0;
  max-width: 100%;
}
.zg3-prose .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--zg3-r-lg);
}
.zg3-prose .wp-block-embed__wrapper iframe,
.zg3-prose .wp-block-embed__wrapper embed,
.zg3-prose .wp-block-embed__wrapper object,
.zg3-prose .wp-block-embed__wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* WP already adds aspect-ratio padding on .wp-has-aspect-ratio via inline style —
   reuse the wrapper pattern so wrapper always fills prose width */
.zg3-prose figure.wp-has-aspect-ratio .wp-block-embed__wrapper {
  padding-bottom: 0; /* let WP inline style control height */
  height: auto;
  aspect-ratio: 16 / 9;
}
.zg3-prose figure.wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
  position: static;
  width: 100% !important;
  height: 100% !important;
}

/* WP [video] shortcode */
.zg3-prose .wp-video,
.zg3-prose .wp-audio {
  width: 100% !important;
  max-width: 100% !important;
}
.zg3-prose .wp-video-shortcode {
  width: 100% !important;
  height: auto;
}

/* Bare iframes (classic editor paste) — YouTube, VK, Vimeo */
.zg3-prose > iframe,
.zg3-prose p > iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  border-radius: var(--zg3-r-lg);
  margin: var(--zg3-sp-24) 0;
}

/* ==========================================================================
   "Читайте также" / "Другие работы" section
   ========================================================================== */
.zg3-art-also {
  padding: var(--zg3-sp-64) 0;
  background: var(--zg3-bg);
  border-top: 1px solid rgba(34, 34, 34, 0.06);
}

.zg3-art-also__heading {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--zg3-sp-32);
}

/* ==========================================================================
   Prev / Next post navigation
   ========================================================================== */
.zg3-art-prevnext {
  background: var(--zg3-bg);
  padding: var(--zg3-sp-48) 0;
  border-top: 1px solid rgba(34, 34, 34, 0.06);
}

.zg3-art-prevnext__row {
  display: flex;
  justify-content: space-between;
  gap: var(--zg3-sp-16);
}

.zg3-art-prevnext__item {
  display: flex;
  align-items: center;
  gap: var(--zg3-sp-16);
  text-decoration: none;
  color: inherit;
  max-width: 46%;
  padding: var(--zg3-sp-20) var(--zg3-sp-24);
  border-radius: var(--zg3-r-lg);
  border: 1.5px solid rgba(34, 34, 34, 0.08);
  transition: border-color 0.2s, background 0.2s, transform 0.25s;
  flex: 1;
}
.zg3-art-prevnext__item:hover {
  border-color: var(--zg3-black);
  background: rgba(34, 34, 34, 0.03);
  transform: translateY(-2px);
}
.zg3-art-prevnext__item--next {
  flex-direction: row-reverse;
  text-align: right;
}

.zg3-art-prevnext__img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--zg3-r-md);
  flex-shrink: 0;
}
@media (max-width: 599px) { .zg3-art-prevnext__img { display: none; } }

.zg3-art-prevnext__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.zg3-art-prevnext__dir {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--zg3-fs-micro);
  color: var(--zg3-gray);
  font-weight: var(--zg3-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.zg3-art-prevnext__item--next .zg3-art-prevnext__dir { justify-content: flex-end; }
.zg3-art-prevnext__ttl {
  font-size: var(--zg3-fs-small);
  font-weight: var(--zg3-fw-semibold);
  color: var(--zg3-black);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .zg3-art-prevnext__row { flex-direction: column; }
  .zg3-art-prevnext__item,
  .zg3-art-prevnext__item--next { max-width: 100%; }
  .zg3-art-prevnext__item--next { flex-direction: row; text-align: left; }
  .zg3-art-prevnext__item--next .zg3-art-prevnext__dir { justify-content: flex-start; }
}

/* ==========================================================================
   Joomla-imported Bootstrap 3 grid — restore col layout without Bootstrap CSS.
   All imported content is wrapped in .row > .col-* divs.
   ========================================================================== */
.zg3-prose .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
}
/* Reset Bootstrap padding/float on all col-* variants */
.zg3-prose [class*="col-"] {
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}
/* Map common Bootstrap col fractions */
.zg3-prose .col-lg-4,
.zg3-prose .col-md-4,
.zg3-prose .col-sm-4  { flex: 0 0 calc(33.33% - 6px); }
.zg3-prose .col-lg-6,
.zg3-prose .col-md-6,
.zg3-prose .col-sm-6  { flex: 0 0 calc(50% - 4px); }
.zg3-prose .col-lg-8,
.zg3-prose .col-md-8,
.zg3-prose .col-sm-8  { flex: 0 0 calc(66.66% - 3px); }
.zg3-prose .col-lg-12,
.zg3-prose .col-md-12,
.zg3-prose .col-sm-12 { flex: 0 0 100%; }
/* Any unlisted col falls back to equal share */
.zg3-prose [class*="col-"]:not([class*="col-lg-"]):not([class*="col-md-"]):not([class*="col-sm-"]) {
  flex: 1 1 0;
}
/* Stack all cols on mobile */
@media (max-width: 767px) {
  .zg3-prose [class*="col-"] { flex: 0 0 100%; }
}
/* Reduce image vertical margin inside side columns (not full-width 12-col) */
.zg3-prose .col-lg-4 img,
.zg3-prose .col-md-4 img,
.zg3-prose .col-sm-4 img,
.zg3-prose .col-lg-6 img,
.zg3-prose .col-md-6 img,
.zg3-prose .col-sm-6 img,
.zg3-prose .col-lg-8 img,
.zg3-prose .col-md-8 img,
.zg3-prose .col-sm-8 img { margin: var(--zg3-sp-8) 0; }

/* ==========================================================================
   Joomla-imported gallery: .row.porthpolio-gallery > .col-sm-6.photos > .item > a > img
   Override flex layout above with CSS grid for a tighter photo grid.
   ========================================================================== */
.zg3-prose .porthpolio-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: var(--zg3-sp-32) 0;
}
/* Reset any Bootstrap col behaviour (float, padding, width) */
.zg3-prose .porthpolio-gallery > * {
  float: none;
  width: auto;
  padding: 0;
}
.zg3-prose .porthpolio-gallery .item {
  height: 100%;
  border-radius: var(--zg3-r-md);
  overflow: hidden;
}
.zg3-prose .porthpolio-gallery .item a {
  display: block;
  height: 100%;
}
.zg3-prose .porthpolio-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  display: block;
  transition: transform 0.35s ease;
}
.zg3-prose .porthpolio-gallery .item:hover img {
  transform: scale(1.04);
}
@media (max-width: 767px) {
  .zg3-prose .porthpolio-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .zg3-prose .porthpolio-gallery { grid-template-columns: 1fr; }
  .zg3-prose .porthpolio-gallery img { height: 200px; }
}

/* ==========================================================================
   Prose image grid — JS groups consecutive images into this wrapper
   ========================================================================== */
.zg3-prose-img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: var(--zg3-sp-32) 0;
}
.zg3-prose-img-grid > * {
  overflow: hidden;
  border-radius: var(--zg3-r-md);
}
.zg3-prose-img-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--zg3-r-md);
  margin: 0;
  display: block;
  transition: transform 0.35s ease;
}
.zg3-prose-img-grid img:hover { transform: scale(1.04); }

/* 2-item grids get wider thumbnails */
.zg3-prose-img-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.zg3-prose-img-grid--2col img { height: 280px; }

@media (max-width: 767px) {
  .zg3-prose-img-grid,
  .zg3-prose-img-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
  .zg3-prose-img-grid img,
  .zg3-prose-img-grid--2col img { height: 160px; }
}
@media (max-width: 479px) {
  .zg3-prose-img-grid,
  .zg3-prose-img-grid--2col {
    grid-template-columns: 1fr;
  }
  .zg3-prose-img-grid img,
  .zg3-prose-img-grid--2col img { height: 200px; }
}

/* ==========================================================================
   Portfolio CTA card — call-to-action block at end of portfolio posts
   ========================================================================== */
.zg3-porto-cta {
  background: linear-gradient(135deg, rgba(249, 60, 27, 0.06) 0%, rgba(249, 60, 27, 0.02) 100%);
  border: 1.5px solid rgba(249, 60, 27, 0.22);
  border-radius: var(--zg3-r-xl);
  padding: var(--zg3-sp-40);
  margin-top: var(--zg3-sp-48);
  text-align: center;
}
.zg3-porto-cta__lead {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--zg3-black);
  margin-bottom: var(--zg3-sp-12);
}
.zg3-porto-cta > p {
  font-size: 16px;
  color: var(--zg3-gray);
  line-height: 1.7;
  margin-bottom: var(--zg3-sp-24);
}
.zg3-porto-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--zg3-primary);
  color: var(--zg3-white);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 36px;
  border-radius: var(--zg3-r-full);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.25s;
}
.zg3-porto-cta__btn:hover { opacity: 0.88; transform: translateY(-2px); }

@media (max-width: 599px) {
  .zg3-porto-cta { padding: var(--zg3-sp-24) var(--zg3-sp-20); }
  .zg3-porto-cta__btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Achievements Bento Widget — replaces old porto-cta
   ========================================================================== */
.zg3-achievements {
  margin-top: var(--zg3-sp-64);
  padding: var(--zg3-sp-40) var(--zg3-sp-32);
  background: var(--zg3-dark);
  border-radius: 24px;
  color: var(--zg3-white);
}

/* Header */
.zg3-achievements__header {
  text-align: center;
  margin-bottom: var(--zg3-sp-32);
}
.zg3-achievements__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--zg3-sp-8);
}
.zg3-achievements__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--zg3-sp-20);
}

/* CTA buttons row */
.zg3-achievements__cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.zg3-achievements__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--zg3-r-full);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: opacity 0.2s, transform 0.25s;
  font-family: inherit;
  white-space: nowrap;
}
.zg3-achievements__btn:hover { opacity: 0.85; transform: translateY(-2px); }
.zg3-achievements__btn--phone {
  background: var(--zg3-primary);
  border-color: var(--zg3-primary);
  color: var(--zg3-white);
}
.zg3-achievements__btn--quiz {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--zg3-white);
}
.zg3-achievements__btn--quiz:hover { border-color: rgba(255, 255, 255, 0.5); }

/* Bento Grid */
.zg3-achievements__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  gap: 10px;
}

/* Cards base — compact, flat, no gradients */
.zg3-achievements__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.3s, background 0.3s;
}
.zg3-achievements__card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

/* Icon per card */
.zg3-achievements__ico {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.zg3-achievements__num {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.zg3-achievements__label {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* Card variants — brand colors only, no borders */
.zg3-achievements__card--hero {
  grid-column: span 2;
  background: var(--zg3-primary);
}
.zg3-achievements__card--hero:hover { background: #e0350f; }
.zg3-achievements__card--hero .zg3-achievements__num,
.zg3-achievements__card--hero .zg3-achievements__ico { color: #fff; }
.zg3-achievements__card--hero .zg3-achievements__label { color: rgba(255,255,255,.8); }

.zg3-achievements__card--accent {
  background: var(--zg3-secondary);
}
.zg3-achievements__card--accent:hover { background: #6510e0; }

/* ==========================================================================
   Свистоплясово article — component classes
   (Inline grid-template-columns gets stripped by wp_kses — use classes instead)
   ========================================================================== */

/* Wrapper */
.svisto-wrap { }
.svisto-wrap h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.03em; margin: 40px 0 20px; color: var(--zg3-black); }
.svisto-wrap h2:first-child { margin-top: 0; }

/* Tags row */
.svisto-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.svisto-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 100px; }
.svisto-tag--red    { background: #F93C1B; color: #fff; }
.svisto-tag--purple { background: #7615FF; color: #fff; }
.svisto-tag--dark   { background: #1A1A1A; color: #fff; }
.svisto-tag--muted  { background: rgba(34,34,34,.07); color: #555; }

/* Who-cards row */
.svisto-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0 36px; }
.svisto-who__card { background: #fff; border-radius: 16px; padding: 20px;  }
.svisto-who__ico  { font-size: 28px; display: block; margin-bottom: 8px; }
.svisto-who__name { display: block; font-size: 15px; font-weight: 700; color: #222; margin-bottom: 4px; }
.svisto-who__desc { font-size: 13px; color: #777; line-height: 1.45;     display: block;}

/* Features list card */
.svisto-features { background: #fff; border-radius: 16px; padding: 24px 28px;  margin: 20px 0 36px; }
.svisto-features__row { font-size: 15px; color: #444; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; line-height: 1.6; }
.svisto-features__row:last-child { margin-bottom: 0; }

/* Venue cards grid */
.svisto-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 24px 0 40px; }
.svisto-card { background: #fff; border-radius: 16px; overflow: hidden; }
.svisto-card__head { padding: 16px 20px; gap: 0px; display: flex; flex-direction: column;}
.svisto-card__emoji { font-size: 22px; display: block; margin-bottom: 4px; }
.svisto-card__title { font-size: 16px; font-weight: 700; display: block; margin-bottom: 2px; color: #fff; }
.svisto-card__sub   { font-size: 12px; color: rgba(255,255,255,.6); }
.svisto-card__body  { padding: 16px 20px; }
.svisto-card__row   { font-size: 13px; color: #444; line-height: 1.8; margin: 0 0 5px; display: flex; align-items: flex-start; gap: 8px; }
.svisto-card__row:last-of-type { margin-bottom: 14px; }
.svisto-card__price { font-size: 18px; font-weight: 800; color: #F93C1B; display: block; }

/* Venue head colour variants */
.svisto-card__head--dark   { background: #1A1A1A; }
.svisto-card__head--purple { background: #7615FF; }
.svisto-card__head--red    { background: #F93C1B; }
.svisto-card__head--green  { background: #2A4F2A; }
.svisto-card__head--teal   { background: #0D5E6E; }
.svisto-card__head--indigo { background: #5D3A8C; }
.svisto-card__head--brown  { background: #7B4F2E; }

/* Activity chips */
.svisto-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 20px 0 36px; }
.svisto-chip  { background: #fff; border-radius: 12px; padding: 14px 20px; font-size: 14px; color: #333; display: flex; flex-direction: column; line-height: 1.25; gap: 12px; }

/* Programs list card */
.svisto-programs { background: #fff; border-radius: 16px; padding: 24px 28px;  margin: 20px 0 36px; }
.svisto-programs__row { font-size: 15px; color: #333; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; line-height: 1.6; }
.svisto-programs__row:last-child { margin-bottom: 0; }

/* Promo block */
.svisto-promo { border-radius: 20px; padding: 28px 32px; margin: 36px 0; background: linear-gradient(135deg,#F93C1B 0%,#c72c10 100%); color: #fff; }
.svisto-promo__label  { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-bottom: 16px; }
.svisto-promo__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.svisto-promo__badge  { background: rgba(255,255,255,.15); border-radius: 12px; padding: 12px 18px; }
.svisto-promo__num    { font-size: 22px; font-weight: 800; line-height: 1.2; color: #fff; }
.svisto-promo__desc   { font-size: 12px; opacity: .85; margin-top: 2px; color: #fff; }

/* CTA block */
.svisto-cta { background: #ECEAE3; border-radius: 20px; padding: 28px 32px; margin: 36px 0 0; }
.svisto-cta__title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 8px; }
.svisto-cta__sub   { font-size: 15px; color: #666; margin-bottom: 20px; }
.svisto-cta__btns  { display: flex; flex-wrap: wrap; gap: 10px; }
.svisto-cta__btn   { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 100px; text-decoration: none; line-height: 1; }
.svisto-cta__btn--red     { background: #F93C1B; color: #fff; }
.svisto-cta__btn--dark    { background: #1A1A1A; color: #fff; }
.svisto-cta__btn--outline { background: #fff; color: #222; border: 1.5px solid rgba(34,34,34,.15); }

/* Override prose margin on all p inside svisto components */
.svisto-wrap p { margin-bottom: 0; }
.svisto-wrap > p { margin-bottom: 20px; } /* top-level paragraphs keep spacing */
.svisto-wrap blockquote p { margin-bottom: 0; }

/* Suppress prose list decorations inside svisto */
.zg3-prose .svisto-wrap li { padding-left: 0; }
.zg3-prose .svisto-wrap li::before { content: none; }

/* ========================================================================== */

.zg3-achievements__card--accent .zg3-achievements__num,
.zg3-achievements__card--accent .zg3-achievements__ico { color: #fff; }
.zg3-achievements__card--accent .zg3-achievements__label { color: rgba(255,255,255,.8); }

.zg3-achievements__card--wide {
  grid-column: span 2;
}

.zg3-achievements__card--dark { }

.zg3-achievements__card--save { }
.zg3-achievements__card--save .zg3-achievements__num,
.zg3-achievements__card--save .zg3-achievements__ico { color: var(--zg3-primary); }

.zg3-achievements__card--time { }
.zg3-achievements__card--time .zg3-achievements__num,
.zg3-achievements__card--time .zg3-achievements__ico { color: #fff; }

.zg3-achievements__card--fun {
  grid-column: 1 / -1; /* always spans full width */
}

/* ── Tablet: 3 cols ── */
@media (max-width: 960px) {
  .zg3-achievements__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* dense packing fills holes on tablet too */
}

/* ── Mobile: 2 cols ── */
@media (max-width: 599px) {
  .zg3-achievements {
    padding: 28px var(--zg3-sp-20);
    border-radius: 16px;
    margin-top: var(--zg3-sp-40);
  }
  .zg3-achievements__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .zg3-achievements__card { padding: 14px 16px; }
  .zg3-achievements__card--hero,
  .zg3-achievements__card--wide,
  .zg3-achievements__card--fun { grid-column: span 2; }
  .zg3-achievements__num { font-size: 24px; }
  .zg3-achievements__cta-row { gap: 8px; }
  .zg3-achievements__btn { font-size: 13px; padding: 10px 18px; }
  .zg3-achievements__btn--phone { width: 100%; justify-content: center; }
  .zg3-achievements__btn--quiz { width: 100%; justify-content: center; }
}