/**
 * Spice Awards — page-level layouts.
 */

/* --- Two-column intro (Home "Welcome", About "About the Awards") ------ */

.spice-intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: start;
}

.spice-intro__media img,
.spice-intro__media .spice-placeholder {
	width: 100%;
	border-radius: var(--spice-radius);
	object-fit: cover;
	aspect-ratio: 4 / 3.7;
}

.spice-intro__body > p { margin-bottom: 1rem; }

.spice-intro__accordion { margin-top: 1.5rem; }

@media (max-width: 767.98px) {
	.spice-intro { grid-template-columns: 1fr; }
}

/* --- Ceremony grid (Previous Years) ---------------------------------- */

.spice-ceremonies {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
}

.spice-ceremonies__lead { grid-row: span 2; }
.spice-ceremonies__lead .spice-tile { height: 100%; }

@media (max-width: 767.98px) {
	.spice-ceremonies { grid-template-columns: 1fr; }
	.spice-ceremonies__lead { grid-row: auto; }
	.spice-tile--tall { min-height: 260px; }
}

/* --- Card grids ------------------------------------------------------ */

.spice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 991.98px) { .spice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .spice-grid { grid-template-columns: 1fr; } }

/* --- Filter bar (Categories, Past Awards) ---------------------------- */

.spice-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 1.25rem;
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius);
	background: linear-gradient(160deg, var(--spice-cream) 0%, var(--spice-cream-deep) 100%);
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.spice-filters__group { display: flex; gap: .75rem; flex-wrap: wrap; }

.spice-filters select,
.spice-filters input[type="search"] {
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-small);
	color: var(--spice-ink);
	background: var(--spice-white);
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius-sm);
	padding: .625rem .875rem;
	min-height: 44px;
}

.spice-filters__search {
	position: relative;
	flex: 1 1 260px;
	max-width: 340px;
}

.spice-filters__search input[type="search"] {
	width: 100%;
	padding-left: 2.5rem;
}

.spice-filters__search i {
	position: absolute;
	left: .875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--spice-muted);
	pointer-events: none;
}

.spice-empty {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--spice-body);
}

/* --- Pagination ------------------------------------------------------ */

.spice-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	flex-wrap: wrap;
}

.spice-pagination button,
.spice-pagination a {
	min-width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding-inline: .5rem;
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius-sm);
	background: var(--spice-white);
	font-size: var(--spice-fs-small);
	font-weight: 600;
	color: var(--spice-ink);
	cursor: pointer;
}

.spice-pagination .is-active {
	background: var(--spice-ink);
	border-color: var(--spice-ink);
	color: var(--spice-white);
}

.spice-pagination .spice-pagination__step {
	border: 0;
	background: none;
	color: var(--spice-body);
}

.spice-pagination [disabled] { opacity: .4; cursor: default; }

/* --- Year page: ticket split ----------------------------------------- */

.spice-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: center;
}

.spice-split__media img,
.spice-split__media .spice-placeholder {
	width: 100%;
	border-radius: var(--spice-radius);
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

.spice-split__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 767.98px) { .spice-split { grid-template-columns: 1fr; } }

/* --- Contact --------------------------------------------------------- */

.spice-contact-form {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius);
	background: linear-gradient(160deg, var(--spice-cream) 0%, var(--spice-cream-deep) 100%);
}

.spice-field { margin-bottom: 1.25rem; }

.spice-field label {
	display: block;
	font-family: var(--spice-font-heading);
	font-size: var(--spice-fs-small);
	font-weight: 700;
	color: var(--spice-ink);
	margin-bottom: .5rem;
}

.spice-field input,
.spice-field select,
.spice-field textarea {
	width: 100%;
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-body);
	color: var(--spice-ink);
	background: var(--spice-white);
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius-sm);
	padding: .875rem 1rem;
	min-height: 48px;
}

.spice-field textarea { min-height: 150px; resize: vertical; }

.spice-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 575.98px) { .spice-field-row { grid-template-columns: 1fr; } }

.spice-contact-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 767.98px) { .spice-contact-details { grid-template-columns: 1fr; } }

.spice-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--spice-radius-sm);
	margin-bottom: 1.5rem;
	font-size: var(--spice-fs-small);
}
.spice-notice--ok  { background: #EAF6EC; color: #1E5B2A; border: 1px solid #C4E4CB; }
.spice-notice--err { background: #FBECEA; color: #8A2018; border: 1px solid #F0CBC6; }

/* --- Editorial (Terms, generic page) --------------------------------- */

.spice-prose { max-width: 76ch; }
.spice-prose h2 { margin-top: 2.5rem; margin-bottom: .75rem; }
.spice-prose h3 { margin-top: 2rem; margin-bottom: .5rem; }
.spice-prose ul, .spice-prose ol { margin-bottom: 1rem; padding-left: 1.25rem; }
.spice-prose li { margin-bottom: .375rem; }

/* Links inside body copy need an affordance — base.css strips underlines
   globally, which is right for nav and cards but not for prose. */
.spice-prose a,
.spice-card__text a {
	color: var(--spice-ink);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.spice-prose a:hover,
.spice-card__text a:hover { color: var(--spice-gold-dark); }

/* Home only: the media column matches the height of the copy beside it, so the
   image squares off against the collapsed accordion rather than floating in
   white space. The About page keeps its natural 4:3 crop. */
.spice-intro--match { align-items: start; }

/* The media height is locked by JS to the height of the copy beside it while
   every accordion is CLOSED, so opening a panel never stretches the image.
   Without JS it falls back to this ratio. */
.spice-intro--match .spice-intro__media {
	display: flex;
	aspect-ratio: 16 / 15;
}

.spice-intro--match .spice-intro__media img,
.spice-intro--match .spice-intro__media .spice-placeholder {
	height: 100%;
	width: 100%;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: cover;
	/* Anchor the crop to the top edge: whatever the measured height turns out
	   to be, the top of the photo is never cut. Horizontally it stays centred. */
	object-position: 50% 0;
}

/* Once JS has measured, the wrapper owns the height outright. */
.spice-intro--match .spice-intro__media[style*="height"] { aspect-ratio: auto; }

/* --- Nominee search results (Past Awards) ---------------------------- */

.spice-year-block {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.spice-year-block__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem);
	padding-bottom: .75rem;
	margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
	margin-bottom: 0;
	border-bottom: 2px solid var(--spice-line);
}

.spice-year-block__title a { color: var(--spice-ink); }
.spice-year-block__title a:hover { color: var(--spice-gold-dark); }

.spice-year-block__count {
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-small);
	font-weight: 400;
	color: var(--spice-body);
}

/* Search results are a reference list, not a preview — give them room, but
   still scroll rather than running hundreds of rows down the page. */
.spice-results__table-wrap--tall {
	max-height: calc( var(--spice-results-row-h) * 11 );
	border: 1px solid var(--spice-line);
	border-top: 0;
	border-radius: 0 0 var(--spice-radius) var(--spice-radius);
}

.spice-year-block .spice-results__table tr:not(.spice-results__row--winner) td:first-child {
	font-weight: 600;
	color: var(--spice-ink);
}
.spice-year-block .spice-results__table a { text-decoration: underline; text-underline-offset: .18em; }
.spice-year-block .spice-results__row--winner a { color: var(--spice-white); }

/* The category archive reuses the accordion's results panel, so it needs the
   same rounded frame the accordion item was giving it. */
.spice-year-block__panel {
	border: 1px solid var(--spice-line);
	border-top: 0;
	border-radius: 0 0 var(--spice-radius) var(--spice-radius);
	overflow: hidden;
}