/* =========================================
   THEME: SHARK (Teal & Silver)
   STYLE: Sharp, Flat, Industrial
   CONTEXT: WordPress Safe Mode (High Specificity)
   ========================================= */

/* 1. Variables & Scope */
.ed-events {
  /* --- Palette --- */
  --c-bg: #DBE9F4;        /* Azureish White */
  --c-primary: #0090B1;   /* Teal Blue (Main) */
  --c-dark: #0090B1;      /* Prussian Blue (Text/Hover) */
  --c-silver: #B0B3B8;    /* Silver (Borders) */
  --c-accent: #E6E0D4;    /* Sandstone Ivory (Accent BG) */
  --c-white: #ffffff;

  /* Layout defaults (PHP can override via inline CSS vars) */
  --ed-gap: 18px;
  --ed-cols: 3;

  /* Font */
  font-family: inherit;
  color: var(--c-dark);
}

.ed-events * {
  box-sizing: border-box;
}

#ed-events-sort{
	padding-right:30px;
}

/* 2. Wrapper */
.ed-events__wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0 30px 0;
}

/* 3. Filter/Sort Bar */
.ed-events__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(176, 179, 184, 0.7);
}

.ed-events__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Tabs */
a.ed-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--c-primary);
  background: transparent;
  color: var(--c-dark);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 0 !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

a.ed-tab:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

a.ed-tab.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Sort dropdown (note: this was hidden before; keep it available when needed) */
.ed-events__sort {
  display: none;
  align-items: center;
  gap: 8px;
}

.ed-events__sort label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-dark);
}

select.ed-events__select {
  appearance: none;
  background: #fff;
  border: 1px solid var(--c-silver);
  color: var(--c-dark);
  padding: 10px 34px 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0 !important;
  outline: none;
  transition: border-color 0.2s;
  position: relative;
}

select.ed-events__select:focus {
  border-color: var(--c-primary);
}

/* Cheap arrow */
.ed-events__sort {
  position: relative;
}
.ed-events__sort:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--c-dark);
  pointer-events: none;
}

/* 4. Inner container */
.ed-events__inner {
  padding: 20px 24px;
}

/* 5. Grid */
.ed-events__grid {
  display: grid;
  /* Desktop grid uses the PHP-provided --ed-cols (fallback 3) */
  grid-template-columns: repeat(var(--ed-cols, 3), minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  margin: 0; /* Reset UL/Div margins */
  list-style: none; /* Reset LI bullets */
  align-items: stretch;
}

/* =========================================
   FEATURED LAYOUT (Plan A - CSS only)
   - 1st card spans 2/3 (2 columns on a 3-col grid)
   - Fix "small photo / wrong proportion" by keeping first-row height balanced:
     featured image becomes panoramic so its height matches a normal card image height.
     (works with all supported ratios)
   ========================================= */

	.ed-events__grid > .ed-event-card:first-child {
  grid-column: span 2;
}

/* Ratio-aware panoramic override for the featured card */
.ed-events__grid > .ed-event-card .ed-event-card__media.ed-ratio-16x9 {
  aspect-ratio: 16 / 9 !important;
}
.ed-events__grid > .ed-event-card:first-child .ed-event-card__media.ed-ratio-16x9 {
  aspect-ratio: 32 / 9 !important;
}
.ed-events__grid > .ed-event-card:first-child .ed-event-card__media.ed-ratio-4x3 {
  aspect-ratio: 8 / 3 !important;
}
.ed-events__grid > .ed-event-card:first-child .ed-event-card__media.ed-ratio-1x1 {
  aspect-ratio: 2 / 1 !important;
}

/* Slightly stronger title for the featured card (keeps hierarchy clear) */

/*Category*/
.ed-event-card__cat {
	font-size:12px;
  line-height: 1em;
	text-transform: uppercase;
    color: #000000;
}
/* Responsive safety: when grid collapses, featured should not create odd gaps */
@media (max-width: 640px) {
  .ed-events__grid > .ed-event-card:first-child {
    grid-column: auto;
  }
  /* Let the original ratio class control on mobile */
  .ed-events__grid > .ed-event-card:first-child .ed-event-card__media {
    aspect-ratio: unset !important;
  }

	.ed-events__grid > .ed-event-card:first-child .ed-event-card__media.ed-ratio-16x9{
		aspect-ratio: 3/2 !important;
	}
}

/* 6. Cards */
.ed-event-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-silver);
  border-radius: 16px !important;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  margin: 0;

  /* NEW: make media+body layout stable */
  /* display: flex;
  flex-direction: column; */
}

/* NEW: Desktop-only fixed height cards (keeps layout from shifting) */
@media (min-width: 861px) {
  .ed-event-card {
    /* height: 50vh; */
  }

  /* Image block takes fixed portion of the card height */
  .ed-event-card__media {
    flex: 0 0 65%;
    height: auto;
    aspect-ratio: auto !important; /* override ratio-based heights */
  }

  /* Body takes the remaining height */
  .ed-event-card__body {
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* Prevent long text pushing layout */
  .ed-event-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ed-event-card__meta {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


.ed-event-card:hover {
  border-color: var(--c-primary);
}

/* Media / Image */
.ed-event-card__media {
  display: block;
  position: relative;
  width: 100%;
  background: #f0f0f0;
  overflow: hidden;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ed-event-card__media img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform 0.4s ease-out;
  border-radius: 0 !important;
}

.ed-event-card:hover .ed-event-card__media img {
  transform: scale(1.05);
}

/* Ratios */
.ed-ratio-16x9 { aspect-ratio: 16 / 9; }
.ed-ratio-4x3 { aspect-ratio: 4 / 3; }
.ed-ratio-1x1 { aspect-ratio: 1 / 1; }

/* DATE BADGE: Absolute Positioning */
.ed-event-card__date {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: var(--c-accent);
    color: #000000;
    border-right: 1px solid var(--c-silver);
    border-bottom: 1px solid var(--c-silver);
    border-radius: 0 !important;
    padding: 0.6em 1.2em;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
    font-family: 'Roboto';
    font-size: 14px;
}

.ed-event-card__date .ed-day {

}
.ed-event-card__date .ed-mon {

}

/* Card body */
.ed-event-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* Title */
.ed-event-card__title {
  margin: 0 !important;
  padding: 0;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.ed-event-card__title a {
  text-decoration: none !important;
  color: var(--c-dark) !important;
  transition: color 0.2s;
  background: none !important;
  box-shadow: none !important;
}

.ed-event-card__title a:hover {
  color: var(--c-primary) !important;
}

/* Meta line */
.ed-event-card__meta {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 49, 83, 0.85);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ed-event-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(176, 179, 184, 0.9);
  background: rgba(219, 233, 244, 0.55);
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  font-weight: 800;
}

/* CTA */
.ed-event-card__cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-primary);
  text-decoration: none !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
}

.ed-event-card__cta:hover {
  color: var(--c-dark);
}

/* 7. Load More */
.ed-events__loadmoreWrap {
  display: flex;
  display: none;
  justify-content: center;
  padding: 22px 20px 0 20px;
}

button.ed-events__loadmore {
  appearance: none;
  border: 1px solid var(--c-silver) !important;
  background: transparent !important;
  color: var(--c-dark) !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  cursor: pointer;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 4px 4px 0 rgba(0, 49, 83, 0.18) !important;
  transition: transform 0.15s, border-color 0.2s, color 0.2s, background 0.2s;
}

button.ed-events__loadmore:hover {
  transform: translate(-1px, -1px);
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background: rgba(0, 109, 119, 0.06) !important;
}

button.ed-events__loadmore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 8. Empty state */
.ed-events__empty {
  padding: 30px 20px;
  border: 1px dashed rgba(176, 179, 184, 0.9);
  background: rgba(219, 233, 244, 0.35);
  color: rgba(0, 49, 83, 0.85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
  border-radius: 0 !important;
}

/* 9. Loading state: dim + grayscale to indicate fetching */
.ed-events.is-loading .ed-events__grid {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%); /* Desaturate while loading */
}

/* 10. Responsive */
@media (max-width: 980px) {
  .ed-events__bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .ed-events__sort {
    width: 100%;
  }
  select.ed-events__select {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .ed-events__grid {
    /* 使用 !important 强行覆盖 PHP 生成的内联样式 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .ed-events__bar {
   padding: 5px;
  }
  .ed-events__tabs {
    gap: 5px;
  }
  .ed-events__inner {
    padding: 5px;
  }
}

@media (max-width: 640px) {
  .ed-events__grid {
    /* 手机端单列 */
    grid-template-columns: 1fr !important;
  }

  .ed-event-card__body {
  }

	.ed-event-card__date{
		font-size:12px;
    line-height: 1;
	}
	button.ed-events__loadmore{
		font-size: 12px !important;
    	padding: 12px 20px !important;
	}
}

/* 11. Defensive resets (WordPress themes sometimes add weird defaults) */
.ed-events a,
.ed-events a:focus,
.ed-events a:hover,
.ed-events button,
.ed-events button:focus,
.ed-events button:hover {
  outline: none !important;
  box-shadow: none !important;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}