/**
 * Termine page (JBC-22, Christiane Mayer). Page-local styles only; shared
 * shell styles (nav, footer, buttons, tokens) live in site.css/tokens.css
 * and are NOT touched here (framework.md, both core).
 *
 * Container: tokens.css's own `.wrap` caps at 640px (a form-page width,
 * see site/bausteine/index.php's own comment for the same reasoning), too
 * narrow for a two-column Termin grid, so this page defines its own
 * `.termine-wrap` at the framework's --maxw (1200px). Longhand padding
 * throughout (framework.md "shorthand-clobber"): a shorthand `padding` on
 * a component nested inside `.termine-wrap` could otherwise silently zero
 * out this wrapper's own side padding depending on source order.
 *
 * `.termine-list-intro` / `.termine-faq-intro`
 * deliberately carry NO max-width/ch cap (framework.md "left-aligned
 * section text does not carry a max-width when content around it uses the
 * full column"): the Termin grid, gallery and FAQ list below them all use
 * the full `.termine-wrap` width, so a narrow reading measure on the intro
 * paragraphs alone would look like a layout bug, not a deliberate choice.
 */

.termine-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Termin list section ----------------------------------------------- */

.termine-list-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.termine-list-section h2 { margin: 0 0 12px; }

.termine-list-intro {
  max-width: 75ch;
  color: var(--text-2);
  margin: 0 0 32px;
}

.termine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 720px) {
  .termine-grid { grid-template-columns: 1fr 1fr; }
}

.termine-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.termine-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.termine-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* the global `img, video { border-radius: var(--radius-media) }` rule
     (tokens.css) would round only the image's own corners, leaving square
     corners on this card's outer edge behind it; override to 0 here so
     `.termine-card`'s own border-radius + overflow:hidden governs the
     visible corner instead. */
  border-radius: 0;
}

/* JBC-22 Fix-Runde (design-reviewer VETO, DESIGN.md "13-15px nur fuer
   Versalien-Mikrolabels"): kept at 13px rather than bumped to >= 15px,
   because these two are exactly the case that rule carves out, a short
   fixed-vocabulary chip label ("Albaching", "Vergangen"), not a sentence.
   Bumping the font-size would also widen every chip noticeably without
   improving legibility (they are already >= 3:1 UI-component contrast,
   not body text); `text-transform: uppercase` + a touch of
   `letter-spacing` is the cleaner fix the DESIGN.md rule asks for
   instead, same treatment `.termine-eyebrow` already uses above. */
.termine-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}

/* Compound selector (0-2-0), not source order, decides the margin override
   (JBC-22 Fix-Runde, polish item): `.termine-badge` and `.termine-badge-ort`
   are both single-class selectors of equal specificity, so which one wins
   `margin-bottom` used to depend on which rule happens to come LATER in
   this file, a link that silently breaks if the rules are ever reordered
   or this file gets split/concatenated differently. */
.termine-badge.termine-badge-ort {
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 10px;
}

.termine-card-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.termine-card-body h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.termine-card-desc {
  color: var(--text-2);
  margin: 0;
  font-size: 15px;
}

.termine-dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.termine-dates li {
  background: var(--bg-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  /* JBC-22 Fix-Runde (design-reviewer VETO): was 14px. This is sentence-
     content (a real date), not a fixed-vocabulary micro-label, so
     DESIGN.md's 13-15px allowance does not apply, raised to the 15px
     floor for secondary text. */
  font-size: 15px;
  font-weight: 500;
}

.termine-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 15px;
}

.termine-meta dt {
  color: var(--text-3);
  font-weight: 600;
}

.termine-meta dd {
  margin: 0;
  color: var(--text);
}

.termine-note {
  color: var(--text-3);
  /* JBC-22 Fix-Runde (design-reviewer VETO): was 14px, same "not a
     micro-label" reasoning as .termine-dates li above. */
  font-size: 15px;
  margin: 0;
}

/* JBC-22 Fix-Runde (design-reviewer WARN): was `column-reverse`, which put
   the QR code ABOVE the button on mobile (the DOM order is button then
   QR, `column-reverse` visually flips that). `column` keeps the DOM order
   on screen, button first. The QR stays visible on mobile rather than
   being hidden below this breakpoint: a narrow viewport is not reliably
   "a phone with a camera" (a resized desktop browser window looks
   identical to layout code), and hiding it there would remove the code
   for a legitimate narrow-desktop visitor while keeping it for a wide
   tablet visitor who equally cannot scan their own screen, no real
   signal gained either way. Conservative choice: keep it, just order it
   correctly. */
.termine-cta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.termine-cta-note {
  color: var(--text-3);
  /* JBC-22 Fix-Runde (design-reviewer VETO): was 14px, same reasoning. */
  font-size: 15px;
  margin: auto 0 0;
  padding-top: 8px;
}

/* A QR code needs dark modules on a fixed LIGHT background to stay
   scannable, regardless of theme: this is a functional constraint of the
   QR format itself (quiet zone + contrast for a camera scanner), not a
   brand/rebrand decision, so it is the one deliberate exception to
   "colors only from tokens.css" in this file. A themed dark background
   here would make the code unreadable in dark mode. */
.termine-qr-box {
  background: #FFFFFF;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  line-height: 0;
}

.termine-qr-box img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 0;
}

.termine-qr-caption {
  color: var(--text-3);
  /* JBC-22 Fix-Runde (design-reviewer VETO): was 13px, same reasoning,
     this is a full sentence, not a micro-label. */
  font-size: 15px;
  margin: 0;
  max-width: 22ch;
}

@media (min-width: 480px) {
  .termine-cta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* --- gallery + FAQ sections --------------------------------------------- */

.termine-gallery-section,
.termine-faq-section {
  padding-top: 40px;
  padding-bottom: 56px;
}

.termine-gallery-section h2,
.termine-faq-section h2 {
  margin: 0 0 20px;
}

.termine-faq-intro {
  max-width: 75ch;
  color: var(--text-2);
  margin: 0 0 28px;
}

.termine-faq-intro a { color: var(--accent-text); }

.termine-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.termine-faq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}

.termine-faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.termine-faq-item summary::-webkit-details-marker { display: none; }

.termine-faq-item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.termine-faq-item[open] summary::after { transform: rotate(-135deg); }

.termine-faq-item p {
  color: var(--text-2);
  margin: 0 0 18px;
  /* Impeccable: line length. The card stays full width, the answer text
     inside it keeps a reading measure (the intro paragraphs above keep the
     documented no-cap rule, see this file's header comment). */
  max-width: 75ch;
}

@media (prefers-reduced-motion: reduce) {
  .termine-faq-item summary::after { transition: none; }
}

/* --- CIQ-06: hero on the shared mv-hero component, QR next to the button ---- */

/* Full-bleed hero colour and a landscape crop, same recipe as the Legacy-Trip
 * hero (page-aktivitaeten.css). Generic, belongs in the framework. */
.termine-hero-sys { box-shadow: 0 0 0 100vmax var(--accent); clip-path: inset(0 -100vmax); }
.termine-hero-sys .mv-hero__media { box-shadow: none; }
.termine-hero-sys .mv-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 13;
  object-fit: cover;
  object-position: 38% center;
}

/* CTA: QR on the left, button + caption on the right, always the same shape. */
.termine-cta--qr {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 18px;
}
.termine-cta--qr .termine-qr-box img { width: 114px; height: 114px; } /* 57 modules x 2 px */
.termine-cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.termine-cta--qr .termine-qr-caption { max-width: 30ch; }
@media (max-width: 479px) {
  .termine-cta--qr { grid-template-columns: 1fr; row-gap: 12px; }
  .termine-cta--qr .termine-qr-box { justify-self: start; }
  .termine-cta--qr .termine-cta-text { order: -1; }
}