/**
 * Event Detail Component Styles
 *
 * Page-specific layout for the Event CPT single post view.
 * Composed with the breadcrumb, container, and wysiwyg-html-editor component styles.
 *
 * Container strategy:
 *   Breadcrumb and header sections each embed @project/container.twig for their
 *   own max-width + padding. The wysiwyg-html-editor component already renders
 *   its own container--wide internally, so .event-detail__content-grid must NOT
 *   duplicate container behaviour (no max-width / padding-inline here).
 *
 * Sidebar-ready grid:
 *   .event-detail__content-grid is a pure grid wrapper — no container styles.
 *   Phase 2 sidebar: wrap .event-detail__content-grid inside a container embed,
 *   add a .event-detail__sidebar sibling, and change grid-template-columns to
 *   "var(--event-sidebar-width, 18rem) 1fr".
 */

/* ── Article wrapper ──────────────────────────────────────────────────────── */

.event-detail {
	display: flex;
	flex-direction: column;
	padding: 7rem 0 4rem;
}

.event-detail::before {
	background: url(/app/themes/imagemakers-foundation/public/repeat-dot-dark.webp) repeat center top;
	content: '';
	display: block;
	inset: 0;
	-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12rem), transparent 100%);
	mask-image: linear-gradient(to bottom, black calc(100% - 12rem), transparent 100%);
	opacity: .1;
	position: absolute;
}

@media (width >= 1280px) {
	.event-detail {
		padding: 7rem 0 5rem;
	}
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */

.event-detail__breadcrumb {
	color: #666666;
	font-size: 0.8125rem;
	font-style: normal;
	line-height: normal;
	margin: 0 0 2.5rem;
}

@media (width >= 1024px) {
	.event-detail__breadcrumb {
		margin: 0 0 5rem;
	}
}

/* ── Post header ──────────────────────────────────────────────────────────── */

.event-detail__header {
	padding-block: 0 var(--spacing-6);
}

.event-detail__title {
	color: var(--color-text-dark, currentColor);
    font-family: var(--font-heading-family);
    font-size: 1.75rem;
    font-weight: var(--font-heading-weight, 700);
    line-height: 1;
    margin: 0;
    max-width: 60.0625rem;
}

/* ── Featured image ───────────────────────────────────────────────────────── */

.event-detail__figure {
	margin: 0;
	overflow: hidden;
	border-radius: 0.5rem;
}

.event-detail__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ── Article body ─────────────────────────────────────────────────────────── */

.event-detail__body {
	flex: 1;
}

/*
 * Sidebar-ready content grid.
 *
 * Pure grid wrapper — no max-width or padding here; the wysiwyg-html-editor
 * component already applies container--wide internally. Adding container
 * styles here would create double padding and double max-width constraints.
 *
 * Phase 2: wrap this grid in a container embed, add .event-detail__sidebar as
 * the first child, and set grid-template-columns to
 * "var(--event-sidebar-width, 18rem) 1fr" at the desired breakpoint.
 */
.event-detail__content-grid {
	display: grid;
	grid-template-columns: 1fr;
}

.event-detail__main {
	min-width: 0; /* Prevent grid blowout */
}

@media (width >= 1025px) {
    .event-detail__title {
        font-size: 4rem;
    }
}

/*
 * Phase 2 sidebar placeholder styles.
 * Uncomment and adjust when the sidebar is introduced.
 *
 * @media (width >= 64rem) {
 *     .event-detail__content-grid {
 *         grid-template-columns: var(--event-sidebar-width, 18rem) 1fr;
 *         gap: var(--grid-gap, 2rem);
 *         max-width: var(--content-max-width, 80rem);
 *         margin-inline: auto;
 *         padding-inline: var(--spacing-container-lg, 3rem);
 *     }
 * }
 *
 * .event-detail__sidebar {
 *     position: sticky;
 *     top: var(--spacing-8);
 *     align-self: start;
 * }
 */