/* meetings.css — what the meetings pages add on top of the site: the grid of meetings, the
   facts of one, the ask form and the appointment card. The day strip and the time grid are
   base.css's. Drawn only in the contract's tokens (docs/WEBSITE.md). */

/* The meetings on offer ---------------------------------------------------- */

.meetings {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.meeting {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	box-shadow: var(--shadow);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.meeting:hover { transform: translateY(-2px); border-color: var(--muted); }

.meeting-photo {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.meeting-photo--plain { aspect-ratio: 16 / 6; }

.meeting-body { display: grid; gap: 0.25rem; padding: 1.1rem 1.25rem 1.3rem; }
.meeting-name { font-size: 1.1rem; }
.meeting-meta { font-size: 0.9rem; color: var(--muted); }
.meeting-desc { margin-top: 0.4rem; font-size: 0.95rem; color: var(--muted); }

/* One meeting: its facts under the title ----------------------------------- */

.meeting-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: -0.5rem 0 1rem;
	font-weight: 600;
	color: var(--muted);
}
.meeting-facts span + span::before { content: "·"; margin-right: 1.2rem; }

/* The picker card: the strip at the top, the hours in the body -------------- */

.booking-hours { padding: 1.5rem 1.5rem 1.75rem; }
.zone { margin: -0.4rem 0 0.9rem; font-size: 0.9rem; color: var(--muted); }
.booking-hours .status { margin: 0.2rem 0 0; }
.booking-hours .actions { margin-top: 1.25rem; }

/* Asking for the hour: what is being taken, then the form ------------------- */

.ask { display: grid; gap: 1.1rem; }

.ask-what {
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.ask-what .actions { margin-top: 0.6rem; }

.ask-meeting { display: grid; gap: 0.15rem; }
.ask-meeting strong { font-size: 1.1rem; }

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: 0.7rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--line);
}
.facts div { display: grid; gap: 0.1rem; }
.facts dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts dd small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.facts dd time { text-transform: capitalize; }

.ask-form { max-width: 28rem; }
.promise { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--muted); }


/* The appointment card ------------------------------------------------------ */

.manage { display: grid; gap: 1.5rem; }
.manage-head .lede { margin: 0.9rem 0 0; }
.manage .detail {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.manage .actions { margin: 0; }
.manage .status:empty { display: none; }
.ask-form .status:empty { display: none; }