/* =========================================================================
   Giant Coloured Tiles
   - Tiles are ALWAYS square (aspect-ratio:1) at any screen width.
   - Minimum 2 tiles per row on mobile.
   - Colour comes from the brand palette (auto-rotated or per-tile override).
   ========================================================================= */

.gct-tiles {
	--gct-columns: 3;
	--gct-columns-mobile: 2;
	--gct-gap: 24px;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(28px, 5vw, 64px) 0;
}

.gct-tiles.has-section-bg {
	background-color: var(--gct-section-bg);
}

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

.gct-tiles__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	/* padding-left: clamp(16px, 4vw, 32px);
	padding-right: clamp(16px, 4vw, 32px); */
}

.gct-tiles__title {
	text-align: center;
	margin: 0 0 clamp(24px, 4vw, 48px);
	font-weight: 700;
	color: var(--orange);
}

/* The grid: equal square columns. */
.gct-tiles__grid {
	display: grid;
	grid-template-columns: repeat(var(--gct-columns), minmax(0, 1fr));
	gap: var(--gct-gap);
}

#editor .gct-tiles__grid{
	grid-template-columns: unset;
}

/* The square. aspect-ratio keeps it square at every width. */
.gct-tile {
	--gct-tile-bg: #D31566;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--gct-tile-bg);
	color: #ffffff;
	overflow: hidden;
}

/* Centre the icon / heading / content inside the square. */
.gct-tile__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(12px, 6%, 40px);
	gap: clamp(6px, 1.5vw, 14px);
}

/* Default styling for the content blocks dropped inside a tile.
   These are intentionally light so Gutenberg's own controls can override. */
.gct-tile :where(h2, h3, h4),
.gct-tile .gct-tile__heading {
	margin: 0;
	color: inherit;
	line-height: 1.05;
	font-weight: 700;
}

.gct-tile :where(h2) {
	font-size: clamp(1.8rem, 5vw, 3.4rem);
}

.gct-tile :where(p) {
	margin: 0;
	color: inherit;
	line-height: 1.25;
	font-weight: 600;
	font-size: clamp(0.85rem, 1.6vw, 1.15rem);
}

.gct-tile :where(a) {
	color: inherit;
}

/* Icon / image: keep it modest and centred above the text. */
.gct-tile :where(figure),
.gct-tile .gct-tile__icon {
	margin: 0 0 clamp(4px, 1vw, 12px);
}

.gct-tile :where(figure img),
.gct-tile .gct-tile__icon img {
	display: block;
	width: clamp(40px, 22%, 90px);
	height: auto;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Mobile: minimum 2 tiles per row regardless of the desktop column count.
   ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.gct-tiles__grid {
		grid-template-columns: repeat(var(--gct-columns-mobile), minmax(0, 1fr));
		gap: clamp(12px, 3vw, 20px);
	}
}

/* -------------------------------------------------------------------------
   Editor adjustments so the square + grid preview correctly in Gutenberg.

   In the editor the tiles are wrapped by Gutenberg in
   .block-editor-inner-blocks > .block-editor-block-list__layout, and each
   tile sits inside a [data-block] wrapper. That wrapper layout — not
   .gct-tiles__grid — is the real flex/grid parent, so the grid must be
   applied there or the tiles stack on top of each other.
   ------------------------------------------------------------------------- */
.gct-tiles.is-editor .gct-tiles__grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(var(--gct-columns), minmax(0, 1fr));
	gap: var(--gct-gap);
}

@media (max-width: 781px) {
	.gct-tiles.is-editor .gct-tiles__grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(var(--gct-columns-mobile), minmax(0, 1fr));
		gap: clamp(12px, 3vw, 20px);
	}
}

/* The per-tile block wrapper must fill its grid cell and stay square. */
.gct-tiles.is-editor .gct-tiles__grid > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-block] {
	min-width: 0;
	margin: 0;
}

.gct-tile.is-editor {
	aspect-ratio: 1 / 1;
}

/* The default block list layout inside a tile should not break the centring. */
.gct-tile.is-editor .gct-tile__inner > .block-editor-inner-blocks,
.gct-tile.is-editor .gct-tile__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: 100%;
}

.gct-tile.is-editor .gct-tile__inner .block-editor-block-list__layout {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (max-width: 1200px){
	.gct-tile :where(h2) {
		font-size: clamp(1.2rem, 5vw, 2.4rem);
	}
}

@media screen and (max-width: 900px){
	.gct-tile :where(h2) {
		font-size: clamp(1.2rem, 5vw, 2rem);
	}
}

@media screen and (max-width: 450px){
	.gct-tiles__grid{
		grid-template-columns: auto;
	}
	.gct-tile :where(h2) {
	    font-size: clamp(3.2rem, 5vw, 4rem);
	}
}