/* ──────────────────────────────────────────────
   EVENTS.CSS — Styles for the /events/ page (Arokya Payanam 2026)
   Loaded AFTER ../css/styles.css, so it reuses the "Forest Calm"
   colour variables, buttons, container and floating buttons.
   Mobile-first: base styles are for phones, min-width queries
   enhance for tablet/desktop.

   TABLE OF CONTENTS:
   1. Header + sub-navigation
   2. Hero
   3. Generic section helpers
   4. Registration (status + disabled button state)
   5. About + objectives + stats
   6. Audience
   7. Agenda timeline
   8. Competitions
   9. Organisers
   10. Footer
   ────────────────────────────────────────────── */


/* ──────────────────────────────────────────────
   1. HEADER + SUB-NAVIGATION
   A simple solid white header (the homepage's transparent
   header only makes sense on top of the hero video).
   The section links sit in a second row that scrolls
   sideways on small screens.
   ────────────────────────────────────────────── */
body.events-page {
  padding-top: 112px; /* space for the fixed header + sub-nav on mobile */
}

.ev-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-white);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.ev-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.ev-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ev-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.ev-logo span {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Language toggle — recoloured for the white header */
.ev-header .lang-toggle {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  min-height: 36px;
}

.ev-header .lang-toggle:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.ev-home-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 6px 4px;
}

.ev-home-link:hover {
  color: var(--color-secondary);
}

/* Sub-navigation row */
.ev-subnav {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ev-subnav::-webkit-scrollbar {
  display: none;
}

.ev-subnav ul {
  display: flex;
  gap: 4px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  width: max-content;
  min-width: 100%;
}

.ev-subnav a {
  display: block;
  padding: 11px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.ev-subnav a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* Anchored sections shouldn't hide behind the fixed header */
.ev-section,
#event-top {
  scroll-margin-top: 110px;
}

@media (min-width: 768px) {
  body.events-page { padding-top: 118px; }
  .ev-header-top { padding: 12px 20px; }
  .ev-logo img { width: 44px; height: 44px; }
  .ev-logo span { font-size: 1.05rem; }
  .ev-subnav ul { padding: 0 20px; gap: 12px; }
  .ev-subnav a { font-size: 0.9rem; }
  .ev-section, #event-top { scroll-margin-top: 120px; }
}


/* ──────────────────────────────────────────────
   2. HERO
   ────────────────────────────────────────────── */
.ev-hero {
  background: linear-gradient(135deg, #2D5A3D 0%, #3a7a52 45%, #5B8C5A 100%);
  color: var(--color-white);
  padding: 48px 0 56px;
  text-align: center;
}

/* Event logo lockup — white rounded card behind the artwork so it
   reads cleanly against the dark green gradient hero. Centered, and
   sized big on all screens per the official design, scaling down
   gracefully on narrow phones. */
.ev-hero-logo {
  max-width: 320px;
  margin: 0 auto 24px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ev-hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.ev-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.ev-hero h1 {
  color: var(--color-white);
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.ev-tagline {
  color: var(--color-light-green);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 28px;
}

/* Date / time / venue / theme cards */
.ev-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: left;
}

.ev-fact {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 14px 18px;
}

.ev-fact dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-light-green);
  margin-bottom: 2px;
}

.ev-fact dd {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-white);
}

.ev-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.ev-hero .ev-reg-btn.is-disabled {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .ev-hero { padding: 72px 0 80px; }
  .ev-hero-logo { max-width: 440px; padding: 24px; margin-bottom: 32px; }
  .ev-hero h1 { font-size: 3.2rem; }
  .ev-tagline { font-size: 1.3rem; }
  .ev-facts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/* ──────────────────────────────────────────────
   3. GENERIC SECTION HELPERS
   ────────────────────────────────────────────── */
.ev-section {
  padding: 48px 0;
}

.ev-section.alt { background-color: var(--color-white); }
.ev-section.green { background-color: var(--color-light-green); }

.ev-section h2 {
  font-size: 1.8rem;
}

@media (min-width: 768px) {
  .ev-section { padding: 72px 0; }
  .ev-section h2 { font-size: 2.25rem; }
}


/* ──────────────────────────────────────────────
   4. REGISTRATION
   `.is-disabled` is added by js/event-config.js while no
   Razorpay link is set. It looks inactive and ignores clicks.
   ────────────────────────────────────────────── */
.ev-register-card {
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.ev-status-pill {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.ev-register-card h2 {
  margin-bottom: 12px;
}

.ev-register-card p {
  color: var(--color-light-text);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.ev-reg-btn.is-disabled {
  background-color: #b9c4b9;
  color: var(--color-white);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.ev-reg-btn {
  min-height: 48px;
}

.ev-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  margin-top: 18px;
  font-size: 0.9rem;
}

.ev-contact-row a {
  color: var(--color-primary);
  font-weight: 600;
  padding: 6px 2px;
}

.ev-contact-row a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}


/* ──────────────────────────────────────────────
   5. ABOUT + OBJECTIVES + STATS
   ────────────────────────────────────────────── */
.ev-about-text {
  max-width: 800px;
  margin: 0 auto 36px;
  text-align: center;
}

.ev-about-text p {
  font-size: 1rem;
  color: var(--color-dark-text);
}

.ev-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.ev-stat {
  background-color: var(--color-background);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
}

.ev-stat strong {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-primary);
}

.ev-stat span {
  font-size: 0.85rem;
  color: var(--color-light-text);
}

.ev-subheading {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 20px;
}

.ev-objectives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.ev-objectives li {
  position: relative;
  background-color: var(--color-background);
  border-radius: 10px;
  padding: 14px 16px 14px 46px;
  font-size: 0.95rem;
}

.ev-objectives li::before {
  content: '✓';
  position: absolute;
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ev-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ev-objectives { grid-template-columns: repeat(2, 1fr); }
}


/* ──────────────────────────────────────────────
   6. AUDIENCE
   ────────────────────────────────────────────── */
.ev-audience-sub {
  max-width: 700px;
  margin: 0 auto 32px;
  text-align: center;
  color: var(--color-dark-text);
}

.ev-audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.ev-audience-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-audience-card strong {
  display: block;
  font-size: 2rem;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 6px;
}

.ev-audience-card span {
  font-size: 0.9rem;
  color: var(--color-dark-text);
}

.ev-public-card {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}

.ev-public-card h3 {
  color: var(--color-white);
  margin-bottom: 8px;
}

.ev-public-card p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.ev-footfall {
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
  margin: 20px 0 0;
}

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


/* ──────────────────────────────────────────────
   7. AGENDA TIMELINE
   Each row = time + programme. Speaker sessions are
   highlighted; breaks are muted and italic.
   ────────────────────────────────────────────── */
.ev-agenda-note {
  max-width: 700px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--color-light-text);
  font-size: 0.95rem;
}

.ev-agenda {
  max-width: 820px;
  margin: 0 auto;
  border-left: 3px solid var(--color-light-green);
  padding-left: 0;
}

.ev-agenda-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 12px 22px;
  margin-bottom: 8px;
  background-color: var(--color-white);
  border-radius: 0 10px 10px 0;
}

.ev-agenda-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 18px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary);
}

.ev-agenda-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-secondary);
  white-space: nowrap;
}

.ev-agenda-title {
  font-size: 0.98rem;
  color: var(--color-dark-text);
}

.ev-agenda-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}

.ev-agenda-item.session {
  background-color: var(--color-primary);
}

.ev-agenda-item.session::before {
  background-color: var(--color-primary);
  border-color: var(--color-light-green);
}

.ev-agenda-item.session .ev-agenda-time,
.ev-agenda-item.session .ev-agenda-tag {
  color: var(--color-light-green);
}

.ev-agenda-item.session .ev-agenda-title {
  color: var(--color-white);
  font-weight: 600;
}

.ev-agenda-item.break {
  background-color: transparent;
  border: 1px dashed var(--color-light-text);
  border-left: none;
}

.ev-agenda-item.break .ev-agenda-title {
  font-style: italic;
  color: var(--color-light-text);
}

@media (min-width: 640px) {
  .ev-agenda-item {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }
  .ev-agenda-time { flex: 0 0 190px; }
}


/* ──────────────────────────────────────────────
   8. COMPETITIONS
   ────────────────────────────────────────────── */
.ev-comp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0;
}

.ev-comp-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-comp-card .ev-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: var(--color-background);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-comp-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.ev-comp-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ev-info-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
}

.ev-info-card h3 {
  margin-bottom: 12px;
}

.ev-info-card ul {
  list-style: disc;
  padding-left: 20px;
}

.ev-info-card li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 300;
}

.ev-info-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

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


/* ──────────────────────────────────────────────
   9. ORGANISERS
   ────────────────────────────────────────────── */

/* Combined logo strip (INYGMA, AR Group, SKT Nature Cure, Owl I) in a
   white card so it separates cleanly from the cream section background.
   Image is wide/short — cap the width and let height scale with it. */
.ev-org-logos {
  max-width: 480px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-org-logos img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .ev-org-logos { max-width: 650px; padding: 28px 32px; }
}

.ev-org-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 900px;
  margin: 24px auto 0;
}

.ev-org-list li {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-green);
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-align: center;
}


/* ──────────────────────────────────────────────
   10. FOOTER
   ────────────────────────────────────────────── */
.ev-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0;
  text-align: center;
}

.ev-footer p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.ev-footer a {
  color: var(--color-white);
  text-decoration: underline;
}

/* Floating buttons — 48px on phones like the homepage */
@media (max-width: 767px) {
  .floating-buttons { bottom: 20px; right: 16px; }
  .fab { width: 48px; height: 48px; }
}