/**
 * General Schedule Component Styles
 *
 * Card-based layout for displaying events organized by day.
 * Uses shared schedule variables from schedule-shared.css.
 */

/* ===========================================
   BASE CONTAINER
   =========================================== */
.general-schedule {
  --surface-color: #fff;
  --text-color: #000;
  --text-color-secondary: #5a4080;
  --text-color-accent: #DA7321;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --font-size-small: clamp(14px, 0.8rem + 0.25vw, 16px);
  --font-size-medium: clamp(16px, 0.9rem + 0.5vw, 20px);
  --font-size-medium-large: clamp(20px, 1rem + 1.4vw, 32px);
  --font-size-large: clamp(24px, 1.25rem + 1.4vw, 36px);
  --font-base: 'Open Sans', sans-serif;
  --font-base-condensed: 'Open Sans Condensed', sans-serif;
  --border-radius: 12px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --accent-color: #5a4080;
  --all-day-color: #0f7d7c;
}

.general-schedule {
  --container-padding: var(--spacing-medium);

  width: min(100%, calc(1400px + var(--container-padding) * 2));
  margin-inline: auto;
  margin-block: var(--spacing-large);
  padding-inline: var(--container-padding);
}

/* ===========================================
   SCHEDULE HEADER
   =========================================== */
.general-schedule .schedule-header {
  margin-bottom: var(--spacing-large);
}

.general-schedule .schedule-header h3 {
  color: var(--text-color-secondary);
  margin: 0;
  font-weight: 800;
}

/* ===========================================
   DAYS CONTAINER
   =========================================== */
.general-schedule .schedule-days {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ===========================================
   DAY SECTION
   =========================================== */
.general-schedule .day-section {
  background-color: #f5f5f5;
  border-radius: var(--border-radius);
  padding-block: var(--spacing-large);
}

.general-schedule .day-header {
  font-size: var(--font-size-large);
  color: var(--text-color-secondary);
  font-weight: 700;
  font-variation-settings: "wdth" 60, "wght" 700;
  margin: 0 0 var(--spacing-medium) var(--spacing-small);
}

/* ===========================================
   EVENTS CONTAINER
   =========================================== */
.general-schedule .day-events {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* ===========================================
   EVENT CARD
   =========================================== */
.general-schedule .event-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  background-color: var(--surface-color);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (min-width: 1110px) {
  .general-schedule .event-card {
    flex-direction: row;
    /* align-items: center; */
  }
}

.general-schedule .event-card {
  --outer-radius: 35px;
  --padding: 20px;
  --inner-radius: calc(var(--outer-radius) - var(--padding));
  border-radius: var(--outer-radius);
  padding: var(--padding);
}

.general-schedule .event-card:hover {
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); */
  /* transform: translateY(-2px); */
}

/* ===========================================
   EVENT IMAGE
   =========================================== */
.general-schedule .event-image-wrapper {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--inner-radius);
  aspect-ratio: 3/2;
}

@media (min-width: 1110px) {
  .general-schedule .event-image-wrapper {
    width: min(198px, 100%);
  }
}

.general-schedule .event-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  .general-schedule .event-image-wrapper {
    width: 80px;
    height: 80px;
  }
}

/* ===========================================
   EVENT DETAILS
   =========================================== */
.general-schedule .event-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  flex: 1;
  padding-block: var(--spacing-small);
}

.general-schedule .event-title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 var(--spacing-medium) 0;
  text-transform: capitalize;
}

.general-schedule .event-location {
  font-size: var(--font-size-medium-large);
  margin: 0;
  font-weight: 600;
}

.general-schedule .event-time {
  font-size: var(--font-size-medium-large);
  color: var(--text-color-accent);
  margin: 0;
  font-weight: 700;
}

@media (min-width: 1100px) {
  .general-schedule .event-time {
    align-self: center;
  }
}

.general-schedule .event-time--all-day {
  color: var(--all-day-color);
  font-weight: 700;
  font-size: var(--font-size-medium-large);
}

/* ===========================================
   NO IMAGE VARIANT
   =========================================== */
.general-schedule .event-card:not(:has(.event-image-wrapper)) {
  /* border-left: 4px solid var(--accent-color); */
}

.general-schedule .event-card:not(:has(.event-image-wrapper)) .event-details {
  /* padding: var(--spacing-medium) var(--spacing-large); */
}

/* ===========================================
   FOOTNOTE / DISCLAIMER
   =========================================== */
.general-schedule .footnote {
  width: 100%;
  background-color: #0f7d7c;
  color: var(--surface-color);
  text-align: center;
  padding: var(--spacing-medium);
  margin: var(--spacing-medium) 0;
  border-radius: 16px;
  font-weight: 500;
  letter-spacing: 1.6px;
  font-size: var(--font-size-medium);
  text-transform: uppercase;
}