/* kl-events.css | KL Events plugin — frontend styles */
/* Design tokens assumed available from kl-child: --navy, --mint, --orange, --yellow, --offwhite, --white, --font-serif, --font-sans, --radius, --radius-lg, --shadow, --shadow-lg */

/* ─── Listing: outer shell ────────────────────────────────────────────────── */

.kl-ev-listing {
  background: var(--offwhite, #f3f5f4);
}

/* ─── Listing: intro + promo top strip ───────────────────────────────────── */

.kl-ev-listing__top {
  background: var(--white, #fff);
  padding: 56px 0 52px;
  border-bottom: 1px solid rgba(14,57,87,0.07);
}

.kl-ev-listing__top-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
}

.kl-ev-listing__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--navy, #0e3957);
  margin: 0 0 16px;
  line-height: 1.2;
}

.kl-ev-listing__intro-text {
  font-size: 1.05rem;
  color: var(--text-mid, #5a6a7a);
  line-height: 1.75;
  margin: 0;
}

/* Promo pull-out box */
.kl-ev-listing__promo {
  background: #fdf0e0;
  border-radius: var(--radius-lg, 16px);
  padding: 32px 28px;
  text-align: center;
}

.kl-ev-listing__promo-heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.3rem;
  color: var(--navy, #0e3957);
  line-height: 1.25;
  margin: 0 0 24px;
}

.kl-ev-listing__promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ─── Listing: event grid ─────────────────────────────────────────────────── */

.kl-ev-listing .container {
  padding-top: 56px;
  padding-bottom: 80px;
}

.kl-ev-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.kl-ev-listing__empty {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-mid, #5a6a7a);
  padding: 60px 0;
}

/* ─── Event card (shared: listing + related) ──────────────────────────────── */

.kl-ev-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(var(--white, #fff), var(--white, #fff)) padding-box,
              linear-gradient(135deg, var(--orange, #EE7203) 0%, var(--yellow, #FCEE21) 50%, var(--mint, #89C9B2) 100%) border-box;
  border: 2.5px solid transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}

.kl-ev-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(14,57,87,0.16);
  color: inherit;
}

.kl-ev-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.kl-ev-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.kl-ev-card:hover .kl-ev-card__img {
  transform: scale(1.04);
}

.kl-ev-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--offwhite, #f5f6f7);
}

.kl-ev-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--navy, #0e3957);
  color: var(--white, #fff);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
}

.kl-ev-card__status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
}

.kl-ev-card__status--sold-out {
  background: #c0392b;
  color: var(--white, #fff);
}

.kl-ev-card__status--registration-closed {
  background: var(--orange, #e8700a);
  color: var(--white, #fff);
}

.kl-ev-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kl-ev-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.82rem;
  color: var(--text-mid, #5a6a7a);
  margin-bottom: 12px;
}

.kl-ev-card__date,
.kl-ev-card__location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kl-ev-card__title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.18rem;
  color: var(--navy, #0e3957);
  line-height: 1.3;
  margin: 0 0 12px;
}

.kl-ev-card__desc {
  font-size: 0.9rem;
  color: var(--text-mid, #5a6a7a);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}

.kl-ev-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--orange, #EE7203);
  color: var(--white, #fff);
  padding: 10px 22px;
  border-radius: 50px;
  margin-top: auto;
  align-self: flex-start;
  transition: background 0.15s, transform 0.15s;
}

.kl-ev-card__cta:hover {
  background: #d4650a;
  color: var(--white, #fff);
  transform: translateY(-1px);
}

/* ─── Hero (shell, layout + gradient bar handled by .page-hero in kl-global.css) ── */

.kl-ev-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

.kl-ev-hero__breadcrumb a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.15s;
}

.kl-ev-hero__breadcrumb a:hover { color: var(--mint, #89c9b2); }

/* ─── Info bar ────────────────────────────────────────────────────────────── */

.kl-ev-infobar {
  background: var(--navy, #0e3957);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.kl-ev-infobar__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.kl-ev-infobar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-right: 1px solid rgba(255,255,255,0.08);
  flex: 1 1 180px;
}

.kl-ev-infobar__icon {
  color: var(--mint, #89c9b2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.kl-ev-infobar__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kl-ev-infobar__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.kl-ev-infobar__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white, #fff);
  line-height: 1.3;
}

/* ─── Body layout ─────────────────────────────────────────────────────────── */

.kl-ev-body {
  padding: 80px 0;
  background: var(--white, #fff);
}

.kl-ev-body__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}

.kl-ev-body__subheading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--navy, #0e3957);
  line-height: 1.2;
  margin: 0 0 24px;
}

.kl-ev-body__intro {
  font-size: 1.08rem;
  color: var(--text-mid, #5a6a7a);
  line-height: 1.75;
  margin-bottom: 40px;
}

/* What's included */
.kl-ev-included {
  margin-bottom: 40px;
}

.kl-ev-included__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.2rem;
  color: var(--navy, #0e3957);
  margin: 0 0 16px;
}

/* Content comes from wp_editor — style whatever the editor outputs */
.kl-ev-included__content {
  font-size: 1rem;
  color: var(--text-dark, #1a2e3b);
  line-height: 1.6;
}

.kl-ev-included__content p {
  margin: 0 0 10px;
}

.kl-ev-included__content ul,
.kl-ev-included__content ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kl-ev-included__content ul li,
.kl-ev-included__content ol li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

/* Tick icon via CSS — replaces the old inline SVGs */
.kl-ev-included__content ul li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--mint, #89c9b2);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3957' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

.kl-ev-included__content strong { font-weight: 700; color: var(--navy, #0e3957); }
.kl-ev-included__content a { color: var(--orange, #e8700a); text-decoration: underline; }

/* PDF download */
.kl-ev-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--offwhite, #f5f6f7);
  border-radius: var(--radius, 10px);
  border: 1px solid rgba(14,57,87,0.10);
  color: var(--navy, #0e3957);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  margin-bottom: 40px;
  transition: background 0.15s, border-color 0.15s;
}

.kl-ev-pdf-link:hover {
  background: var(--mint, #89c9b2);
  border-color: var(--mint, #89c9b2);
  color: var(--navy, #0e3957);
}

.kl-ev-pdf-link__icon { flex-shrink: 0; }
.kl-ev-pdf-link span { flex: 1; }
.kl-ev-pdf-link__arrow { flex-shrink: 0; opacity: 0.5; }

/* Sponsors */
.kl-ev-sponsors {
  margin-bottom: 40px;
}

.kl-ev-sponsors__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid, #5a6a7a);
  margin-bottom: 16px;
}

.kl-ev-sponsors__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.kl-ev-sponsors__logo {
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s, opacity 0.2s;
}

.kl-ev-sponsors__logo:hover {
  filter: none;
  opacity: 1;
}

/* CTA pull-out box */
.kl-ev-cta-box {
  background: var(--navy, #0e3957);
  border-radius: var(--radius-lg, 16px);
  padding: 32px;
  margin-bottom: 48px;
}

.kl-ev-cta-box__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.3rem;
  color: var(--white, #fff);
  margin: 0 0 16px;
}

.kl-ev-cta-box__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0 0 10px;
}

.kl-ev-cta-box__item svg {
  color: var(--mint, #89c9b2);
  flex-shrink: 0;
  margin-top: 2px;
}

.kl-ev-cta-box__btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Form embed */
.kl-ev-form {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--offwhite, #f5f6f7);
}

.kl-ev-form__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--navy, #0e3957);
  margin: 0 0 32px;
}

.kl-ev-form__embed iframe {
  width: 100%;
  border: none;
}

/* Social share */
.kl-ev-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--offwhite, #f5f6f7);
  flex-wrap: wrap;
}

.kl-ev-share__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-mid, #5a6a7a);
}

.kl-ev-share__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kl-ev-share__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.15s, opacity 0.15s;
}

.kl-ev-share__link:hover { transform: translateY(-2px); opacity: 0.9; }

.kl-ev-share__link--facebook {
  background: #1877f2;
  color: #fff;
}

.kl-ev-share__link--instagram {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
}

.kl-ev-share__link--email {
  background: var(--offwhite, #f5f6f7);
  color: var(--navy, #0e3957);
  border: 1px solid rgba(14,57,87,0.12);
}

/* ─── Sidebar / Contact card ──────────────────────────────────────────────── */

.kl-ev-body__sidebar {
  position: sticky;
  top: 100px;
}

.kl-ev-contact {
  background: var(--offwhite, #f5f6f7);
  border-radius: var(--radius-lg, 16px);
  padding: 28px;
}

.kl-ev-contact__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.1rem;
  color: var(--navy, #0e3957);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--mint, #89c9b2);
}

.kl-ev-contact__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy, #0e3957);
  margin: 0 0 4px;
}

.kl-ev-contact__role {
  font-size: 0.85rem;
  color: var(--text-mid, #5a6a7a);
  margin: 0 0 20px;
}

.kl-ev-contact__link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy, #0e3957);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color 0.15s;
}

.kl-ev-contact__link:hover { color: var(--orange, #e8700a); }

.kl-ev-contact__link svg { flex-shrink: 0; opacity: 0.6; }

/* ─── Sidebar: Key event details — individual cards ──────────────────────── */

.kl-ev-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.kl-ev-details__card {
  background: rgba(137, 201, 178, 0.18);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 24px 22px;
}

.kl-ev-details__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy, #0e3957);
  display: block;
  margin-bottom: 6px;
}

.kl-ev-details__value {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 400;
  color: var(--navy, #0e3957);
  line-height: 1.2;
  display: block;
}

/* ─── Related events ──────────────────────────────────────────────────────── */

.kl-ev-related {
  background: var(--offwhite, #f5f6f7);
  padding: 80px 0;
}

.kl-ev-related__header {
  text-align: center;
  margin-bottom: 48px;
}

.kl-ev-related__heading {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--navy, #0e3957);
  margin: 8px 0 0;
}

.kl-ev-related__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.kl-ev-related__footer {
  text-align: center;
  margin-top: 48px;
}

/* ─── Bottom link ─────────────────────────────────────────────────────────── */

.kl-ev-bottom-link {
  background: var(--navy, #0e3957);
  padding: 32px 0;
}

.kl-ev-bottom-link__text {
  text-align: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.kl-ev-bottom-link__anchor {
  color: var(--mint, #89c9b2);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.kl-ev-bottom-link__anchor:hover { text-decoration: underline; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .kl-ev-body__layout { grid-template-columns: 1fr 280px; gap: 40px; }
}

@media (max-width: 900px) {
  .kl-ev-listing__top-layout { grid-template-columns: 1fr; gap: 28px; }
  .kl-ev-listing__promo { text-align: left; }
  .kl-ev-listing__grid { grid-template-columns: repeat(2, 1fr); }

  .kl-ev-body__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .kl-ev-body__sidebar { position: static; }
}

@media (max-width: 600px) {
  .kl-ev-listing__top { padding: 40px 0 36px; }
  .kl-ev-listing .container { padding-top: 40px; padding-bottom: 56px; }
  .kl-ev-body,
  .kl-ev-related { padding: 56px 0; }

  .kl-ev-listing__grid { grid-template-columns: 1fr; }

  .kl-ev-infobar__item { padding: 16px 20px; flex-basis: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }

  .kl-ev-related__cards { grid-template-columns: 1fr; }
}