/* §3 Event & Seminarier - eventsidans agenda, anmälan och sidokolumn-
   "boxes". Delar typografitokens med article.css/commerce.css. Ingen
   designskiss fanns (README nämner inte event-sidor alls) - byggd
   utifrån samma komponentspråk som resten av temat. */

.ff-seminarie {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ff-seminarie__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 12px;
  color: var(--ff-text-meta);
}

/* ---- Agenda ---- */
.ff-agenda {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ff-border);
}
.ff-agenda__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ff-border-weak);
  background: var(--ff-card-bg);
}
.ff-agenda__row--sub {
  grid-template-columns: 90px 44px 1fr;
  padding: 12px 4px 12px 24px;
  border-bottom: 1px solid var(--ff-border-weak);
  background: transparent;
}
.ff-agenda__subitems .ff-agenda__row--sub:last-child { border-bottom: 0; }
/* Explicit kolumnplacering istf att lita på källordning: saknas en
   talarbild (<img>) hoppar PHP:t helt över den taggen (se
   ff_seminarie_render_agenda() i inc/event.php), och utan uttrycklig
   grid-column hamnade då .ff-agenda__body i bildens 44px-kolumn i
   stället för textkolumnen (1fr) - texten kläm des in i en ~44px bred
   remsa. Upptäckt 2026-08-28 på en panel utan talarbilder
   ("Säkerhetspanel"). */
.ff-agenda__row--sub .ff-agenda__time { grid-column: 1; }
.ff-agenda__row--sub .ff-agenda__speaker-img { grid-column: 2; }
.ff-agenda__row--sub .ff-agenda__body { grid-column: 3; }

.ff-agenda__time {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 13px;
  color: var(--ff-dark);
  white-space: nowrap;
  padding-top: 2px;
}
.ff-agenda__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ff-body-copy);
}
.ff-agenda__title {
  font-weight: 700;
  color: var(--ff-dark);
}
.ff-agenda__speaker {
  font-size: 13px;
  color: var(--ff-text-soft);
  font-weight: 600;
}
.ff-agenda__desc {
  font-size: 14px;
  color: var(--ff-text-secondary);
}
.ff-agenda__speaker-img {
  width: 44px;
  height: 44px;
  border-radius: var(--ff-radius-round);
  object-fit: cover;
}

.ff-agenda__toggle {
  font-family: var(--ff-font-mono);
  word-spacing: -0.2em;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ff-blue);
  background: transparent;
  border: 1px solid var(--ff-divider);
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
}
.ff-agenda__toggle:hover { border-color: var(--ff-blue); }

.ff-agenda__subitems {
  background: var(--ff-hover-dropdown);
  border-bottom: 1px solid var(--ff-border-weak);
}
.ff-agenda__subitems--hidden { display: none; }

@media (max-width: 700px) {
  .ff-agenda__row { grid-template-columns: 70px 1fr; }
  .ff-agenda__toggle { grid-column: 1 / -1; justify-self: start; }
  .ff-agenda__row--sub { grid-template-columns: 70px 1fr; }
  .ff-agenda__speaker-img { grid-row: span 2; }
}

/* ---- Anmälan ---- */
.ff-seminarie__cta {
  align-self: flex-start;
}
.ff-seminarie__closed {
  font-size: 15px;
  color: var(--ff-text-secondary);
  background: var(--ff-hover-dropdown);
  border: 1px solid var(--ff-border);
  padding: 16px 20px;
  display: inline-block;
}
.ff-seminarie__form-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-dark);
  border-bottom: 2px solid var(--ff-green);
  padding-bottom: 3px;
  align-self: flex-start;
  margin-bottom: 20px;
  display: inline-block;
}

/* ---- Sidokolumnens "boxes" ---- */
.ff-seminarie__box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ff-seminarie__box-content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ff-body-copy);
  max-width: 100%;
  overflow-x: auto;
}
.ff-seminarie__box-content table { max-width: 100%; }
.ff-seminarie__box--highlight {
  background: var(--ff-dark);
  color: #fff;
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.5;
}
.ff-seminarie__box--highlight a { color: var(--ff-green-light); }