/* ==========================================================================
   Viola — Home page
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-7);
  /* DS: flat surfaces only — the cream page shows through, no gradients */
}

.hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-5);
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.hero__title {
  /* was var(--fs-display) (max 4.5rem): trimmed so the second line
     «کافه‌های تهران تست کن» never wraps its last word alone — verified to
     fit at 375 / 900 / 1024 / desktop (client orphan-word fix 2026-07-15) */
  font-size: clamp(2.25rem, 5.3vw, 4rem);
  line-height: 1.3;
}

/* Title is brand purple (base.css); the accent pops via the decorative
   B Koodak Outline cut — DS-sanctioned large Farsi display use */
.hero__title .accent {
  font-family: var(--font-fa-outline);
}

.hero__title .font-en {
  font-size: 0.9em;
}

.hero__lead {
  margin-block-start: var(--space-3);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .hero__lead {
    margin-inline: auto;
  }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

@media (max-width: 860px) {
  .hero__ctas {
    justify-content: center;
  }
}

/* Fact strip under the CTAs — real, checkable claims, not vanity numbers */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 2px dashed var(--color-brand-tint);
}

@media (max-width: 860px) {
  .hero__facts {
    justify-content: center;
  }
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.hero__fact svg {
  color: var(--color-brand-primary);
  flex: none;
}

/* ---- Hero art: just the waving cookie, nothing else.
   2026-07-09: PNG rig replaced by the client-approved Cookie Wave inline SVG
   (css/components.css → .cookie-wave, pure CSS 4s loop, no JS driver); it
   carries the whole scene on the bare cream page. ---- */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 380px;
}

.hero__art .cookie-wave {
  inline-size: min(440px, 92%);
}

@media (max-width: 860px) {
  .hero__art {
    min-block-size: 300px;
  }

  .hero__art .cookie-wave {
    inline-size: min(360px, 84%);
  }
}

/* ---- Croissant parachutist (scroll-driven descent, right gutter) ----
   2026-07-08 (client): moved from the left gutter to the right one. */
.parachutist {
  position: fixed;
  inset-block-start: 0;
  /* centered in the gutter right of the 1180px container */
  right: calc((100vw - var(--container-max)) / 2 - 168px);
  inline-size: 150px;
  z-index: 60;
  pointer-events: none;
  transition: transform 0.7s var(--ease-brand);
  will-change: transform;
}

.parachutist img {
  inline-size: 100%;
  transform-origin: 50% 6%;
  animation: para-sway 5.5s ease-in-out infinite;
}

.parachutist.is-landed img {
  animation: para-land 0.7s var(--ease-bounce) both;
}

/* para-sway / para-land keyframes are shared component motion —
   they live in css/components.css (shipped with the design system) */

/* no gutter, no parachutist */
@media (max-width: 1349px) {
  .parachutist {
    display: none;
  }
}

/* ---- About teaser strip ---- */
.about-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 860px) {
  .about-teaser {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.about-teaser h2 {
  font-size: var(--fs-2xl);
  line-height: 1.4;
}

.about-teaser__cta {
  margin-block-start: var(--space-4);
}

/* Art column: the home-about.png promo banner (mascot fallback removed
   2026-07-14 — client: characters no longer needed under the banner) */
.about-teaser__art {
  display: block;
}

/* ---- Contact CTA banner ---- */
.contact-banner {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-6);
  text-align: center;
}

.contact-banner h2 {
  position: relative;
  font-size: var(--fs-2xl);
  line-height: 1.4;
  /* headings default to brand purple now — stay white on the purple banner */
  color: var(--color-text-inverse);
}

.contact-banner p {
  position: relative;
  margin-block-start: var(--space-2);
  opacity: 0.92;
  max-width: 52ch;
  margin-inline: auto;
}

.contact-banner .btn {
  position: relative;
  margin-block-start: var(--space-4);
}

/* Mascot peeking over the banner's top edge */
.contact-banner__peek {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 7%;
  inline-size: 110px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transform: translateY(-18%) rotate(6deg);
}

@media (max-width: 640px) {
  .contact-banner__peek {
    inline-size: 76px;
    inset-inline-end: 4%;
  }
}