/*
Theme Name: ICT Department
Theme URI: https://example.edu/ict
Author: ICT Department
Description: An accessible, institutional block theme for an Information and Communication Technology department.
Requires at least: 7.0
Requires PHP: 7.2
Version: 0.8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ict-department
Tags: block-patterns, block-styles, full-site-editing, accessibility-ready, education
*/

:root {
	--ict-container: var(--wp--style--global--wide-size, 72rem);
	--ict-page-gutter: var(--wp--preset--spacing--30);
	--ict-reading-width: 48rem;
	--ict-radius: 8px;
	--ict-border: 1px solid var(--wp--preset--color--slate-200);
	--ict-shadow: var(--wp--preset--shadow--card);
	--ict-shadow-hover: var(--wp--preset--shadow--elevated);
	--ict-shadow-media: var(--wp--preset--shadow--large);
	--ict-grid-gap: var(--wp--preset--spacing--40);
	--ict-section-space: 6rem;
	--ict-header-height: 5rem;
	--ict-transition: 180ms ease;
	--ict-tap-size: 2.75rem;
	--ict-focus: var(--wp--preset--color--teal);
}

/* Dark surfaces switch the focus ring to a light teal so it keeps 3:1 contrast. */
:is(
	.has-ink-background-color,
	.has-teal-background-color,
	.ict-hero,
	.ict-footer,
	.ict-stat-strip,
	.ict-vision-panel,
	.ict-media-slot
) {
	--ict-focus: var(--wp--preset--color--teal-200);
}

html {
	/* Keeps a focused or targeted element clear of the sticky header (WCAG 2.4.11). */
	scroll-padding-top: calc(var(--ict-header-height) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* Zero-specificity heading scale so presets, block classes, and inline sizes
 * always win, while plain headings in page content still follow the type scale. */
:where(h2) {
	font-size: var(--wp--preset--font-size--x-large);
}

:where(h3) {
	font-size: var(--wp--preset--font-size--large);
}

:where(h4) {
	font-size: var(--wp--preset--font-size--h4);
}

:where(h5, h6) {
	font-size: var(--wp--preset--font-size--medium);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, blockquote) {
	text-wrap: pretty;
}

.wp-site-blocks {
	overflow-x: clip;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Accessibility utilities. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.skip-link.screen-reader-text:focus {
	z-index: 100000;
	top: var(--wp--preset--spacing--10);
	left: var(--wp--preset--spacing--10);
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	border-radius: var(--ict-radius);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	outline: 3px solid var(--wp--preset--color--teal-200);
	outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--ict-focus);
	outline-offset: 3px;
}

/* Buttons and actions. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	min-height: var(--ict-tap-size);
	align-items: center;
	justify-content: center;
	line-height: 1.5;
	transition:
		background-color var(--ict-transition),
		border-color var(--ict-transition),
		color var(--ict-transition),
		box-shadow var(--ict-transition);
}

/* White primary button on a teal surface. WordPress preset classes use
 * !important, so the hover state has to as well. */
.wp-block-button > .wp-block-button__link.has-white-background-color:hover {
	background-color: var(--wp--preset--color--teal-50) !important;
	color: var(--wp--preset--color--teal) !important;
}

/* Outline buttons for dark surfaces (editor Block Style "Outline on dark"). */
.wp-block-button.is-style-outline-light > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white);
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

:where(.wp-element-button, .wp-block-button__link):disabled,
:where(.wp-element-button, .wp-block-button__link)[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* Site header: sticky 80px bar. The sticky element is the template-part
 * wrapper, because sticky only works against a tall parent. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	z-index: 50;
	top: var(--wp-admin--admin-bar--height, 0px);
}

.ict-site-header {
	border-bottom: var(--ict-border);
	background: var(--wp--preset--color--white);
}

.ict-site-header > .wp-block-group {
	min-height: var(--ict-header-height);
	gap: var(--wp--preset--spacing--20);
}

.ict-site-header .wp-block-site-title {
	line-height: 1;
}

.ict-site-header .wp-block-site-title a {
	display: inline-flex;
	min-width: var(--ict-tap-size);
	min-height: var(--ict-tap-size);
	align-items: center;
	text-decoration: none;
}

.ict-site-header .wp-block-navigation-item__content {
	display: inline-flex;
	min-height: var(--ict-tap-size);
	padding: 0 0.25rem;
	align-items: center;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-decoration: none;
}

.ict-site-header .wp-block-navigation-item__content:hover,
.ict-site-header .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.ict-site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.ict-site-header .wp-block-navigation__responsive-container-open,
.ict-site-header .wp-block-navigation__responsive-container-close {
	min-width: var(--ict-tap-size);
	min-height: var(--ict-tap-size);
	padding: 0;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--teal);
}

/* Links opened inside the mobile menu take a larger, easier target. */
.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--intro);
}

.ict-site-header .wp-block-buttons {
	flex-shrink: 0;
}

.ict-site-header .wp-block-button__link {
	/* The 2px border is part of every button, so the padding gives it back. */
	padding: calc(0.5rem - 2px) calc(1rem - 2px);
	font-size: var(--wp--preset--font-size--small);
}

/* Submenus: the parent item links to its own page and a separate chevron button opens the dropdown. */
.ict-site-header .wp-block-navigation__submenu-icon {
	display: inline-flex;
	min-width: var(--ict-tap-size);
	min-height: var(--ict-tap-size);
	margin-inline: -0.75rem -0.5rem;
	padding: 0;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--slate);
}

.ict-site-header .wp-block-navigation__submenu-icon svg {
	stroke: currentcolor;
}

.ict-site-header .wp-block-navigation__submenu-icon:hover {
	color: var(--wp--preset--color--teal);
}

/* A parent whose child page is open reads as the current section. */
.ict-site-header .wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container [aria-current="page"]) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Desktop: the menu sits in the bar and submenus drop down as a card. */
@media (min-width: 1200px) {
	.wp-block-navigation-item.ict-nav-mobile-only {
		display: none;
	}

	/* Core sizes the open panel with a long selector; match it so the panel can hold a full page title. */
	.ict-site-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded] ~ .wp-block-navigation__submenu-container {
		width: max-content;
		min-width: 15rem;
		max-width: 22rem;
	}

	.ict-site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		padding: 0.5rem;
		border: var(--ict-border);
		border-radius: var(--ict-radius);
		background: var(--wp--preset--color--white);
		box-shadow: var(--ict-shadow-hover);
	}

	.ict-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		width: 100%;
		padding: 0 0.75rem;
		border-radius: 6px;
		text-decoration: none;
	}

	.ict-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.ict-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--teal-50);
		text-decoration: none;
	}
}

/* Core folds the menu into the hamburger below 600px. Seven items and their
 * dropdowns need about 1110px, so the fold stays until 1200px and the bar keeps
 * its single 80px row. */
@media (min-width: 600px) and (max-width: 1199px) {
	.ict-site-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ict-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default, .is-menu-open) {
		display: none;
	}
}

/* The Portal button moves into the menu wherever the menu is folded. */
@media (max-width: 1199px) {
	.ict-site-header .wp-block-button.is-style-outline {
		display: none;
	}

	/* The portal header has no overlay menu to fall back on, so its link stays visible. */
	.ict-site-header--portal .wp-block-button.is-style-outline {
		display: inline-block;
	}
}

/* Folded menu: a left-aligned list where sub-pages sit indented under their parent. */
.ict-site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) {
	align-items: stretch;
}

.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding-block: 0.25rem;
	border-bottom: var(--ict-border);
}

.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	font-size: var(--wp--preset--font-size--medium);
}

.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--intro);
	font-weight: 600;
}

.ict-site-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	margin-inline-start: 0.25rem;
	padding: 0 0 0.25rem 1rem;
	border-inline-start: 2px solid var(--wp--preset--color--teal-100);
	gap: 0;
}

/* Hero: centred, 600px, with a uniform dark overlay for image legibility. */
.ict-hero {
	min-height: 37.5rem;
	padding-block: var(--wp--preset--spacing--60);
	background:
		radial-gradient(circle at 78% 30%, rgb(60 140 151 / 26%), transparent 34%),
		var(--wp--preset--color--ink);
	background-position: center;
	background-size: cover;
	text-align: center;
}

.ict-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--ict-container);
	margin-inline: auto;
}

.ict-hero h1 {
	max-width: 48rem;
	margin-inline: auto;
}

.ict-hero .has-intro-font-size {
	max-width: 42rem;
	margin-inline: auto;
	line-height: 1.6;
}

.ict-hero .wp-block-buttons {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--20);
}

.ict-eyebrow,
.ict-section-label {
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ict-hero .ict-eyebrow,
.has-white-color .ict-eyebrow,
.has-white-color .ict-section-label {
	color: var(--wp--preset--color--teal-200);
}

.ict-announcement {
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: var(--ict-border);
	background: var(--wp--preset--color--teal-50);
	font-size: var(--wp--preset--font-size--medium);
}

.ict-announcement p {
	margin-block: 0;
	line-height: 1.5;
}

.ict-announcement strong {
	display: inline-flex;
	margin-right: var(--wp--preset--spacing--10);
	padding: 0.25rem 0.5rem;
	align-items: center;
	border-radius: 4px;
	background: var(--wp--preset--color--amber-100);
	color: var(--wp--preset--color--amber-800);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
}

/* Shared section and layout rhythm: 96px desktop, 64px tablet, 48px mobile. */
.ict-section {
	position: relative;
	display: flow-root;
	clear: both;
	padding-block: var(--ict-section-space);
	isolation: isolate;
}

.ict-section--muted {
	background: var(--wp--preset--color--muted);
}

.ict-section--teal-50 {
	background: var(--wp--preset--color--teal-50);
}

/* Wide content is capped by theme.json (wideSize); the root padding supplies the gutters. */
.ict-section > :where(
	.wp-block-columns,
	.wp-block-query,
	.wp-block-group.alignwide,
	.wp-block-ict-department-card-grid,
	.wp-block-ict-department-event-list,
	.wp-block-ict-department-timeline,
	.wp-block-ict-department-faq,
	.wp-block-ict-department-media-card-grid,
	.wp-block-ict-department-people-grid,
	.wp-block-gallery
) {
	margin-block-start: 0;
}

/* Consecutive rows inside one section keep the grid rhythm. */
.ict-section > :where(.wp-block-columns, .wp-block-group.alignwide, .wp-block-ict-department-card-grid) + :where(.wp-block-columns, .wp-block-group.alignwide, .wp-block-ict-department-card-grid) {
	margin-block-start: var(--ict-grid-gap);
}

.ict-section :where(.wp-block-columns, .wp-block-post-template) {
	gap: var(--ict-grid-gap);
}

.ict-section .wp-block-column,
.ict-section .wp-block-post {
	min-width: 0;
}

/* Reusable grids for pattern authors. Add `ict-grid` plus a column modifier to
 * a Group or Columns block; the utility owns the responsive column count. */
.ict-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--ict-grid-columns, 4), minmax(0, 1fr));
	gap: var(--ict-grid-gap);
	align-items: stretch;
}

.ict-grid--4 {
	--ict-grid-columns: 4;
}

.ict-grid--3 {
	--ict-grid-columns: 3;
}

.ict-grid--2 {
	--ict-grid-columns: 2;
}

.ict-grid--compact {
	gap: var(--wp--preset--spacing--20);
}

.ict-grid--tight {
	gap: var(--wp--preset--spacing--10);
}

.ict-grid > * {
	min-width: 0;
	margin: 0;
}

.ict-card-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.ict-card-stack > * {
	margin-block: 0;
}

/* Four-stage journeys use the same responsive grid with a quiet connector
 * behind the numbered markers. The alias keeps the utility self-documenting. */
.ict-grid--journey,
.ict-journey-grid {
	position: relative;
}

.ict-grid--journey::before,
.ict-journey-grid::before {
	position: absolute;
	top: calc(2rem - 1px);
	right: 12.5%;
	left: 12.5%;
	height: 2px;
	background: var(--wp--preset--color--teal-200);
	content: "";
}

.ict-grid--journey > *,
.ict-journey-grid > * {
	position: relative;
	z-index: 1;
}

.ict-section > :is(.wp-block-columns, .wp-block-ict-department-card-grid) + :is(.wp-block-heading, .wp-block-ict-department-section-header) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.ict-section__heading {
	max-width: var(--ict-reading-width);
	margin-inline: auto;
	text-align: center;
}

.ict-section__heading > :last-child {
	margin-bottom: 0;
}

/* Shared card surfaces. */
.ict-card,
.ict-quick-link,
.ict-programme-card,
.ict-faculty-card,
.ict-news-card,
.ict-project-card,
.ict-resource-card {
	border: var(--ict-border);
	border-radius: var(--ict-radius);
	background: var(--wp--preset--color--white);
	box-shadow: var(--ict-shadow);
}

.ict-quick-link,
.ict-programme-card,
.ict-faculty-card,
.ict-news-card,
.ict-project-card {
	height: 100%;
}

.ict-programme-card,
.ict-faculty-card,
.ict-news-card,
.ict-project-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

:is(.ict-programme-card, .ict-faculty-card, .ict-news-card, .ict-project-card) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	width: 100%;
	max-width: none;
}

/* Interactive cards lift their shadow; they never move (design system). */
:is(.ict-programme-card, .ict-news-card, .ict-project-card, .ict-card):hover {
	box-shadow: var(--ict-shadow-hover);
}

.ict-card,
.ict-programme-card,
.ict-news-card,
.ict-project-card {
	transition: box-shadow var(--ict-transition), border-color var(--ict-transition);
}

/* News cards: the title link covers the card; "Read more" and the image sit above it. */
.ict-news-card {
	position: relative;
}

.ict-news-card .wp-block-post-title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.ict-news-card .wp-block-post-title a:focus-visible {
	outline: 0;
}

.ict-news-card:has(.wp-block-post-title a:focus-visible) {
	outline: 3px solid var(--ict-focus);
	outline-offset: 3px;
}

.ict-news-card .wp-block-post-title a {
	text-decoration: none;
}

.ict-news-card .wp-block-read-more {
	position: relative;
	z-index: 1;
	display: inline-flex;
	min-height: var(--ict-tap-size);
	align-items: center;
	font-weight: 600;
	text-decoration: none;
}

.ict-news-card .wp-block-read-more:hover {
	text-decoration: underline;
}

/* Card title used by core Heading blocks inside card compositions. */
.ict-card__title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	line-height: 1.3;
}

.ict-card__meta {
	margin-block: 0;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

.ict-card__date {
	margin-block: 0;
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ict-card__title--lg {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--large);
}

.ict-card__body {
	padding: var(--wp--preset--spacing--20);
}

/* A single card centred at the design's narrow width (research feature). */
.ict-section > .ict-card--narrow {
	max-width: 56rem;
}

/* Full-width action row inside a card. */
.ict-buttons--block .wp-block-button,
.ict-buttons--block .wp-block-button__link {
	width: 100%;
}

/* Play button: a pill with a play glyph, for the video spotlight. */
.ict-button--play .wp-block-button__link::before {
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.5rem;
	background-color: currentColor;
	-webkit-mask: var(--ict-icon-play) center / contain no-repeat;
	mask: var(--ict-icon-play) center / contain no-repeat;
	content: "";
}

/* Quick links built from core blocks: the whole tile is the hit area. */
.ict-quick-link {
	position: relative;
	display: flex;
	min-height: 7rem;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
	transition: border-color var(--ict-transition), box-shadow var(--ict-transition);
}

.ict-quick-link:hover {
	border-color: var(--wp--preset--color--teal);
	box-shadow: var(--ict-shadow-hover);
}

.ict-quick-link p {
	margin: 0;
}

.ict-quick-link a {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	text-decoration: none;
}

.ict-quick-link a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.ict-quick-link a:focus-visible {
	outline: 0;
}

.ict-quick-link:has(a:focus-visible) {
	outline: 3px solid var(--ict-focus);
	outline-offset: 3px;
}

/* Media and image cards. A Cover with the .ict-media-slot class is a designed
 * image slot: it reads as intentional artwork until an approved image is chosen. */
.ict-media-slot {
	min-height: 18rem;
	border: 0;
	border-radius: var(--ict-radius);
	background:
		radial-gradient(circle at 85% 15%, rgb(255 255 255 / 14%), transparent 40%),
		linear-gradient(135deg, var(--wp--preset--color--teal-700), var(--wp--preset--color--teal));
	box-shadow: var(--ict-shadow-media);
	overflow: clip;
}

.ict-media-slot .wp-block-cover__background {
	background: linear-gradient(135deg, rgb(43 93 103 / 92%), rgb(0 91 92 / 82%));
	opacity: 1;
}

/* With a photo chosen, the overlay is the author's Cover "Overlay opacity" setting. */
.ict-media-slot:has(.wp-block-cover__image-background) {
	background: var(--wp--preset--color--ink);
}

.ict-media-slot .wp-block-cover__inner-container {
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.ict-media-slot .wp-block-cover__inner-container p {
	max-width: 18rem;
	margin-inline: auto;
}

/* Wide 16:9 slot beside copy (about, industry, community, learning). */
.ict-media-slot--video {
	min-height: 0;
	aspect-ratio: 16 / 9;
}

/* Placeholder: an image slot with no photo chosen shows the brand placeholder
 * illustration instead of an empty box. The overlay only exists to protect text
 * on a photo, so it is hidden until a photo is chosen. */
.ict-placeholder,
.ict-media-slot:not(:has(.wp-block-cover__image-background)):not(.ict-media-slot--feature) {
	background: var(--ict-placeholder) center / cover no-repeat var(--wp--preset--color--teal-100);
}

.ict-media-slot:not(:has(.wp-block-cover__image-background)):not(.ict-media-slot--feature) > .wp-block-cover__background {
	display: none;
}

/* Dark variant where white text sits on the slot (hero, video spotlight). Every
 * shape in it is teal-600 or darker, so white text keeps at least 5:1 contrast. */
:is(.ict-hero, .ict-media-slot--feature):not(:has(.wp-block-cover__image-background)) {
	background: var(--ict-placeholder-dark) center bottom / cover no-repeat var(--wp--preset--color--ink);
}

:is(.ict-hero, .ict-media-slot--feature):not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background {
	display: none;
}

/* Core Image and Featured Image blocks with no image (see functions.php). */
.ict-image-placeholder {
	margin: 0;
}

.ict-image-placeholder__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--ict-placeholder-ratio, 16 / 10);
	border-radius: var(--ict-radius);
	background: var(--ict-placeholder) center / cover no-repeat var(--wp--preset--color--teal-100);
}

.ict-news-card .ict-image-placeholder__media {
	border-radius: 0;
}

/* A slot that carries content (the video spotlight) must grow with it. */
.ict-media-slot--feature {
	min-height: 0;
}

@media (max-width: 781px) {
	.ict-media-slot--feature {
		min-height: 22rem;
		aspect-ratio: auto;
	}
}

.ict-portrait.ict-media-slot {
	width: min(100%, 16rem);
	min-height: 0;
	margin-inline: auto;
	border: 4px solid var(--wp--preset--color--teal);
	aspect-ratio: 1;
	align-self: center;
	border-radius: 50%;
}

.ict-person-name {
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
}

.ict-person-role {
	margin-block: var(--wp--preset--spacing--10) 0;
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--medium);
}

.ict-media-grid > .wp-block-column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	border: var(--ict-border);
	border-radius: var(--ict-radius);
	background: var(--wp--preset--color--white);
	box-shadow: var(--ict-shadow);
	overflow: clip;
}

.ict-media-grid > .wp-block-column > * {
	width: 100%;
	margin-block-start: 0;
}

.ict-media-grid > .wp-block-column > .ict-media-slot {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ict-media-grid > .wp-block-column > .wp-block-heading {
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
}

.ict-media-grid > .wp-block-column > p {
	margin: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--slate);
}

/* Core Gallery used for the "Life at ICT" photos: equal 4:3 tiles, any number of images. */
.ict-gallery figure.wp-block-image {
	border-radius: var(--ict-radius);
	overflow: clip;
	aspect-ratio: 4 / 3;
}

.ict-gallery figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ict-image-card img,
.ict-feature-image img,
.ict-gallery-grid img {
	border-radius: var(--ict-radius);
	object-fit: cover;
}

.ict-image-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
}

.ict-faculty-card,
.ict-news-card,
.ict-project-card,
.wp-block-columns.ict-card {
	overflow: clip;
}

.ict-faculty-card > *,
.ict-news-card > *,
.ict-project-card > * {
	margin-block-start: 0;
}

.ict-faculty-card > .ict-media-slot,
.ict-news-card > .ict-media-slot,
.ict-project-card > .ict-media-slot {
	width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.wp-block-columns.ict-card {
	gap: 0;
}

.wp-block-columns.ict-card .ict-media-slot {
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Editorial pattern components. */
.ict-split-copy {
	max-width: 34rem;
}

.ict-lead {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.6;
}

.ict-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ict-check-list li {
	position: relative;
	margin-block: var(--wp--preset--spacing--10);
	padding-left: 2rem;
	color: var(--wp--preset--color--slate-700);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
}

.ict-check-list li::before {
	position: absolute;
	top: 0.1rem;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	background-color: var(--wp--preset--color--teal);
	-webkit-mask: var(--ict-icon-check) center / contain no-repeat;
	mask: var(--ict-icon-check) center / contain no-repeat;
	content: "";
}

.ict-vision-panel {
	border-radius: var(--ict-radius);
	background: var(--wp--preset--color--teal);
	box-shadow: var(--ict-shadow-hover);
	color: var(--wp--preset--color--white);
}

.ict-vision-panel__title {
	display: flex;
	margin-block: 0 var(--wp--preset--spacing--10);
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.ict-vision-panel__title::before {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--ict-icon-eye) center / contain no-repeat;
	mask: var(--ict-icon-eye) center / contain no-repeat;
	content: "";
}

.ict-badge {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 99rem;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
}

.ict-chip-row {
	display: flex;
	max-width: 56rem;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ict-chip-row li {
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--teal);
	border-radius: 99rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.ict-programme-card {
	padding: var(--wp--preset--spacing--30);
}

.ict-programme-card .ict-card__title {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--large);
}

.ict-programme-card .wp-block-buttons {
	width: 100%;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	gap: var(--wp--preset--spacing--10);
}

.ict-programme-card .wp-block-button {
	flex: 1 1 9rem;
}

.ict-programme-card .wp-block-button__link {
	width: 100%;
}

.ict-stat-strip {
	padding-block: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}

.ict-stat-strip .wp-block-columns {
	margin-block: 0;
	gap: var(--wp--preset--spacing--30);
}

.ict-stat-strip p {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ict-stat-strip strong {
	display: block;
	margin-block-end: 0.25rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ict-section .wp-block-quote {
	margin-inline: 0;
	padding-left: var(--wp--preset--spacing--20);
	border-left: 4px solid var(--wp--preset--color--teal);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--intro);
	font-style: italic;
	line-height: 1.6;
}

.ict-section .wp-block-quote p {
	margin-block: 0;
}

/* FAQ. The whole summary row is the control, so it carries the padding. */
.ict-section .wp-block-details {
	padding: 0;
	border: var(--ict-border);
	border-radius: var(--ict-radius);
	background: var(--wp--preset--color--white);
	overflow: clip;
}

.ict-section .wp-block-details + .wp-block-details {
	margin-block-start: var(--wp--preset--spacing--10);
}

.ict-section .wp-block-details summary {
	min-height: var(--ict-tap-size);
	padding: 0.85rem var(--wp--preset--spacing--20);
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.ict-section .wp-block-details summary:focus-visible {
	outline-offset: -3px;
}

.ict-section .wp-block-details[open] summary {
	border-bottom: var(--ict-border);
}

.ict-section .wp-block-details > :not(summary) {
	margin-inline: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--slate);
}

.ict-section .wp-block-details > :not(summary):first-of-type {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ict-section .wp-block-details > :last-child {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Content tables (fees, schedules). */
.wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-table table :is(th, td) {
	padding: 0.75rem var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--slate-200);
	text-align: left;
}

.wp-block-table table thead {
	border-bottom: 0;
}

.wp-block-table table thead th {
	border-bottom: 2px solid var(--wp--preset--color--teal);
	background: var(--wp--preset--color--teal-50);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

@media (max-width: 600px) {
	.wp-block-table table {
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-table table :is(th, td) {
		padding: 0.625rem 0.75rem;
		overflow-wrap: normal;
	}
}

@media (max-width: 400px) {
	.wp-block-table table :is(th, td) {
		padding: 0.5rem;
	}
}

/* Contact strip. */
.ict-contact-line {
	margin-block: 0;
}

.ict-contact-line a {
	display: inline-flex;
	min-height: var(--ict-tap-size);
	align-items: center;
}

/* Footer: brand, two link columns, legal line. */
.ict-footer {
	border-top: 4px solid var(--wp--preset--color--teal);
}

.ict-footer .wp-block-site-title {
	color: var(--wp--preset--color--white);
}

.ict-footer .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

/* Social icons: 44px targets, slate at rest, white on hover. */
.ict-footer .ict-footer__social {
	margin-block-start: var(--wp--preset--spacing--20);
	/* The 44px hit area is wider than the 24px icon; pull the row back so the icons line up with the text. */
	margin-inline-start: -0.65rem;
	gap: 0;
}

.ict-footer .ict-footer__social .wp-social-link a {
	display: inline-flex;
	min-width: var(--ict-tap-size);
	min-height: var(--ict-tap-size);
	padding: 0;
	align-items: center;
	justify-content: center;
}

.ict-footer .ict-footer__social .wp-social-link a:hover {
	color: var(--wp--preset--color--white);
}

.ict-footer a,
.ict-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--slate-400);
	font-weight: 500;
}

.ict-footer a:hover,
.ict-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--teal-200);
}

.ict-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--medium);
}

.ict-footer .wp-block-navigation__container {
	gap: 0;
}

.ict-footer .wp-block-navigation-item__content {
	display: inline-flex;
	min-height: var(--ict-tap-size);
	align-items: center;
	text-decoration: none;
}

.ict-footer .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Tablet layouts: prevent multi-column rows collapsing into long single lists. */
@media (min-width: 782px) and (max-width: 1023px) {
	:root {
		--ict-section-space: 4rem;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	:root {
		--ict-grid-gap: var(--wp--preset--spacing--30);
	}

	.ict-section > .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		flex-wrap: wrap;
	}

	.ict-section > .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex-basis: calc(50% - (var(--ict-grid-gap) / 2)) !important;
	}

	.ict-section .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ict-grid {
		--ict-grid-columns: 2;
	}

	.ict-grid--journey::before,
	.ict-journey-grid::before {
		content: none;
	}
}

@media (max-width: 1023px) {
	.ict-stat-strip .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ict-stat-strip .wp-block-column {
		margin: 0;
	}
}

@media (max-width: 781px) {
	:root {
		--ict-section-space: var(--wp--preset--spacing--60);
	}

	.ict-site-header > .wp-block-group,
	.ict-site-header .wp-block-group {
		row-gap: var(--wp--preset--spacing--10);
	}

	.ict-hero {
		min-height: 34rem;
	}

	.ict-section > :is(.wp-block-columns, .wp-block-ict-department-card-grid) + :is(.wp-block-heading, .wp-block-ict-department-section-header) {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.wp-block-columns.ict-card {
		gap: 0;
	}

	.wp-block-columns.ict-card .wp-block-column + .wp-block-column {
		border-top: var(--ict-border);
	}

	.wp-block-columns.ict-card .ict-media-slot {
		min-height: 14rem;
	}

	.ict-footer .wp-block-columns {
		row-gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 599px) {
	:root {
		--ict-grid-gap: var(--wp--preset--spacing--20);
		--ict-section-space: var(--wp--preset--spacing--50);
	}

	body,
	.editor-styles-wrapper {
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
	}

	.ict-grid {
		--ict-grid-columns: 1;
	}

	/* Short tiles stay two across, as in the design. */
	.ict-grid.ict-grid--stats,
	.ict-grid.ict-grid--tiles,
	.ict-grid.ict-grid--tight {
		--ict-grid-columns: 2;
	}

	.ict-grid--journey::before,
	.ict-journey-grid::before {
		content: none;
	}

	.ict-hero {
		min-height: 31rem;
		padding-block: var(--wp--preset--spacing--50);
	}

	.ict-hero .wp-block-buttons,
	.ict-programme-card .wp-block-buttons {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.ict-hero .wp-block-button,
	.ict-hero .wp-block-button__link,
	.ict-programme-card .wp-block-button,
	.ict-programme-card .wp-block-button__link {
		width: 100%;
	}

	.ict-programme-card .wp-block-button {
		flex: 0 0 auto;
	}

	.ict-programme-card {
		padding: var(--wp--preset--spacing--20);
	}

	.ict-section .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Windows High Contrast and other forced-colour modes drop backgrounds and
 * shadows, so surfaces and controls need real borders. */
@media (forced-colors: active) {
	.ict-card,
	.ict-quick-link,
	.ict-programme-card,
	.ict-news-card,
	.ict-project-card,
	.ict-chip-row li,
	.ict-badge,
	.wp-block-button__link {
		border: 1px solid CanvasText;
	}

	:where(a, button, input, select, textarea, summary):focus-visible {
		outline-color: Highlight;
	}
}