/*
 * Kiros Social – events. Tokens only; every text colour sits with its own background.
 * Layout and type follow the LEF mockup (07 Events, rail card, Today strip).
 */

/* ---------- page head and layout ---------- */
.ks-app .ks-evt-hero .ks-evt-lead { color: var(--ks-text-muted); max-width: 62ch; margin-top: 6px; }
.ks-app .ks-evt-hero__actions { align-items: center; }
.ks-app .ks-evt-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ks-app .ks-evt-list, .ks-app .ks-evt-side { min-width: 0; }
.ks-app .ks-evt-side { position: sticky; top: 96px; align-content: start; }

/* ---------- a card in the list ---------- */
.ks-app .ks-evt-card__row { display: flex; gap: 16px; align-items: flex-start; }
.ks-app .ks-evt-card__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; }
.ks-app .ks-evt-card__title { font-size: 1.45rem; line-height: 1.2; color: var(--ks-heading); }
.ks-app .ks-evt-card__title a { color: var(--ks-heading); }
.ks-app .ks-evt-meta { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin: 0; }
.ks-app .ks-evt-meta .ks-icon { color: var(--ks-icon); margin-top: 3px; }
.ks-app .ks-evt-meta span { min-width: 0; }
.ks-app .ks-evt-tags { margin: 0; }
.ks-app .ks-evt-desc { color: var(--ks-text); margin: 0; }
.ks-app .ks-evt-going { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ks-app .ks-evt-stack .ks-avatar { border-color: var(--ks-surface); }
.ks-app .ks-evt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ks-app .ks-evt-card.is-past .ks-date small { background: var(--ks-surface-2); color: var(--ks-text-muted); }
.ks-app .ks-evt-card.is-past .ks-evt-card__title { font-size: 1.2rem; }

/* ---------- past events (collapsed) ---------- */
.ks-app .ks-evt-past { padding: 0; }
.ks-app details.ks-evt-past > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 20px; min-height: 44px; color: var(--ks-heading); }
.ks-app details.ks-evt-past > summary::-webkit-details-marker { display: none; }
.ks-app details.ks-evt-past > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ks-icon); border-bottom: 2px solid var(--ks-icon); transform: rotate(45deg); transition: transform 150ms var(--ks-ease); }
.ks-app details.ks-evt-past[open] > summary::after { transform: rotate(-135deg); }
.ks-app .ks-evt-past__list { padding: 0 16px 16px; }
.ks-app .ks-evt-tab details.ks-evt-past { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-r); }
.ks-app .ks-evt-past .ks-card { box-shadow: none; background: var(--ks-surface-2); color: var(--ks-text); }
.ks-app .ks-evt-past .ks-card .ks-date { background: var(--ks-surface); }

/* ---------- month calendar ---------- */
.ks-app .ks-evt-cal__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ks-app .ks-evt-cal__head h2 { font-size: 1.45rem; flex: 1 1 auto; }
.ks-app .ks-evt-cal__count { order: 3; }
.ks-app .ks-evt-cal__nav { display: inline-flex; gap: 2px; order: 4; }
.ks-app .ks-evt-cal__nav .ks-btn { min-height: 36px; min-width: 36px; }
.ks-app .ks-evt-cal__next .ks-icon { transform: rotate(180deg); }
.ks-app .ks-evt-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: .85rem; }
.ks-app .ks-evt-cal__dow { padding: 6px 0; font-size: .68rem; font-weight: 700; color: var(--ks-text-muted); }
.ks-app .ks-evt-cal__day { display: block; padding: 9px 0; border-radius: 9px; color: var(--ks-text); background: transparent; text-decoration: none; font-variant-numeric: tabular-nums; }
.ks-app .ks-evt-cal__day.is-blank { padding: 0; }
.ks-app .ks-evt-cal__day.has-event { background: var(--ks-brand-soft); color: var(--ks-on-brand-soft); font-weight: 700; }
.ks-app a.ks-evt-cal__day.has-event { background: var(--ks-brand-soft); color: var(--ks-on-brand-soft); }
.ks-app a.ks-evt-cal__day.has-event:hover { outline: 2px solid var(--ks-brand-ui); text-decoration: none; }
.ks-app .ks-evt-cal__day.is-today { background: var(--ks-ink); color: var(--ks-on-ink); font-weight: 700; }
.ks-app a.ks-evt-cal__day.is-today { background: var(--ks-ink); color: var(--ks-on-ink); }

/* ---------- subscribe ---------- */
.ks-app .ks-evt-subscribe { display: grid; gap: 10px; justify-items: start; }
.ks-app .ks-evt-subscribe h3 { font-size: 1.2rem; }
.ks-app .ks-evt-feedlink { display: grid; gap: 8px; width: 100%; }
.ks-app .ks-evt-feedlink summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }

/* ---------- rail widget ---------- */
.ks-app .ks-evt-rail { display: grid; gap: 12px; }
.ks-app .ks-evt-rail__head h3 { font-size: 1.1rem; }
.ks-app .ks-evt-rail__all { font-size: .8rem; }
.ks-app .ks-evt-rail__body { display: flex; gap: 12px; align-items: flex-start; }
.ks-app .ks-evt-rail__body .ks-date { width: 52px; }
.ks-app .ks-evt-rail__body .ks-date b { font-size: 1.3rem; }
.ks-app .ks-evt-rail__text { display: grid; gap: 2px; min-width: 0; }
.ks-app .ks-evt-rail__title { font-size: 1.1rem; line-height: 1.2; color: var(--ks-heading); }
.ks-app .ks-evt-rail .ks-evt-going { margin-top: 4px; }
.ks-app .ks-evt-rail .ks-evt-actions { margin-top: 0; }
.ks-app .ks-evt-rail .ks-evt-actions .ks-btn { flex: 1 1 auto; }

/* ---------- inside a feed post ---------- */
.ks-app .ks-evt-feed { display: grid; gap: 12px; }
.ks-app .ks-evt-feed__row { display: flex; gap: 14px; align-items: flex-start; }
.ks-app .ks-evt-feed__text { display: grid; gap: 2px; min-width: 0; }
.ks-app .ks-evt-feed__title { font-size: 1.2rem; line-height: 1.2; color: var(--ks-heading); }
.ks-app .ks-evt-feed .ks-evt-actions { margin-top: 0; }

/* ---------- event page ---------- */
.ks-app .ks-evt-cover { height: clamp(90px, 22vw, 220px); }
.ks-app .ks-evt-head__body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ks-app .ks-evt-head__text { flex: 1 1 280px; min-width: 0; display: grid; gap: 8px; }
.ks-app .ks-evt-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.15; color: var(--ks-heading); }
.ks-app .ks-evt-facts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ks-app .ks-evt-facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--ks-text); }
.ks-app .ks-evt-facts .ks-icon { color: var(--ks-icon); margin-top: 2px; }
.ks-app .ks-evt-menu { margin-left: auto; }
.ks-app .ks-evt-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ks-app .ks-evt-colside { position: sticky; top: 96px; }
.ks-app .ks-evt-about { margin-top: 8px; line-height: 1.6; }
.ks-app .ks-evt-people .ks-spread { margin-bottom: 8px; }
.ks-app .ks-evt-guestlist { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.ks-app .ks-evt-guestlist .ks-person { justify-content: flex-start; }
.ks-app .ks-evt-sub { margin: 16px 0 8px; font-size: .95rem; }
.ks-app .ks-evt-wait { margin: 0; padding-left: 20px; }
.ks-app .ks-evt-notes { display: grid; gap: 10px; }
.ks-app .ks-evt-note { display: grid; gap: 6px; }
.ks-app .ks-evt-note__text { line-height: 1.5; }

/* RSVP panel */
.ks-app .ks-evt-rsvp { display: grid; gap: 12px; margin: 0; }
.ks-app .ks-evt-rsvp__title { font-size: 1.3rem; }
.ks-app .ks-evt-answers { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-app .ks-evt-answers .ks-btn { flex: 1 1 auto; }
.ks-app .ks-evt-rsvp__more { display: grid; gap: 12px; }
.ks-app .ks-evt-addcal { display: grid; gap: 10px; }
.ks-app .ks-evt-addcal h3 { font-size: 1.15rem; }

/* ---------- form ---------- */
.ks-app .ks-evt-form { display: grid; gap: 16px; }
.ks-app .ks-evt-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ks-app .ks-evt-coverpick { display: grid; gap: 10px; justify-items: start; }
.ks-app .ks-evt-coverpick__img { width: min(100%, 320px); border-radius: var(--ks-r-md); }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
	.ks-app .ks-evt-layout, .ks-app .ks-evt-cols { grid-template-columns: minmax(0, 1fr); }
	.ks-app .ks-evt-side, .ks-app .ks-evt-colside { position: static; }
	/* On the event page the answer box comes first on a phone. */
	.ks-app .ks-evt-colside { order: -1; }
}
@media (max-width: 600px) {
	.ks-app .ks-evt-head__body { position: relative; flex-direction: column; gap: 12px; }
	.ks-app .ks-evt-head__text { flex: 1 1 auto; width: 100%; }
	.ks-app .ks-evt-menu { position: absolute; top: 10px; right: 10px; }
	/* The date tile sits beside the title and place; everything else uses the full width. */
	.ks-app .ks-evt-card__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
	.ks-app .ks-evt-card__main { display: contents; }
	.ks-app .ks-evt-card__row > .ks-date { grid-row: 1 / span 2; }
	.ks-app .ks-evt-card__main > .ks-evt-card__top, .ks-app .ks-evt-card__main > .ks-evt-meta, .ks-app .ks-evt-card__main > .ks-evt-tags { grid-column: 2; }
	.ks-app .ks-evt-card__main > .ks-evt-desc, .ks-app .ks-evt-card__main > .ks-evt-going, .ks-app .ks-evt-card__main > .ks-evt-actions--card { grid-column: 1 / -1; }
	.ks-app .ks-evt-actions--card > .ks-btn--ink, .ks-app .ks-evt-actions--card > .ks-btn--soft-accent { flex: 1 1 100%; }
	.ks-app .ks-evt-actions--card > .ks-btn:not(.ks-btn--ink):not(.ks-btn--soft-accent) { min-height: 36px; padding: 6px 12px; font-size: .875rem; }
	.ks-app .ks-evt-card__title { font-size: 1.25rem; }
	.ks-app .ks-evt-formgrid { grid-template-columns: minmax(0, 1fr); }
	.ks-app .ks-evt-actions .ks-btn { flex: 1 1 auto; }
	.ks-app .ks-evt-hero__actions { width: 100%; }
}