/* ==========================================================================
   Event pages — additions on top of Events/walkStyles.css
   (meta chips, countdown, state banners, CTA modal). Used by Events/theWalkthrough.html
   and by the admin live preview.
   ========================================================================== */
.ev-meta { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; margin-bottom: 1.25rem; }
.ev-chip {
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px;
    background: rgba(107, 142, 35, .10); border: 1px solid rgba(107, 142, 35, .35); color: #556B2F;
    font-size: .875rem; font-weight: 600;
}
.ev-pill { padding: .4rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ev-pill--up { background: #6B8E23; color: #fff; }
.ev-pill--live { background: #DAA520; color: #1f2933; }
.ev-pill--past { background: #2C3E50; color: #fff; }

.ev-countdown { display: flex; justify-content: center; gap: .75rem; margin: 0 auto 1.75rem; }
.ev-countdown div {
    min-width: 72px; padding: .7rem .5rem; border-radius: 16px; text-align: center;
    background: #fff; border: 1px solid rgba(107, 142, 35, .25); color: #2C3E50; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.ev-countdown b { display: block; font: 700 1.6rem/1 var(--pu-font-display, 'Poppins', sans-serif); font-variant-numeric: tabular-nums; }
.ev-countdown span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

.ev-closed { display: inline-block; padding: .9rem 1.6rem; border-radius: 14px; background: #2C3E50; color: #fff; font-weight: 600; }

.ev-state {
    max-width: 760px; margin: 0 auto; padding: 8.5rem 1.25rem 5rem; text-align: center;
}
.ev-state h1 { margin-bottom: .75rem; }
.ev-state p { color: #52606d; margin-bottom: 1.5rem; }
.ev-past-banner {
    position: relative; z-index: 2; margin: 0; padding: .75rem 1rem; text-align: center; font-weight: 600;
    background: #2C3E50; color: #fff; font-size: .9rem;
}
.ev-past-banner a { color: #FFFACD; }

.ev-more { padding: 3.5rem 0 4.5rem; background: #F5F1E8; }
.ev-more h2 { text-align: center; margin-bottom: 1.5rem; }
.ev-more-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ev-more a {
    display: block; padding: 1.25rem 1.4rem; border-radius: 18px; background: #fff; color: #2C3E50; text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08); transition: transform .3s, box-shadow .3s;
}
.ev-more a:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, .14); }
.ev-more small { display: block; color: #6B8E23; font-weight: 600; margin-bottom: .25rem; }
.ev-more strong { display: block; font-family: var(--pu-font-display, 'Poppins', sans-serif); font-size: 1.15rem; }

.ev-skeleton { min-height: 70vh; display: grid; place-items: center; color: #6B8E23; font-weight: 600; }
.ev-skeleton::after {
    content: ""; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(107, 142, 35, .25);
    border-top-color: #6B8E23; animation: evspin .9s linear infinite; margin-top: 1rem;
}
@keyframes evspin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .ev-countdown div { min-width: 62px; } .ev-countdown b { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .ev-skeleton::after { animation: none; } }

/* ---- two-step registration modal ---- */
.cta-modal[hidden] { display: none !important; }
.cta-modal {
      position: fixed; z-index: 99999; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(30,32,38,0.32); transition: background 0.3s;
    }
    .cta-modal-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: transparent; }
    .cta-modal-card {
      position: relative;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
      max-width: 95vw;
      width: 400px;
      padding: 2.5rem 2rem 2rem 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: ctaModalIn 0.4s cubic-bezier(.4,0,.2,1);
    }
    @keyframes ctaModalIn { from { transform: translateY(40px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
    .cta-modal-close {
      position: absolute; top: 18px; right: 18px; background: none; border: none; font-size: 2rem; color: #888; cursor: pointer; transition: color 0.2s; z-index: 2;
    }
    .cta-modal-close:hover { color: #222; }
    .cta-modal-steps { width: 100%; }
    .cta-step { display: none; flex-direction: column; align-items: center; text-align: center; animation: fadeInStep 0.4s; }
    .cta-step.active { display: flex; }
    @keyframes fadeInStep { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none; } }
    .cta-step-number {
      width: 44px; height: 44px; background: linear-gradient(135deg, #667eea 0%, #715b86 100%); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(102,126,234,0.12);
    }
    .cta-step-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: #3a3a3a; }
    .cta-step-content p { font-size: 1rem; color: #555; margin-bottom: 1.5rem; }
    .cta-modal-action {
      display: inline-block; width: 100%; padding: 0.9rem 0; border-radius: 12px; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; margin-bottom: 1.1rem; transition: background 0.2s, color 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(102,126,234,0.08);
    }
    .cta-modal-action-main {
      background: linear-gradient(90deg, #667eea 0%, #715b86 100%); color: #fff;
    }
    .cta-modal-action-main:hover, .cta-modal-action-main:focus {
      background: linear-gradient(90deg, #715b86 0%, #667eea 100%); color: #fff; box-shadow: 0 4px 16px rgba(102,126,234,0.16);
    }
    .cta-modal-next {
      background: #f7efa8; color: #715b86; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; padding: 0.7rem 1.5rem; cursor: pointer; margin-bottom: 0.5rem; transition: background 0.2s, color 0.2s;
    }
    .cta-modal-next:hover, .cta-modal-next:focus { background: #f4eca6; color: #4f46e5; }
    .cta-modal-action-whatsapp {
      background: #25d366; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.7em; font-size: 1.1rem;
    }
    .cta-modal-action-whatsapp:hover, .cta-modal-action-whatsapp:focus { background: #1ebea5; color: #fff; }
    .cta-wa-icon { font-size: 1.4em; }
    .cta-modal-success { margin-top: 1.2rem; color: #4f46e5; font-weight: 600; font-size: 1.05rem; display: none; }
    .cta-step-2 .cta-modal-success { display: block; }
    .cta-modal-progress { display: flex; justify-content: center; gap: 0.5em; margin-top: 1.5em; }
    .cta-modal-progress-dot { width: 12px; height: 12px; border-radius: 50%; background: #e0e0e0; transition: background 0.3s; }
    .cta-modal-progress-dot.active { background: linear-gradient(135deg, #667eea 0%, #715b86 100%); }
    @media (max-width: 600px) {
      .cta-modal-card { width: 98vw; padding: 1.2rem 0.5rem 1.5rem 0.5rem; }
      .cta-step-content h3 { font-size: 1.1rem; }
      .cta-modal-action, .cta-modal-next { font-size: 1rem; }
    }
    

/* Coach profile text on mentor cards (from the admin Coaches roster) */
.mentor-bio { margin: .5rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--text-muted, #5f6b6e); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mentor-link { display: inline-block; margin-top: .5rem; font-size: 1.25rem; color: #6b7a3a; }
.mentor-link:hover { color: #2d3436; }

/* ---- Responsive polish (phones, tablets, small laptops) ---- */
@media (max-width: 900px) {
    .schedule-grid { grid-template-columns: 1fr; gap: 28px; }
    .schedule-section { padding: 56px 0; }
    .schedule-visual { padding: 28px; }
    .mentor-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 150px 0 64px; }
    .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .hero p { font-size: 1rem; }
    .carousel-slide { padding: 36px 64px; }
    .carousel-arrow { width: 40px; height: 40px; }
    .carousel-arrow.prev { left: 8px; }
    .carousel-arrow.next { right: 8px; }
}
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .carousel-slide { padding: 30px 54px; }
    .carousel-slide h3 { font-size: 1.25rem; }
    .carousel-slide p { font-size: .95rem; line-height: 1.65; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .schedule-grid { gap: 32px; }
}

.live-sessions { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.live-sessions li { background: rgba(252, 244, 173, .35); border-left: 3px solid #f4c430; border-radius: 8px; padding: .4rem .75rem; font-size: .92rem; }
.live-sessions small { opacity: .8; }