/* ==========================================================================
   event.css — сторінка Event Hair & Makeup Services
   Десктоп: node 678:17095 (1440px) · Мобайл: node 784:5645 (393px)
   Базується на bridal.css; тут лише те, чим Event відрізняється.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ПАКЕТИ — 3 картки в ряд, фото 470px (у Bridal 384),
   крок «Includes» 8px (у Bridal 10)
   -------------------------------------------------------------------------- */
.page-event .pkg__media img {
  aspect-ratio: 436 / 470;
}

.page-event .pkg__includes {
  gap: var(--space-3xs); /* 8px */
}

/* Секція пакетів на бежевому. У макеті так було лише на мобільному, на
   десктопі — айворі; на вимогу клієнта колір однаковий на всіх ширинах.
   --color-beige — це і є #E2D8C9. */
/* Колір секції — у базовому правилі (bridal.css), тут лише відступ:
   орнамент прибитий до верху секції відео, тож підняти його можна лише
   скоротивши порожню смугу під картками — було 120px (--space-xl). */
.page-event .packages {
  padding-bottom: 4rem; /* 64px */
}

/* заголовок «FIND THE PERFECT LOOK FOR YOUR NEXT EVENT» — 2 рядки через <br> */
.page-event .packages__title {
  max-width: none;
}

/* H1 у макеті 644px (у Bridal 665) */
.page-event .bridal-hero__title,
.page-event .bridal-hero__content {
  max-width: 40.25rem; /* 644px */
}

/* --------------------------------------------------------------------------
   CTA — 1440×1000 (у Bridal 1359), коротка форма
   Панель 733×1000, Form на (38, 173), крок 32, поля крок 16
   -------------------------------------------------------------------------- */
/* Висоту CTA задає її вміст: макетні 1000px лишали під формою порожню смугу.
   Мобільний min-height (929px) нижче не чіпаємо — там він тримає кадр. */
.cta--event .cta__title {
  max-width: 20.6875rem; /* 331px */
}

.cta--event .form {
  gap: 1rem; /* 16px між полями */
  margin-top: 2rem; /* 32px від заголовка */
}

.cta--event .form__row {
  gap: 1rem 0.75rem;
}

.cta--event .cta__submit {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   BREAKPOINT ≥ 75em — точні значення макета 1440px
   -------------------------------------------------------------------------- */
@media (min-width: 75em) {
  /* Form на (38, 173); ширина 655 → праве поле 733 − 38 − 655 = 40 */
  .cta--event .cta__panel {
    padding: 10.8125rem 2.5rem 6.25rem 2.375rem;
  }

  /* Абзац під роликами притиснутий до низу колонки.
     У макеті заголовок і текст на цій сторінці загорнуті в .video__intro,
     тож обидва лягали в перший рядок сітки і трималися вгорі (на Bridal
     вони окремі елементи сітки: 1/1 і 3/1, тому текст там і так унизу).
     Розтягуємо обгортку на всі три рядки і розводимо вміст по краях. */
  .page-event .video__intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-area: 1 / 1 / 4 / 2;
    align-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   МОБАЙЛ
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* На Event Beauty модель у кадрі знизу, тому текст героя стоїть угорі:
     Title на y=94, а не 383 як на Bridal. Низ 74px спільний із Bridal. */
  .page-event .bridal-hero__container {
    padding-block: 5.875rem 4.625rem; /* 94px / 74px */
  }

  /* Кадр 758×765 стоїть на x=−365 і віддзеркалений (Figma-flip запечено
     у файл), тож у вікні 393px видно його праву частину. */
  .page-event .bridal-hero__bg img {
    object-position: right center;
  }

  /* фото картки 382px при ширині 361, у двох нижніх — 383 */
  .page-event .pkg__media img {
    aspect-ratio: 361 / 382;
  }

  .page-event .pkg:nth-child(n + 2) .pkg__media img {
    aspect-ratio: 361 / 383;
  }

  /* CTA 393×929, контент на (16, 70), крок 42; форма — крок 24 */
  .cta--event {
    min-height: 58.0625rem; /* 929px */
  }

  .cta--event .cta__panel {
    padding: 4.375rem var(--gutter);
  }

  .cta--event .form {
    gap: 1.5rem; /* 24px */
    margin-top: 2.625rem; /* 42px */
  }

  .cta--event .form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  /* у мобільному макеті поля «Which service do you need?» немає */
  .page-event .cta--event .field--service {
    display: none;
  }

  /* textarea тут 110px, а не 88 як на решті мобільних сторінок */
  .page-event .cta--event .field__control--area {
    height: 6.875rem;
    min-height: 6.875rem;
  }

  /* від форми до кнопки 42px: 24 від gap форми + 18 */
  .cta--event .cta__submit {
    margin-top: 1.125rem;
  }
}