/* =========================================
   ABOUT PAGE
   ========================================= */

.main-content.about-content {
  max-width: 72rem;
  padding: clamp(1rem, 3vw, 2rem) 1rem
    calc(1.5rem + env(safe-area-inset-bottom));
  gap: clamp(1.75rem, 4vw, 3rem);
  color: var(--bg-dark);
}

.about-content .page-subtitle {
  width: 100%;
}

.about-content .type-accent-value {
  letter-spacing: 0;
}

.about-section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
}

.about-section-heading .type-accent-value {
  line-height: 1.2;
}

/* =========================================
   HERO
   ========================================= */
.about-hero {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
  align-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--primary);
  box-shadow: var(--shadow-gold-light);
  overflow: hidden;
}

.about-hero-title,
#aboutHeroTitle {
  max-width: 42rem;
}

.hero-img {
  width: min(70%, 15rem);
  height: auto;
  object-fit: contain;
}

.about-hero .about-hero-subtitle {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--bg-light);
  opacity: 0.78;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1rem, 3vw, 1.5rem);
}

.about-hero-actions .about-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-width: 10rem;
  min-height: 2.75rem;
  padding: 0.425rem 0.6rem;
  border: 1px solid var(--accent-light);
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--bg-dark);
  box-shadow: var(--shadow-gold-light);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  font-size: var(--font-size-item-title);
  transition:
    background 0.2s,
    border-color 0.2s;
}

.about-hero-actions .about-primary-action:hover {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

.about-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.425rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-light);
  font-size: var(--font-size-item-title);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  text-decoration: none;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}

.about-secondary-action:hover {
  background: var(--primary);
  border-color: var(--accent);
  color: var(--accent-bright);
}

.about-forward-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.425rem 0.5rem 0.425rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--accent-light);
  font-size: var(--font-size-item-title);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  text-decoration: none;
  box-shadow: var(--plain-shadow);
  overflow: hidden;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}

.about-forward-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-light);
  opacity: 0;
  transition: opacity 0.2s;
}

.about-forward-action span {
  position: relative;
  z-index: 1;
}

.about-forward-action:hover,
.about-forward-action:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-bright);
  color: var(--bg-dark);
  box-shadow: var(--shadow-gold-light);
}

.about-forward-action:hover::before,
.about-forward-action:focus-visible::before {
  opacity: 1;
}

.about-forward-action:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.about-forward-action--standalone {
  align-self: flex-end;
}

.about-forward-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(243, 231, 179, 0.45);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--accent-light);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.about-forward-action:hover .about-forward-icon-wrapper,
.about-forward-action:focus-visible .about-forward-icon-wrapper {
  background: var(--bg-dark);
  color: var(--accent-bright);
  transform: translateX(3px);
}

.about-forward-chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.about-action-icon {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  flex-shrink: 0;
}

.about-action-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bg-dark);
}

.about-hero-visual {
  display: none;
}

/* =========================================
   STEPS SECTION WRAPPER
   ========================================= */
.about-steps,
.about-prizes,
.about-social-footer {
  width: 100%;
}


/* =========================================
   STORY BLOCKS (replaces numbered steps)
   ========================================= */
.about-story-blocks {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-light);
  overflow: hidden;
}

.about-story-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1rem;
}

.about-story-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0 1rem;
}

.about-story-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg-dark);
}

.about-story-icon {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  opacity: 0.85;
}

.about-story-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.1rem;
}

.about-story-title {
  margin: 0;
  font-size: var(--font-size-item-title);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  color: var(--text-main);
  line-height: 1.3;
}

.about-story-text {
  margin: 0;
  font-size: var(--font-size-item-title-sm);
  font-family: var(--font-family);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* =========================================
   PRIZES — PODIUM
   ========================================= */
.about-prize-stage {
  position: relative;
  padding: clamp(1rem, 4vw, 1.75rem);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--primary);
  color: var(--bg-light);
  box-shadow: var(--shadow-gold-light);
  overflow: hidden;
}

.about-podium-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-end;
  gap: 0.5rem;
}

.about-prize-podium {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.55rem 0;
  border: 1px solid var(--accent);
  border-radius: 8px 8px 0 0;
  background: var(--primary);
  box-shadow: var(--plain-shadow);
  transition:
    border-color 0.2s,
    transform 0.2s;
  animation: shadowShineSmall 5s ease-in-out infinite;
}

.about-prize-podium:hover {
  border-color: var(--accent-light);
  transform: translateY(-3px);
}

.about-prize-podium--center {
  border-color: var(--accent-light);
  background: var(--bg-dark);
  box-shadow: var(--shadow-gold-light);
}

.about-prize-eyebrow {
  color: var(--accent-light);
  font-size: clamp(0.48rem, 1.2vw, 0.58rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.about-prize-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(6rem, 22vw, 10rem);
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-dark);
  overflow: hidden;
}

.about-prize-media img {
  position: relative;
  z-index: 1;
  width: min(88%, 11rem);
  height: auto;
  max-height: clamp(5.5rem, 20vw, 9rem);
  object-fit: contain;
}

.about-prize-media--main {
  min-height: clamp(8rem, 30vw, 13rem);
}

.about-prize-media--main img {
  max-height: clamp(7rem, 27vw, 12rem);
}

.about-prize-panel {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.4rem, 1.2vw, 0.65rem) clamp(0.35rem, 0.9vw, 0.55rem);
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-light);
}

.about-prize-panel p,
.about-prize-panel h3 {
  margin: 0;
}

.about-prize-panel .type-accent-value {
  font-size: clamp(0.52rem, 1.3vw, 0.65rem);
  line-height: 1.2;
}

.about-prize-panel h3 {
  color: var(--bg-dark);
  font-size: clamp(0.72rem, 2.2vw, 0.9rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  line-height: 1.1;
}

.about-prize-podium--center .about-prize-panel .type-accent-value {
  font-size: clamp(0.58rem, 1.5vw, 0.72rem);
}

.about-prize-podium--center .about-prize-panel h3 {
  font-size: clamp(0.88rem, 2.8vw, 1.15rem);
}

.about-podium-block {
  width: 100%;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-podium-rank {
  font-size: clamp(0.9rem, 3vw, 1.25rem);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family);
  line-height: 1;
  color: var(--bg-dark);
}

.about-podium-block--first {
  height: clamp(2.5rem, 8vw, 4rem);
  background: var(--accent-light);
  border-top: 2px solid var(--accent);
}

.about-podium-block--second {
  height: clamp(1.75rem, 6vw, 3rem);
  background: var(--text-accent);
  border-top: 2px solid var(--accent);
}

.about-podium-block--third {
  height: clamp(1.25rem, 4.5vw, 2.25rem);
  background: var(--accent);
  border-top: 2px solid var(--accent-secondary);
}

/* =========================================
   SOCIAL FOOTER
   ========================================= */
.about-social-footer {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--bg-light);
  box-shadow: var(--shadow-gold-light);
}

.about-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.about-footer-brand img {
  width: 7.5rem;
  height: auto;
  object-fit: contain;
}

.about-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.about-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--bg-light);
  font-size: var(--font-size-item-title-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.about-social-links a:hover {
  background: var(--primary);
  border-color: var(--accent-light);
  color: var(--accent-light);
}

/* =========================================
   PARTICIPANTS BLOCK
   ========================================= */
.about-participants {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-light);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.about-participants-title {
  margin: 0;
}

.about-participants-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
}

.about-participants-list li {
  position: relative;
  font-size: var(--font-size-item-title);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--text-main);
  padding-left: 0.85rem;
}

.about-participants-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-light);
}

.about-participants-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.about-participants-note p {
  margin: 0;
  font-size: var(--font-size-item-title);
  font-family: var(--font-family);
  color: var(--text-main);
  line-height: 1.4;
}

/* =========================================
   DESKTOP (≥ 768px)
   ========================================= */
@media (min-width: 768px) {
  .main-content.about-content {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    justify-content: flex-start;
  }

  .about-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(14rem, 0.7fr);
  }

  .about-hero-visual {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
  }

  .about-hero-visual img {
    width: min(70%, 15rem);
    height: auto;
    object-fit: contain;
    animation: floatingMotion 4s ease-in-out infinite;
  }

  .about-hero-visual span {
    position: absolute;
    right: 10%;
    bottom: 12%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--bg-dark);
    box-shadow: var(--shadow-gold);
  }

  .about-story-item {
    padding: 1.25rem 1.25rem;
    gap: 1.15rem;
  }

  .about-story-divider {
    margin: 0 1.25rem;
  }

  .about-story-icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
  }

  .about-social-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .about-social-links {
    justify-content: flex-end;
  }

  .about-podium-row {
    gap: 0.875rem;
  }

  .about-prize-media {
    min-height: clamp(9rem, 25vw, 13rem);
  }

  .about-prize-media img {
    max-height: clamp(8rem, 22vw, 12rem);
  }

  .about-prize-media--main {
    min-height: clamp(11rem, 30vw, 16rem);
  }

  .about-prize-media--main img {
    max-height: clamp(10rem, 27vw, 14rem);
  }

  .about-participants {
    padding: 1rem 1.25rem;
  }
}

@media (max-width: 520px) {
  .about-hero-actions > a {
    flex: 1 1 100%;
  }

  .about-forward-action--standalone {
    align-self: stretch;
    width: 100%;
  }
}

.about-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  opacity: 0.75;
  margin-bottom: 0.25rem;
}

.about-hero-desc {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.about-hero-desc p {
  color: var(--bg-light);
  opacity: 0.8;
  font-size: var(--font-size-item-title);
  line-height: 1.6;
  margin: 0;
}

.about-hero-desc strong {
  font-weight: var(--font-weight-bold);
  opacity: 1;
  color: var(--accent-light);
}

.about-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.about-pill {
  font-size: var(--font-size-item-title-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  color: var(--bg-light);
  opacity: 0.7;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
}

.about-story-link {
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* ── Суперпризы: премиальный вид (медали вместо квадратов) ── */
.about-prize-stage{border:none;border-radius:18px;background:linear-gradient(160deg,#222a20,#151b14);padding:clamp(1.4rem,5vw,2rem) clamp(.75rem,3vw,1.4rem) clamp(1.1rem,4vw,1.6rem)}
.about-podium-row{align-items:end;gap:clamp(.5rem,2.5vw,1rem)}
.about-prize-podium{border:1px solid rgba(201,168,76,.22);border-radius:16px;background:rgba(255,255,255,.04);box-shadow:0 8px 22px rgba(0,0,0,.28);animation:none;padding:.7rem .55rem 1rem;gap:.55rem;overflow:visible}
.about-prize-podium:hover{transform:translateY(-4px);border-color:rgba(201,168,76,.5)}
.about-prize-podium--center{border-color:rgba(201,168,76,.75);background:linear-gradient(160deg,rgba(201,168,76,.16),rgba(201,168,76,.03));box-shadow:0 14px 34px rgba(201,168,76,.28);transform:translateY(-12px)}
.about-prize-podium--center:hover{transform:translateY(-16px)}
.about-prize-eyebrow{color:#e0c170;letter-spacing:.4px}
.about-prize-media{border:none;border-radius:12px;background:#fff;padding:.5rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.about-prize-panel{border:none;border-radius:10px;background:#fff;text-align:center;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.about-podium-block{height:auto!important;background:none!important;border:none!important;border-radius:0!important;margin-top:.15rem}
.about-podium-rank{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;color:#1e2620;font-weight:800;font-size:1rem;background:linear-gradient(145deg,#ecd591,#c9a84c);border:2px solid #b8923a;box-shadow:0 3px 9px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.55)}
.about-podium-block--first .about-podium-rank{width:2.5rem;height:2.5rem;font-size:1.15rem;background:linear-gradient(145deg,#ffe89c,#d4af37);border-color:#c2992f}
.about-podium-block--second .about-podium-rank{background:linear-gradient(145deg,#f1f1f1,#bdbdbd);border-color:#9a9a9a}
.about-podium-block--third .about-podium-rank{background:linear-gradient(145deg,#ecb988,#c1803f);border-color:#a5662c}

/* ── Футер: Instagram справа от логотипа AlmaWine ── */
.about-social-footer{display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
.about-social-links{flex:0 0 auto;justify-content:flex-end}