/* Page Builder sections — front + inner pages */

/* Shared sections */
.section {
  padding-block: var(--space-section-y);
}

/* Hero must not inherit section vertical padding */
.hero.section {
  padding-block: 0;
}

.section__heading {
  font: var(--font-headline-section);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}

.section__heading--on-dark {
  color: var(--color-on-primary);
}

.section__heading--sm {
  font-size: clamp(22px, 3vw, 28px);
}

.section__intro {
  font: var(--font-body-lg);
  max-width: 65ch;
  margin: 0 0 var(--space-lg);
}

.section__eyebrow {
  font: var(--font-label-nav);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin: 0 0 var(--space-sm);
}

.section__header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.section__link {
  font: var(--font-label-cta);
  color: var(--color-primary);
  text-decoration: none;
}

.section__note {
  margin-top: var(--space-md);
  font: var(--font-body-sm);
  opacity: 0.8;
}

.geo-answer {
  font: var(--font-body-sm);
  opacity: 0.9;
  max-width: 60ch;
  margin-top: var(--space-md);
}

/* Hero front — layout lives in components.css */
.hero__skyline-svg {
  width: 100%;
  height: auto;
}

/* What I do */
.section--what-i-do {
  background: var(--color-background);
}

.what-i-do__grid {
  display: grid;
  gap: var(--space-md);
  align-items: stretch;
}

@media (min-width: 768px) {
  .what-i-do__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-soft);
  overflow: hidden;
}

.service-card__visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-container);
}

.service-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

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

.service-card__title {
  font: var(--font-headline-card);
  margin: 0 0 0.5em;
}

.service-card__body p {
  margin: 0;
  font: var(--font-body-md);
  color: var(--color-on-background);
}

/* Blog latest */
.section--blog-latest {
  background: var(--color-background);
}

.blog-latest__grid,
.blog-archive__grid {
  display: grid;
  gap: var(--space-md);
  align-items: stretch;
}

@media (min-width: 600px) {
  .blog-latest__grid,
  .blog-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .blog-latest__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.blog-card__label,
.blog-card__rubric {
  display: inline-block;
  font: var(--font-label-nav);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 0.25em;
}

.blog-card__date {
  display: block;
  font: var(--font-body-sm);
  opacity: 0.7;
  margin-bottom: 0.25em;
}

.blog-card__excerpt {
  font: var(--font-body-sm);
  margin: 0.5em 0 0;
}

/* Club */
.section--club {
  background: var(--color-accent-club);
  color: var(--color-on-accent-club);
}

.club__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: end;
}

@media (min-width: 900px) {
  .club__inner {
    grid-template-columns: 1fr minmax(240px, 38%);
    align-items: center;
  }
}

.club__badge {
  display: none;
}

.club__price {
  margin: 0 0 var(--space-md);
  font: var(--font-body-lg);
}

.club__price-value {
  font: var(--font-display-hero);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
}

.club__benefits {
  margin: var(--space-md) 0 var(--space-lg);
  padding-left: 0;
  list-style: none;
}

.club__benefits li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.55em;
}

.club__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--color-secondary);
}

.club__cta {
  background: var(--color-secondary);
  color: #111111;
}

.club__cta:hover {
  background: var(--color-secondary-hover);
}

.club__character {
  margin: 0;
  text-align: center;
}

.club__character-img {
  max-height: min(520px, 70vh);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Stats */
.section--stats {
  background: #ffffff;
}

.stats__disclaimer,
.stats__confirmed {
  display: none;
}

.stats__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .stat-block:not(:last-child) {
    border-right: 1px solid var(--color-outline-variant);
  }

  .stat-block {
    padding-inline: var(--space-md);
    text-align: center;
  }
}

.stat-block__value {
  font: var(--font-display-hero);
  font-size: clamp(36px, 4.5vw, 56px);
  margin: 0;
  color: var(--color-primary);
}

.stat-block__label {
  font: var(--font-label-cta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.35em 0 0;
}

.stat-block__hint {
  font: var(--font-body-sm);
  opacity: 0.7;
  margin: 0.35em 0 0;
}

/* Cooperation teaser */
.section--cooperation-teaser {
  position: relative;
  overflow: hidden;
  background: var(--color-accent-cooperation);
  color: var(--color-on-accent-cooperation);
}

.section--cooperation-teaser::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: url("../images/hero-russia-skyline-wireframe.webp") center bottom / 100% auto no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.cooperation-teaser__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .cooperation-teaser__inner {
    grid-template-columns: 1fr minmax(220px, 36%);
  }
}

.cooperation-teaser__content > p {
  max-width: 46ch;
  font: var(--font-body-lg);
}

.cooperation__icons {
  display: none;
}

.cooperation__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.cooperation__channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  text-decoration: none;
  transition: background-color 200ms var(--motion-ease), transform 200ms var(--motion-ease);
}

.cooperation__channel:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.cooperation-teaser__character {
  margin: 0;
  text-align: center;
}

.cooperation-teaser__img {
  max-height: min(480px, 68vh);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Subscribe */
.section--subscribe {
  background: var(--color-background-alt, #F0EBE3);
  text-align: center;
}

.section--subscribe .section__intro {
  margin-inline: auto;
}

.platform-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.platform-button {
  min-width: min(100%, 180px);
}

/* FAQ */
.section--faq {
  background: var(--color-background);
}

.faq-list {
  display: grid;
  gap: var(--space-sm);
  max-width: 800px;
}

.faq-item {
  background: var(--color-surface-lowest);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-card-soft);
}

.faq-item__question {
  font: var(--font-headline-card);
  cursor: pointer;
  list-style: none;
}

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

.faq-item__answer {
  padding-top: var(--space-sm);
  font: var(--font-body-md);
}

/* Cooperation page */
.cooperation-hero {
  background: var(--color-accent-cooperation);
  color: var(--color-on-accent-cooperation);
  padding-block: var(--space-section-y);
}

.cooperation-hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .cooperation-hero__inner {
    grid-template-columns: 1fr minmax(240px, 36%);
  }
}

.cooperation-hero__title {
  font: var(--font-display-hero);
  font-size: clamp(32px, 5vw, 52px);
  margin: 0 0 var(--space-sm);
}

.formats-grid {
  display: grid;
  gap: var(--space-md);
}

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

.formats-section__header {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .formats-section__header {
    grid-template-columns: 1fr minmax(200px, 280px);
    align-items: center;
  }
}

.formats-section__img {
  max-height: 220px;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

.format-card {
  background: var(--color-surface-lowest);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-soft);
}

.lead-form-section {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .lead-form-section {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.lead-form-section__form,
.contact-form {
  background: var(--color-surface-lowest);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-soft);
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font: var(--font-label-nav);
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-sm);
  font: var(--font-body-md);
  font-family: inherit;
}

.form-field--honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.form-field--checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-field--checkbox input {
  margin-top: 4px;
}

.required {
  color: var(--color-error);
}

/* About page */
.about-hero {
  background: var(--color-background);
}

.about-hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .about-hero__inner {
    grid-template-columns: minmax(260px, 40%) 1fr;
  }
}

.about-hero__img {
  border-radius: var(--radius-lg);
  max-height: 520px;
  width: 100%;
  object-fit: cover;
}

.inspiration-block {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .inspiration-block {
    grid-template-columns: minmax(200px, 280px) 1fr;
  }
}

.inspiration-block__img {
  max-height: 320px;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--color-primary);
}

.timeline__step {
  padding: 0 0 var(--space-lg) var(--space-md);
  position: relative;
}

.timeline__step::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.platforms-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
  .platforms-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.platform-link-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-sm);
  background: var(--color-surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-soft);
  font: var(--font-label-cta);
  text-decoration: none;
  transition: transform var(--motion-duration-normal) var(--motion-ease);
}

.platform-link-card:hover {
  transform: translateY(-2px);
}

/* Contacts */
.contact-hero {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.contact-cards {
  display: grid;
  gap: var(--space-md);
}

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

.contact-card {
  background: var(--color-surface-lowest);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-soft);
  border: 1px solid var(--color-outline-variant);
  transition: border-color var(--motion-duration-normal) var(--motion-ease);
}

.contact-card:hover {
  border-color: var(--color-primary);
}

.contact-card__label {
  font: var(--font-label-nav);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin: 0 0 var(--space-sm);
}

.contact-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

/* Blog archive */
.section--blog-archive-hero {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.blog-archive__title {
  font: var(--font-display-hero);
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 var(--space-sm);
}

.blog-rubric-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}

.rubric-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.15);
  font: var(--font-label-nav);
  font-size: 12px;
}

.prose h2 {
  font: var(--font-headline-section);
  font-size: clamp(24px, 3vw, 32px);
}

.prose p,
.prose li {
  font: var(--font-body-md);
}

.process-steps {
  padding-left: 1.25em;
}

.process-steps li {
  margin-bottom: var(--space-sm);
}