/* ========================================================================================
 * tile.css - .tile, a photo tile that either opens an Anchor Universal Popup (a <button>
 * carrying the popup's trigger class) or links somewhere (an <a>), plus .tile-grid.
 *
 * Ported from the live course pages' "Why our course outshines the competition" grid
 * (docs/design-source/feedback-2026-09-25/11-tiles.png): a photo filling a rounded tile,
 * an uppercase label bottom-left over a scrim, and on hover/focus the tile lifts while a
 * "Find out more" line with a circled plus fades in under the label.
 *
 * The photo is the --media custom property (style="--media:url('...')"), so the markup
 * stays class-only. --tall/--short set the two row heights the live grid uses.
 * ======================================================================================== */

.tile-grid{display:grid;gap:var(--cd-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
	.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.tile-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.tile{
	position:relative;isolation:isolate;overflow:hidden;
	display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--cd-1);
	width:100%;aspect-ratio:4/3;margin:0;padding:var(--cd-5);
	border:0;border-radius:var(--cd-r-md);box-shadow:var(--cd-shadow-1);
	background:var(--cd-ground-deep) var(--media) center/cover no-repeat;
	color:var(--cd-white);text-align:left;text-decoration:none;font:inherit;cursor:pointer;
	transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;
}
.tile--tall{aspect-ratio:9/10}
.tile--short{aspect-ratio:16/10}
.tile::after{
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(to top,color-mix(in srgb,var(--cd-ground-deeper) 70%,transparent) 0%,color-mix(in srgb,var(--cd-ground-deeper) 18%,transparent) 42%,transparent 70%);
}
.tile__label{
	font-size:var(--cd-h3);font-weight:500;line-height:1.1;letter-spacing:.01em;
	text-transform:uppercase;color:var(--cd-white);text-wrap:balance;
}
.tile__more{
	display:inline-flex;align-items:center;gap:var(--cd-2);
	max-height:0;opacity:0;overflow:hidden;
	font-size:var(--cd-body);font-weight:500;color:var(--cd-white);
	transition:max-height .25s ease,opacity .25s ease;
}
.tile__icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.tile:hover,.tile:focus-visible{transform:translateY(-6px);box-shadow:var(--cd-shadow-2);color:var(--cd-white)}
.tile:hover .tile__more,.tile:focus-visible .tile__more{max-height:2em;opacity:1}
.tile:focus-visible{outline:3px solid var(--cd-focus);outline-offset:3px}
/* Touch screens have no hover: show the cue permanently so the tile still reads as tappable. */
@media (hover:none){.tile__more{max-height:2em;opacity:1}}
@media (prefers-reduced-motion:reduce){.tile,.tile__more{transition:none}.tile:hover,.tile:focus-visible{transform:none}}
/* Four across: the columns are narrow, so the label steps down to h4 to stay on one or
   two lines instead of stacking over the photo. */
@media (min-width:900px){.tile-grid--4 .tile__label{font-size:var(--cd-h4)}}