/*
 * Homepage-only rules.
 *
 * Everything the homepage shares with the rest of the site — tokens, header,
 * hero slider, ad banner, `.pca-grid`, `.pca-card`, `.btn`, `.pca-field`,
 * sponsors, footer — already lives in `public.css` and is not repeated here.
 * What remains is the action grid, the award-category grid, the special-category
 * line and the registration modal.
 *
 * Action-grid metrics are copied value-for-value from the reference prototype
 * (`/tmp/pca/pca-web/index.html`, lines 163-215) including both of its
 * breakpoints. The only substitutions are colour: raw hex and raw brand tokens
 * become the semantic tokens so dark mode remaps them for free, and physical
 * properties become logical ones so RTL mirrors.
 */

/* ==========================================================================
   1. Action grid
   ========================================================================== */

.actions-section {
	padding: 20px 0 44px;
	text-align: center;
}

.actions-heading h3 {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 900;
	color: var(--heading-ink);
	margin: 0;
}

.actions-heading .ar {
	display: block;
	direction: rtl;
	font-size: clamp(17px, 2.6vw, 24px);
	font-weight: 800;
	color: var(--blue-bright);
	margin-top: 4px;
}

.actions-grid {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: 640px;
	margin-inline: auto;
}

.action-card {
	/* `--heading-ink` is `--navy-deep` in light mode, so this is the prototype's
	   2px navy outline exactly; in dark mode it flips to a legible light hairline
	   instead of disappearing into the background. */
	border: 2px solid var(--heading-ink);
	border-radius: 16px;
	background: var(--card-bg);
	padding: 14px 8px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.action-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.icon-box {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.icon-box svg {
	width: 44px;
	height: 44px;
}

.action-card .en {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--body-ink);
	line-height: 1.2;
}

.action-card .ar {
	direction: rtl;
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	margin-top: 2px;
	line-height: 1.3;
}

/* `.ar` marks the *secondary* line, which is English once the visitor switches
   the site to Arabic. The emitted `dir` attribute is the source of truth, so it
   has to win over the prototype's blanket `direction: rtl`. */
.actions-heading .ar[dir='ltr'],
.action-card .ar[dir='ltr'],
.special-category .ar[dir='ltr'] {
	direction: ltr;
}

.action-card.primary {
	border-color: var(--navy-darker);
	background: var(--navy-deep);
}

.action-card.primary .en {
	color: #fff;
}

.action-card.primary .ar {
	color: var(--blue-soft);
}

.action-card.primary:hover {
	background: var(--navy-darker);
}

@media (max-width: 900px) {
	.actions-grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: 520px;
	}
}

@media (max-width: 480px) {
	.actions-grid {
		gap: 10px;
		grid-template-columns: repeat(3, 1fr);
		max-width: 360px;
	}

	.action-card {
		padding: 10px 4px 10px;
		border-radius: 14px;
	}

	.icon-box {
		width: 46px;
		height: 46px;
		margin-bottom: 6px;
	}

	.icon-box svg {
		width: 32px;
		height: 32px;
	}

	.action-card .en {
		font-size: 10.5px;
	}

	.action-card .ar {
		font-size: 9.5px;
	}
}

/* ==========================================================================
   2. Award category grid
   ========================================================================== */

.categories-section {
	padding: 8px 0 48px;
}

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 22px 16px 20px;
}

.category-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2px;
}

.category-icon svg {
	width: 48px;
	height: 48px;
}

.category-title {
	margin: 0;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.25;
	color: var(--heading-ink);
}

.category-title-secondary {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--blue-bright);
}

.category-subtitle {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--muted);
}

.category-register {
	/* Pushes every card's button onto a common baseline however tall the titles
	   above it run, so a row of cards never looks ragged. */
	margin-block-start: auto;
	padding-block-start: 12px;
	font-size: 14px;
	padding: 10px 22px;
	flex-direction: column;
	gap: 1px;
}

.category-register .ar {
	direction: rtl;
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0.85;
}

.category-register .ar[dir='ltr'] {
	direction: ltr;
}

@media (max-width: 639px) {
	.category-card {
		padding: 16px 10px 16px;
	}

	.category-icon {
		width: 46px;
		height: 46px;
	}

	.category-icon svg {
		width: 40px;
		height: 40px;
	}

	.category-title {
		font-size: 13px;
	}

	.category-title-secondary,
	.category-subtitle {
		font-size: 11.5px;
	}

	.category-register {
		font-size: 12.5px;
		padding: 9px 16px;
	}
}

/* ==========================================================================
   3. "Special category?" contact line
   ========================================================================== */

.special-category {
	margin: 28px 0 0;
	text-align: center;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--muted);
}

.special-category .en,
.special-category .ar {
	display: block;
}

.special-category .ar {
	direction: rtl;
	font-size: 13px;
}

.special-category a {
	color: var(--blue-bright);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   4. Registration modal
   ========================================================================== */

.pca-modal {
	position: fixed;
	inset: 0;
	z-index: 180;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 10, 30, 0.78);
	overflow-y: auto;
}

.pca-modal[hidden] {
	display: none;
}

.pca-modal-box {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin-block: auto;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 28px 26px 24px;
}

.pca-modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--card-border);
	background: transparent;
	color: var(--heading-ink);
	font-size: 24px;
	line-height: 1;
	padding: 0;
}

.pca-modal-close:hover {
	background: var(--blue-pale);
}

.pca-modal-head {
	text-align: center;
	margin-bottom: 20px;
	padding-inline: 30px;
}

.pca-modal-head h2 {
	margin: 0;
	font-size: clamp(19px, 2.6vw, 25px);
	font-weight: 900;
	color: var(--heading-ink);
}

.pca-modal-head .ar {
	display: block;
	direction: rtl;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 800;
	color: var(--blue-bright);
}

.pca-modal-head .ar[dir='ltr'] {
	direction: ltr;
}

.pca-modal-category {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--muted);
}

.pca-modal-category strong {
	font-size: 15px;
	font-weight: 900;
	color: var(--heading-ink);
}

.pca-modal-category:empty {
	display: none;
}

.pca-modal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 18px;
	margin-bottom: 14px;
}

.pca-modal-grid + .pca-field,
.pca-register-form .pca-field + .pca-field {
	margin-bottom: 14px;
}

.pca-register-form input[type='file'] {
	padding: 9px 12px;
	font-size: 13.5px;
}

.pca-modal-note {
	margin: 4px 0 18px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
}

.pca-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 639px) {
	.pca-modal {
		padding: 12px;
	}

	.pca-modal-box {
		padding: 24px 18px 20px;
	}

	.pca-modal-grid {
		grid-template-columns: 1fr;
	}

	.pca-modal-actions .btn {
		flex: 1 1 140px;
	}
}

/* The modal is a scroll trap while open; the class is set by pages/home.js. */
body.pca-modal-open {
	overflow: hidden;
}