/* ============================================================================
 * page-termin-detail.css — Termin - Detailseite (Events CPT single view).
 * Wave A / AP-FRONTEND. Scoped to .page-termin-detail; every value traces to
 * Figma node 454:7190 (design width 1920 =
 * MAX). Fluid via clamp(): preferred = px/1920*100 vw so the value hits the exact
 * Figma px at 1920 and scales down proportionally. Consumes :root tokens
 * (style.css) + shared .btn-cta / .btn-outline-purple (main.css). NO new tokens.
 * Breakpoints (site G10): Desktop >=1250 (fluid clamp zone) · Tablet 768-1250 ·
 * Mobile <768.  All namespaced .td-* — no shared file edited.
 * ==========================================================================*/

/* ============================================================
   EVENT HEADER (454:7191) — CPT-EV-SINGLE fixed matrix.
   White section, 112 padding. 50/50 grid (image 816 / text 816)
   with a 64 gap. Right column: H2 title, then an info block
   (indent 64) = purple-outlined 3-cell meta box, description,
   and a links row (black .btn-cta + underlined calendar link).
   ============================================================ */
.td-event {
	background: var(--color-white);
}
.td-event__inner {
	width: 100%;
	max-width: var(--site-max);                        /* 1920 */
	margin-inline: auto;
	padding: var(--pad-section-y) var(--gutter-inner); /* 112 all sides @1920 */
	display: grid;
	grid-template-columns: 1fr 1fr;                    /* 50/50 (816 / 816 @1920) */
	gap: clamp(24px, 3.3333vw, 64px);                  /* 64 image -> text @1920 */
	align-items: start;
}

/* ---- Media column: 816x612 (4:3) grey placeholder, object-fit cover ---- */
.td-event__media {
	position: relative;
	width: 100%;
	aspect-ratio: 816 / 612;
	overflow: hidden;
	background: var(--color-grey-placeholder);         /* #c4c4c4 placeholder tint */
}
.td-event__img {
	width: 100%;
	height: 100%;
	object-fit: cover;                                 /* G15 — render only the visible frame */
	display: block;
}

/* ---- Text column: 64 top pad, vertical stack (title -> info) gap 48 ---- */
.td-event__text {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.5vw, 48px);                     /* 48 title -> info @1920 */
	padding-top: clamp(28px, 3.3333vw, 64px);          /* 64 @1920 */
	min-width: 0;
}
.td-event__title {
	font-size: var(--fs-h2);                           /* 48px @1920 */
	line-height: var(--lh-heading);                    /* 62.4px */
	font-weight: var(--fw-bold);
	color: var(--color-black);
	max-width: 816px;
	overflow-wrap: break-word;                         /* G2d reflow safety */
}

/* ---- Info block: indented 64, vertical (meta+desc group) -> links gap 48 ---- */
.td-event__info {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.5vw, 48px);                     /* 48 group -> links @1920 */
	padding-left: clamp(24px, 3.3333vw, 64px);         /* 64 indent @1920 */
	min-width: 0;
}
.td-event__meta-desc {
	display: flex;
	flex-direction: column;
	gap: 16px;                                         /* meta box -> description */
	min-width: 0;
}

/* ---- Meta box (454:7200) — purple-light bordered 3-cell row.
   Outer 3px + 1px inner dividers (#bf82ff), cell padding 24, fit-content.
   Outer border via inset box-shadow on the box; dividers via a 1px inset
   left box-shadow on cells 2..n. Neither adds layout size, so the box stays
   558px @1920 (135 + 215 + 208). White bg. ---- */
.td-meta {
	display: flex;
	flex-wrap: wrap;                                   /* cells sit side by side; wrap to a new row when they don't fit */
	box-sizing: border-box;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	gap: 1px;                                          /* purple shows through as the 1px divider — both between cells and between wrapped rows */
	padding: 3px;                                      /* #bf82ff outer 3px frame — via padding so the opaque white cells can't cover it (an inset box-shadow would sit behind them) */
	background: var(--color-purple-light);             /* #bf82ff frame + dividers */
}
.td-meta__cell {
	display: flex;
	align-items: center;
	flex: 1 1 auto;                                    /* fill each row; keeps desktop compact (fit-content = no free space) */
	padding: clamp(16px, 1.25vw, 24px);                /* 24 @1920 */
	font-size: var(--fs-body);                         /* 22px @1920 */
	line-height: var(--lh-body);                       /* 33px */
	font-weight: var(--fw-regular);
	color: var(--color-black);
	background: var(--color-white);
	white-space: nowrap;
}

/* ---- Description (454:7207) — body text, 752 max ---- */
.td-event__desc {
	max-width: 752px;
	font-size: var(--fs-body);                         /* 22px @1920 */
	line-height: var(--lh-body);                       /* 33px */
	font-weight: var(--fw-regular);
	color: var(--color-black);
	overflow-wrap: break-word;
}
.td-event__desc p { margin: 0; font-size: inherit; line-height: inherit; }
.td-event__desc p + p { margin-top: 1em; }
.td-event__desc a { color: inherit; text-decoration: underline; }   /* prose text links underlined (WCAG 1.4.1) */

/* ---- Links row (454:7208) — horizontal, gap 48, center-aligned ---- */
.td-event__links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(24px, 2.5vw, 48px);                     /* 48 @1920 */
}
/* Primary CTA reuses shared .btn-cta (deco corners grow 1.022s gentle; notch
   defaults to white = section bg). Figma label weight is 700 (vs the shared
   600), so bump weight on this instance only — additive, no shared edit. */
.td-event__cta {
	font-weight: var(--fw-bold);                       /* 700 per Figma 454:7209 */
}
/* Calendar link (454:7210) — 30px icon + gap 10 + permanently underlined text. */
.td-cal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-black);
	text-decoration: none;
}
.td-cal__icon {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: block;
}
.td-cal__text {
	font-size: var(--fs-body);                         /* 22px @1920 */
	line-height: var(--lh-body);                       /* 33px */
	font-weight: var(--fw-regular);
	color: var(--color-black);
	text-decoration: underline;                        /* permanent 2px underline */
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ============================================================
   WEITERE EVENTS UND TERMINE (454:7261) — MOD-EV-WEITERE.
   Cyan section (pad 112/176/112/112). Header (title flush @112 +
   intro indented +64, 832 max) then a light-cyan bordered track:
   64px cyan left band + 3 touching cells (522.67 each @1920), 3px
   cyan outer border, 1px cyan dividers. Cell = title (H3) + meta
   (body) + "Alle Informationen" .btn-outline-purple.
   ============================================================ */
.td-weitere {
	background: var(--color-cyan);                      /* #00caff */
}
.td-weitere__inner {
	width: 100%;
	max-width: var(--site-max);                        /* 1920 */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 3.3333vw, 64px);                  /* 64 head -> track @1920 */
	/* top/bottom 112 (--pad-section-y), left 112 (--gutter-inner), right 176 */
	padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);
}

/* ---- Header (454:7262) — title flush left; intro indented +64 ---- */
.td-weitere__head {
	display: flex;
	flex-direction: column;
	gap: 24px;                                         /* title -> intro */
}
.td-weitere__title {
	font-size: var(--fs-h2);                           /* 48px @1920 */
	line-height: var(--lh-heading);                    /* 62.4px */
	font-weight: var(--fw-bold);
	color: var(--color-black);
	max-width: 832px;
	overflow-wrap: break-word;
}
.td-weitere__desc {
	margin-left: clamp(24px, 3.3333vw, 64px);          /* indent +64 @1920 */
	max-width: 832px;
	font-size: var(--fs-body);                         /* 22px @1920 */
	line-height: var(--lh-body);                       /* 33px */
	font-weight: var(--fw-regular);
	color: var(--color-black);
	overflow-wrap: break-word;
}
.td-weitere__desc p { margin: 0; font-size: inherit; line-height: inherit; }
.td-weitere__desc p + p { margin-top: 1em; }

/* ---- Cards track (454:7267) — light-cyan bg, 3px cyan outer border, a 64px
   cyan left band (Rectangle 39, 454:7283) in the left padding, then a 3-col
   grid of touching cells. 1568 cell area + 64 band = 1632 track @1920. ---- */
.td-weitere__track {
	position: relative;
	background: var(--color-cyan-light);               /* #d1f5ff */
	box-shadow: inset 0 0 0 3px var(--color-cyan);     /* #00caff outer 3px, INSIDE */
	padding-left: clamp(24px, 3.3333vw, 64px);         /* 64 band width @1920 */
}
.td-weitere__track::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: clamp(24px, 3.3333vw, 64px);                /* 64 cyan left band @1920 */
	background: var(--color-cyan);                      /* #00caff */
}
.td-weitere__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;                                            /* cells touch (Figma gap 0) */
}
.td-wcard {
	position: relative;
	background: var(--color-cyan-light);               /* #d1f5ff */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;                                         /* body -> cta @1920 */
	padding: clamp(20px, 1.6667vw, 32px);              /* 32 @1920; grows, no clip (G2d) */
}
.td-wcard + .td-wcard {
	box-shadow: inset 1px 0 0 var(--color-cyan);       /* #00caff 1px divider */
}
.td-wcard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;                                         /* title -> meta @1920 */
	min-width: 0;
	/* Figma "Event info" group (454:7269) is a FIXED 429.33px text column inside
	   the 522.67px cell; that inset wraps the title to 2 lines (h84) and the meta
	   to 2 lines (h66) -> 160px text + 24 gap + 55 CTA + 64 pad = 303px card.
	   429.33/1920 = 22.3611vw. Longer copy grows the card (no clip — G2d). */
	max-width: clamp(280px, 22.3611vw, 430px);
}
.td-wcard__title {
	font-size: var(--fs-h3);                           /* 32px @1920 */
	line-height: var(--lh-heading);                    /* 41.6px */
	font-weight: var(--fw-bold);
	color: var(--color-black);
	overflow-wrap: break-word;
}
.td-wcard__meta {
	font-size: var(--fs-body);                         /* 22px @1920 */
	line-height: var(--lh-body);                       /* 33px */
	font-weight: var(--fw-regular);
	color: var(--color-black);
	overflow-wrap: break-word;
}
/* Card CTA reuses .btn-outline-purple (border 3px->5px hover, 0.3s ease-out);
   only the font-size differs from the shared 22px default. */
.td-wcard__cta {
	align-self: flex-start;
	font-size: var(--fs-h4);                           /* 24px @1920 -> lh 31.2 */
}

/* ============================================================
   RESPONSIVE (AP-4) — site breakpoints (briefing G10 / shared
   modules.css): Desktop >=1250 = fluid clamp zone (no queries) ·
   Tablet 769-1250 · Mobile <=768. Nav + footer collapse (burger)
   is owned by the SHARED main.css; only this page's two sections
   are adapted here. No :root overrides, no shared-file edits —
   direct .td-* property changes only. Verified with the viewport
   sweep (1920 -> 320): zero horizontal overflow / overlap / clip.
   ============================================================ */

/* ---- META STRIP (454:7200) ---------------------------------
   3 nowrap cells (date / time / location). The box is fit-content and
   wraps (.td-meta flex-wrap), so cells stay side by side while the
   column is wide enough and drop the non-fitting one(s) onto a new row
   as it narrows — no forced vertical stack, no overflow. The gap-based
   dividers stay correct whichever way the cells wrap. ---- */

/* ---- TABLET (769-1250) -------------------------------------
   Event header stays 50/50 (columns are still wide enough down to
   768). Weitere track drops 3 -> 2 cards; the collapsed-border
   dividers become grid-aware (vertical between the two columns,
   horizontal above the wrapped 3rd card) so no stray line and no
   added fill leaks the cyan band. ---- */
@media (min-width: 769px) and (max-width: 1250px) {
	.td-weitere__cards { grid-template-columns: repeat(2, 1fr); }
	.td-wcard + .td-wcard { box-shadow: none; }                       /* drop the linear rule */
	.td-wcard:nth-child(2n) { box-shadow: inset 1px 0 0 var(--color-cyan); }   /* col 2 divider */
	.td-wcard:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--color-cyan); }  /* row 2+ divider */
}

/* ---- MOBILE (<=768) ---------------------------------------
   Event header stacks (image over text). Weitere collapses to a
   single column: dividers flip horizontal, the card body drops its
   429px desktop text-column cap so copy uses the full width, and
   the intro indent is released for full-width reading. ---- */
@media (max-width: 768px) {
	/* EVENT HEADER — image over text */
	.td-event__inner { grid-template-columns: 1fr; }

	/* WEITERE — single column */
	.td-weitere__cards { grid-template-columns: 1fr; }
	.td-wcard + .td-wcard { box-shadow: inset 0 1px 0 var(--color-cyan); }   /* horizontal divider */
	.td-wcard__body { max-width: none; }                 /* release the 429px text-column cap */
	.td-weitere__desc { margin-left: 0; }                /* release the +64 intro indent */
}