/* pages/eventos/eventos.responsive.css
 * Media queries específicos de la página de eventos.
 * El responsive base vive en /css/main.css.
 */

/* ===========================
   Hero (grilla 2 columnas)
   =========================== */
.mf-events__hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.mf-events__hero-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.mf-events__bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2rem;
}
.mf-events__bullets li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.mf-events__bullets li span {
  color: var(--mf-amber, var(--mf-red));
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Filas del form (2 columnas en desktop) */
.mf-events__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ===========================
   Tablet (≤ 1024px)
   =========================== */
@media (max-width: 1024px) {
  .mf-events__hero {
    padding-top: 3rem !important;
  }
  .mf-events__hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .mf-events__hero-title {
    font-size: clamp(2rem, 6vw, 2.6rem);
  }

  /* "How it works": 2 columnas en tablet */
  .mf-how__steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .mf-how__steps::before { display: none; }
}

/* ===========================
   Mobile (≤ 720px)
   =========================== */
@media (max-width: 720px) {
  .mf-events__hero {
    padding-top: 2rem !important;
  }
  .mf-events__hero-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .mf-events__hero-title {
    font-size: 1.9rem;
    line-height: 1.15;
  }

  .mf-events__bullets {
    margin-top: 1.4rem;
    gap: 0.7rem;
  }
  .mf-events__bullets li {
    font-size: 13.5px;
  }

  /* Form: filas a 1 columna */
  .mf-events__form-row {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .mf-events__form {
    padding: 1.4rem 1.2rem !important;
  }
  .mf-events__form h1 {
    font-size: 1.25rem;
  }
  .mf-events__form .mf-form__sub {
    font-size: 13px;
    margin-bottom: 1rem;
  }
  .mf-events__form .mf-field input,
  .mf-events__form .mf-field select,
  .mf-events__form .mf-field textarea {
    padding: 0.65rem 0.8rem;
    font-size: 14px;
  }
  .mf-events__form .mf-btn {
    padding: 0.85rem 1rem;
    font-size: 14px;
  }

  /* "How it works": 1 columna en mobile */
  .mf-how {
    padding: 1.8rem 1rem 2rem !important;
    border-radius: 16px !important;
    margin: 1.5rem auto 2.5rem !important;
  }
  .mf-how__head { margin-bottom: 1.6rem; }
  .mf-how__title { font-size: 1.45rem !important; }
  .mf-how__lead { font-size: 13.5px; }
  .mf-how__steps {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .mf-how__step {
    padding: 1.2rem 1.1rem !important;
  }
  .mf-how__num { font-size: 1.6rem !important; margin-bottom: 0.4rem; }
  .mf-how__step-title { font-size: 1rem; }
  .mf-how__step-body { font-size: 13px; }

  .mf-how__cta { margin-top: 1.8rem; padding-top: 1.4rem; }
  .mf-how__cta > p { font-size: 0.95rem; }
  .mf-how__cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .mf-how__btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  /* Sección principal: padding lateral en mobile */
  .mf-events__hero { padding-left: 1rem; padding-right: 1rem; }

  /* Cart preview en mobile: items más compactos */
  .mf-events__cart { padding: 0.45rem; border-radius: 14px; }
  .mf-events__cart-head { padding: 0.2rem 0.4rem 0.4rem; }
  .mf-events__cart-item {
    grid-template-columns: 48px 1fr 28px;
    grid-template-areas: "media info remove" "media sub sub";
    gap: 0.4rem 0.6rem;
    padding: 0.5rem 0.4rem;
  }
  .mf-events__cart-item-media { grid-area: media; width: 48px; height: 48px; }
  .mf-events__cart-item-info { grid-area: info; }
  .mf-events__cart-item-remove { grid-area: remove; align-self: start; }
  .mf-events__cart-item-subtotal {
    grid-area: sub;
    text-align: right;
    border-top: 1px dashed var(--mf-line);
    padding-top: 0.35rem;
  }
  .mf-events__cart-empty-cta { width: 100%; justify-content: center; }
}

/* ===========================
   Muy pequeño (≤ 380px)
   =========================== */
@media (max-width: 380px) {
  .mf-events__hero-title { font-size: 1.6rem; }
  .mf-events__form { padding: 1.2rem 1rem !important; }
  .mf-how__title { font-size: 1.25rem !important; }
}