/* Global design tokens — Figma/Webflow variables */
/* Import this file once at the app entry point (index.css or index.js) */
/* All component CSS files can reference these variables freely */

:host {
  /* Colors */
  --text-color-primary: #252525;
  --text-color-secondary: #666666;
  --text-color-link1: #d5332a;
  --text-color-link2: #23327b;
  --text-color-white: #ffffff;
  --background-color-white: #ffffff;
  --background-color-gray-light: #f5f5f5;
  --background-color-red: #d5332a;
  --background-color-navy-dark: #16223b;
  --border-color-gray-light: #c4c4c4;
  --border-color-red: #d5332a;
  --border-color-brown: #847c79;
  --border-color-navy: #23327b;

  /* Typography — Families */
  --font-family-body-primary: 'Lato', sans-serif;
  --font-family-body-secondary: 'Merriweather', serif;
  --font-family-heading: 'Playfair Display', serif;

  /* Typography — Sizes */
  --text-size-tiny: 11px;
  --text-size-small: 12px;
  --text-size-normal: 14px;
  --text-size-large: 19px;
  --heading-style-h4: 25px;
  --heading-style-h6: 15px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-xbold: 800;

  /* Typography — Line heights */
  --line-height-tiny: 16px;
  --line-height-small: 18px;
  --line-height-normal: 21px;
  --line-height-large: 40px;
  --line-height-h4: 39px;

  /* Typography — Letter spacing */
  --letter-spacing-medium: 2px;

  /* Spacing */
  --space-tiny: 2px;
  --space-xxxsmall: 4px;
  --space-xxsmall: 8px;
  --space-xsmall: 16px;
  --space-small: 20px;
  --space-medium: 24px;
  --space-large: 32px;
  --padding-section-large: 96px;
  --padding-global: 144px;

  /* Container widths */
  --container-large: 1440px;
  --container-medium: 960px;
  --container-xxsmall: 273px;
}

/* Responsive token overrides */
@media (max-width: 767px) {
  :host {
    --padding-global: 16px;
    --padding-section-large: 48px;
  }
}

/* EventsListing component styles */

/* Root layout */
.events-listing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-family-body-primary);
}

/* Title with decorative lines */
.events-listing-title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-medium);
  margin-bottom: var(--space-large);
}

.events-listing-title-line {
  flex: 1;
  height: 1px;
  background-color: var(--border-color-gray-light);
}

.events-listing-title {
  font-family: var(--font-family-heading);
  font-size: var(--heading-style-h4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-h4);
  color: var(--text-color-primary);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* Content area — constrains tabs + cards to narrower width */
.events-content {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Tab navigation */
.events-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-large);
  margin-bottom: var(--space-large);
  border-bottom: 1px solid var(--border-color-gray-light);
  padding-bottom: 0;
}

.events-tab {
  position: relative;
  padding: var(--space-xsmall) var(--space-xxsmall);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-color-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.events-tab:hover {
  color: var(--text-color-primary);
}

.events-tab--active {
  color: var(--text-color-primary);
  font-weight: var(--font-weight-xbold);
}

.events-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--text-color-link1);
}

/* Event cards container */
.events-listing-cards {
  display: flex;
  flex-direction: column;
}

/* Event Card — CSS Grid layout matching Webflow */
.event-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-large);
  align-items: start;
  padding: var(--space-large) 0;
  border-bottom: 1px solid var(--border-color-gray-light);
}

/* Image column — square 1:1 aspect ratio */
.event-card-image {
  width: 100%;
}

.event-card-aspect-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
}

.event-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card-img-placeholder {
  background-color: var(--background-color-gray-light);
}

/* Content column */
.event-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
  min-width: 0;
}

/* Date/time/venue row */
.event-card-top-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxsmall);
}

.event-card-date {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-xbold);
  line-height: var(--line-height-small);
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.event-card-separator {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-small);
  line-height: var(--line-height-small);
  color: var(--text-color-secondary);
}

.event-card-time-venue {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  color: var(--text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Title and description */
.event-card-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
}

.event-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--text-size-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-large);
  color: var(--text-color-primary);
  margin: 0;
}

.event-card-description {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  color: var(--text-color-secondary);
  margin: 0;
}

/* Button — outlined red */
.event-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxsmall) var(--space-xsmall);
  border: 2px solid var(--border-color-red);
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--space-xsmall);
  align-self: flex-start;
  transition: background-color 0.15s ease;
}

.event-card-button:hover {
  background-color: rgba(213, 51, 42, 0.05);
}

.event-card-button-label {
  font-family: var(--font-family-body-primary);
  font-size: var(--text-size-normal);
  font-weight: var(--font-weight-xbold);
  line-height: var(--line-height-normal);
  color: var(--text-color-link1);
  text-transform: uppercase;
}

/* Responsive — Mobile */
@media (max-width: 767px) {
  .events-tabs {
    gap: var(--space-medium);
  }

  .event-card {
    grid-template-columns: 1fr;
    gap: var(--space-medium);
  }

  .event-card-title {
    font-size: var(--text-size-normal);
    line-height: var(--line-height-normal);
  }
}