/* ============================================
   Conferences page - custom styles
   Designed to work with hugo-theme-stack
   
   Note: Stack theme uses 10px root font-size
   so 1.6rem = 16px. All sizes here use rem
   calibrated to that scale.

   The theme's article body text uses
   --article-font-size (1.6rem / 1.7rem @md)
   and --article-line-height (1.85).
   We align to those values for consistency.
   ============================================ */

/* ---- Base font for the page ----
   Match the theme's .article-content settings. */
.main-article {
  font-size: var(--article-font-size);
  line-height: var(--article-line-height);
}

/* ---- Page-level padding ----
   The theme's .article-content normally provides horizontal padding.
   Our custom layout skips that wrapper, so we replicate the padding
   on all direct children of .main-article.  --card-padding is
   responsive (20px mobile / 30px desktop) and set by the theme. */
.main-article > * {
  padding-left: var(--card-padding);
  padding-right: var(--card-padding);
}

/* Stats banner and cards already handle their own internal padding,
   but they still need horizontal margin so they don't touch the edges.
   Override with margin instead of padding to keep box-shadow visible. */
.main-article > .conf-stats {
  padding-left: 0;
  padding-right: 0;
  margin-left: var(--card-padding);
  margin-right: var(--card-padding);
}

/* The footer already gets margin from the theme — don't double up
   with our blanket padding rule. */
.main-article > .article-footer {
  padding-left: 0;
  padding-right: 0;
}

/* ---- Header ---- */
.conf-header {
  margin-bottom: 2.5rem;
}

.conf-header h1 {
  font-size: 3.2rem;
  margin-bottom: 1rem;
}

.conf-subtitle {
  font-size: 1.7rem;
  color: var(--card-text-color-secondary);
  line-height: var(--article-line-height);
  margin-bottom: 1rem;
}

.conf-cta {
  font-size: 1.5rem;
  color: var(--card-text-color-tertiary, var(--card-text-color-secondary));
  margin-bottom: 0;
  padding: 1.2rem 1.5rem;
  background: var(--body-background);
  border-radius: 8px;
  border-left: 3px solid var(--accent-color);
  line-height: 1.7;
}

/* ---- Stats Banner ---- */
.conf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 3rem;
  background: var(--card-background);
  border-radius: var(--card-border-radius, 10px);
  box-shadow: var(--shadow-l2);
  overflow: hidden;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0.75rem;
  position: relative;
}

/* Vertical dividers between stat cards */
.stat-card + .stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--card-separator-color);
}

.stat-number {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-color);
  margin-bottom: 0.4rem;
}

.stat-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--card-text-color-tertiary);
}

/* ---- Sections ---- */
.conf-section {
  margin-bottom: 3.5rem;
}

.conf-section h2 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--accent-color);
  display: inline-block;
}

.conf-section-intro {
  color: var(--card-text-color-secondary);
  margin-bottom: 1.5rem;
  font-size: var(--article-font-size);
}

/* ---- Talk Cards Grid ---- */
.talks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Archive talks inside collapsible */
.talks-archive-group {
  margin-top: 1.25rem;
}

.talks-grid-archive {
  padding-top: 0.85rem;
}

.talk-card {
  background: var(--card-background);
  border-radius: var(--card-border-radius, 10px);
  box-shadow: var(--shadow-l1);
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border: 1px solid transparent;
}

.talk-card:hover {
  box-shadow: var(--shadow-l3);
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.talk-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 0.3rem 0;
}

.talk-card-title a {
  color: var(--card-text-color-main);
  text-decoration: none;
  transition: color 0.15s;
}

.talk-card-title a:hover {
  color: var(--accent-color);
}

.talk-card-cospeaker {
  font-size: 1.4rem;
  color: var(--card-text-color-secondary);
  margin: 0;
  font-style: italic;
}

.talk-card-cospeaker a {
  color: var(--accent-color);
  text-decoration: none;
}

.talk-card-cospeaker a:hover {
  text-decoration: underline;
}

.talk-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--card-separator-color);
}

.talk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  background: var(--body-background);
  color: var(--card-text-color-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  border: 1px solid var(--card-separator-color);
}

.talk-link:hover {
  background: var(--accent-color);
  color: var(--accent-color-text, #fff);
  border-color: var(--accent-color);
}

.talk-card-count {
  font-size: 1.3rem;
  color: var(--card-text-color-tertiary);
  margin: 0.6rem 0 0 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Year Groups (collapsible) ---- */
.year-group {
  margin-bottom: 1rem;
}

/* Archive wrapper for older years */
.years-archive-group {
  margin-top: 0.5rem;
}

.years-archive-content {
  padding-top: 0.85rem;
}

.year-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding: 1rem 1.5rem;
  background: var(--card-background);
  box-shadow: var(--shadow-l1);
  border-radius: var(--card-border-radius, 10px);
  user-select: none;
  list-style: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.year-header::-webkit-details-marker {
  display: none;
}

.year-header::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--accent-color);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.year-group[open] > .year-header::before {
  transform: rotate(90deg);
}

.year-group[open] > .year-header {
  box-shadow: var(--shadow-l2);
}

.year-header:hover {
  box-shadow: var(--shadow-l2);
}

.year-label {
  font-size: 2rem;
  font-weight: 800;
  color: var(--card-text-color-main);
}

.year-count {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--card-text-color-tertiary);
  margin-left: auto;
  background: var(--body-background);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
}

/* ---- Event Cards inside year groups ---- */
.year-events-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0 0.35rem 0;
}

.event-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card-background);
  border-radius: 8px;
  box-shadow: var(--shadow-l1);
  transition: box-shadow 0.15s, transform 0.15s;
}

.event-card:hover {
  box-shadow: var(--shadow-l2);
  transform: translateX(3px);
}

.event-card-type {
  flex-shrink: 0;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  white-space: nowrap;
  min-width: 5rem;
  text-align: center;
}

.type-conference {
  background: #dbeafe;
  color: #1d4ed8;
}

.type-meetup {
  background: #dcfce7;
  color: #15803d;
}

.type-bbl {
  background: #fef9c3;
  color: #a16207;
}

/* Dark mode badge adjustments */
[data-scheme="dark"] .type-conference {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

[data-scheme="dark"] .type-meetup {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

[data-scheme="dark"] .type-bbl {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
}

/* Upcoming badge */
.type-upcoming {
  background: #fef3c7;
  color: #d97706;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  animation: upcoming-pulse 2s ease-in-out infinite;
}

@keyframes upcoming-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

[data-scheme="dark"] .type-upcoming {
  background: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
}

/* Upcoming event card highlight */
.event-card-upcoming {
  border-left: 3px solid #d97706;
}

[data-scheme="dark"] .event-card-upcoming {
  border-left-color: #fbbf24;
}

.event-card-content {
  min-width: 0;
}

.event-card-event {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--card-text-color-main);
}

.event-card-talk {
  font-size: 1.5rem;
  color: var(--card-text-color-secondary);
  margin: 0.2rem 0 0 0;
  line-height: 1.5;
}

.event-card-note {
  font-size: 1.3rem;
  color: var(--card-text-color-tertiary);
  font-style: italic;
  margin: 0.2rem 0 0 0;
}

.event-card-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.5rem;
  background: var(--body-background);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.action-link:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-l2);
}

/* ---- Author & Organizer ---- */
.conf-section > p {
  font-size: var(--article-font-size);
  line-height: var(--article-line-height);
}

.conf-section > p a {
  color: var(--accent-color);
}

.author-list,
.organizer-list {
  padding-left: 1.5rem;
  line-height: var(--article-line-height);
  font-size: var(--article-font-size);
}

.author-list li,
.organizer-list li {
  margin-bottom: 0.5rem;
}

.author-list a,
.organizer-list a {
  color: var(--accent-color);
}

/* ---- Footer ---- */
.main-article > .article-footer {
  font-size: 1.5rem;
}

/* The custom-footer partial includes an <hr> between the copyright
   section and the sharing buttons, which creates a double-line
   effect on this page.  Nuke it with high specificity. */
.conferences-page .main-article .article-footer hr {
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Full-width layout (no right sidebar) ----
   The theme sets .container.extended globally when any widget scope
   is non-empty, reserving space for a right sidebar we don't use.
   Override to compact-like widths so main content fills the space. */
.conferences-page .container.extended {
  --right-sidebar-max-width: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .conf-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hide the divider for first item of second row */
  .stat-card:nth-child(4)::before {
    display: none;
  }

  .stat-card {
    padding: 1.25rem 0.5rem;
  }

  .stat-number {
    font-size: 2.8rem;
  }

  .stat-label {
    font-size: 1.1rem;
  }

  .talks-grid {
    grid-template-columns: 1fr;
  }

  .event-card {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }

  .event-card-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 0.25rem;
  }
}

@media (max-width: 480px) {
  .conf-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card:nth-child(3)::before {
    display: none;
  }

  .year-header {
    padding: 0.85rem 1rem;
  }
}