/* ==========================================================================
   ESG Summit — Collapsible card agenda (v1.0)
   Paired with esg-agenda-cards.js
   Scoped to .esg-agenda so it won't bleed into the rest of the site.
   ========================================================================== */

/* ---- 1. Layout reset: remove the original .esg-row borders & padding ---- */
.esg-agenda .esg-agenda-body { max-width: 1180px; }
.esg-agenda .esg-row {
  padding: 0 !important;
  border: none !important;
  margin: 0 0 10px 0;
}
.esg-agenda .esg-row:last-child { border: none !important; }
.esg-agenda .esg-row-split { grid-template-columns: 1fr 1fr; gap: 12px; }
.esg-agenda .esg-row-split > .esg-col + .esg-col {
  padding-left: 0;
  border-left: none;
}
.esg-agenda .esg-row-split > .esg-col-empty { background: transparent; }
/* Parallel-track columns: stack as flex so a shorter column's cards grow to
 * match the taller column's total height (and gaps stay uniform). */
.esg-agenda .esg-row-split > .esg-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.esg-agenda .esg-row-split > .esg-col > .esg-card { flex: 1 1 auto; }

/* ---- 2. Card ------------------------------------------------------------ */
/* The venue's background AND text colour are both set on `.esg-card` itself
 * (via `.esg-card.venue-<slug>` generated server-side in
 * esg_agenda_venue_inline_css()), so the text colour cascades into every
 * descendant — title, subtitle, count, chevron, body items, dashes, etc.
 * Inner rules therefore use `color: inherit` rather than fixed hex values. */
.esg-agenda .esg-card {
  background: #F3FCD6;                 /* venue 1 (Nagyhall) — default fallback */
  color: #4E6106;                      /* venue 1 text — default fallback */
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.esg-agenda .esg-card:hover {
  border-color: rgba(0, 0, 0, .28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

/* venue 2 (Lokál terem - Social szekció) — default fallback */
.esg-agenda .esg-card.is-venue2 {
  background: #D9D9F9;
  color: #0A0B9B;
}

/* ---- 3. Card header ----------------------------------------------------- */
/* Title stacks BELOW time+venue so narrow cards (split rows) don't squish the
 * title into a sliver. Grid layout:
 *   ┌────────────────────┬──────────────┐
 *   │ time · venue       │              │
 *   ├────────────────────┤  Részletek ∧ │  (chevron spans both rows,
 *   │ TITLE · count      │              │   vertically centred)
 *   └────────────────────┴──────────────┘
 */
.esg-agenda .esg-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 10px 16px;
  align-items: start;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.esg-agenda .esg-card.no-expand .esg-card-head { cursor: default; }
@media (max-width: 820px) {
  .esg-agenda .esg-card-head { gap: 8px 10px; padding: 12px 14px; }
}

/* Top row, left col: time + venue inline */
.esg-agenda .esg-card-head .c-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
/* Bottom row, left col: title + count */
.esg-agenda .esg-card-head .c-center {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

/* Timestamp — ABC Social, 12px */
.esg-agenda .esg-card-head .c-time {
  font-family: "ABC Social", "ABC Social Condensed", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  margin: 0;
  color: inherit;
}

/* Venue name + session count — Manrope 10px uppercase, 600 */
.esg-agenda .esg-card-head .c-venue,
.esg-agenda .esg-card-head .c-count {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Centre column: slot title + session count below */
.esg-agenda .esg-card-head .c-center { min-width: 0; }
.esg-agenda .esg-card-head .c-title {
  font-family: var(--agenda-font-condensed);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 500;
  margin: 0;
}
/* Subtitle — sits directly below the title */
.esg-agenda .esg-card-head .c-subtitle {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  margin: 2px 0 0;
  opacity: .8;
  color: inherit;
}
/* Section count — now sits BELOW the title */
.esg-agenda .esg-card-head .c-center .c-count {
  display: block;
  margin-top: 8px;
}
.esg-agenda .esg-card-head .c-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* "Részletek" label + chevron wrapper — spans both rows, centred vertically */
.esg-agenda .esg-card-head .c-toggle-wrap {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}
.esg-agenda .esg-card-head .c-toggle-label {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  opacity: .75;
  white-space: nowrap;
}

/* Chevron toggle — vertically centred on every card */
.esg-agenda .esg-card-head .c-toggle {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, color .2s ease;
}
.esg-agenda .esg-card-head .c-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform .25s ease;
  opacity: .75;
}
.esg-agenda .esg-card[open] .c-toggle {
  transform: rotate(180deg);
}
/* Non-expandable cards: hide the whole toggle wrap (no label either) */
.esg-agenda .esg-card.no-expand .c-toggle-wrap { display: none; }

/* Mobile: drop the "Részletek" label and bump the chevron so it stays tappable */
@media (max-width: 600px) {
  .esg-agenda .esg-card-head .c-toggle-label { display: none; }
  .esg-agenda .esg-card-head .c-toggle svg { width: 28px; height: 28px; opacity: 1; }
}

/* ---- 4. Card body (expandable) ----------------------------------------- */
.esg-agenda .esg-card .esg-card-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  border-top: 1px solid transparent;
  transition: max-height .3s ease, padding .3s ease, border-color .3s ease;
}
.esg-agenda .esg-card[open] .esg-card-body {
  max-height: 4000px;
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.esg-agenda .esg-card .slot-subtitle {
  font-size: 14px;
  opacity: .8;
  margin: 0 0 14px;
}

/* ---- 5. Break / non-expandable cards ----------------------------------- */
.esg-agenda .esg-card.no-expand {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.06) 3px,
      transparent 3px,
      transparent 6px
    ),
    #ffffff;
  border: 1px dashed rgba(0, 0, 0, .35);
}
.esg-agenda .esg-card.no-expand .esg-card-head .c-time,
.esg-agenda .esg-card.no-expand .esg-card-head .c-title {
  color: #444;
}

/* ---- 6. Toolbar -------------------------------------------------------- */
.esg-agenda .esg-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0 0 16px;
}
.esg-agenda .esg-toolbar button {
  background: transparent;
  color: #111;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.esg-agenda .esg-toolbar button:hover {
  background: #111;
  color: #fff;
}

/* ---- 7. Mobile stacking for parallel tracks ---------------------------- */
@media (max-width: 820px) {
  .esg-agenda .esg-row-split { grid-template-columns: 1fr; }
  /* Kill the "double" divider added by output.css on stacked split columns —
   * each card already has its own border, so the extra rule is redundant. */
  .esg-agenda .esg-row-split > .esg-col + .esg-col {
    border-top: none;
    padding-top: 0;
  }
}