/**
 * Academy catalogue (archive-courses.php) — navy hero + square course cards.
 * Tokens only, radius 0 (global reset), approved hover-lift motion (CLAUDE.md §18).
 *
 * @package Alrasly
 */

/* ---------- hero ---------- */
.acad-hero{ background:var(--navy); color:var(--white); padding-block:var(--space-8); }
/* .acad-hero__inner also carries .container (centred 1040 wrapper); keep its width
   so the copy left-aligns with the footer/nav. Constrain the text lines instead. */
.acad-hero__inner{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-8); align-items:center; }
.acad-hero__kicker{ display:flex; align-items:center; gap:var(--space-2); color:var(--sky); margin:0 0 var(--space-3); }
.acad-hero__tick{ display:inline-flex; }
.acad-hero__title{ font-size:var(--fs-h1); line-height:var(--lh-h1); color:var(--white); margin:0 0 var(--space-4); max-width:20ch; }
.acad-hero__lead{ font-size:var(--fs-body-lg); color:rgba(255,255,255,.82); margin:0; max-width:60ch; }
.acad-hero__device{ display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:60px; align-self:center; }
.acad-hero__cell{ display:block; background:var(--blue); }
.acad-hero__cell--navy{ background:var(--navy-active); }
.acad-hero__cell--blue{ background:var(--blue); }
.acad-hero__cell--purple{ background:var(--purple-blue); }
.acad-hero__cell--sky{ background:var(--sky); }
.acad-hero__cell--quiet{ background:rgba(255,255,255,.12); }
.acad-hero__cell--wide{ grid-column:span 2; }
.acad-hero__cell--tall{ grid-row:span 2; }
.js .acad-hero__device[data-reveal]{ opacity:1; transform:none; transition:none; }
.js .acad-hero__device[data-reveal] .acad-hero__cell{ opacity:0; transform:translateY(12px); transition:opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1); }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell{ opacity:1; transform:none; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(2){ transition-delay:.06s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(3){ transition-delay:.12s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(4){ transition-delay:.18s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(5){ transition-delay:.24s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(6){ transition-delay:.30s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(7){ transition-delay:.36s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(8){ transition-delay:.42s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(9){ transition-delay:.48s; }
.js .acad-hero__device[data-reveal].is-visible .acad-hero__cell:nth-child(10){ transition-delay:.54s; }
@media (max-width:760px){
	.acad-hero__inner{ grid-template-columns:1fr; gap:var(--space-7); }
	.acad-hero__device{ width:min(100%,240px); grid-auto-rows:48px; }
}

/* ---------- pillar filter ---------- */
.acad-filters-wrap{ background:var(--offwhite); padding:var(--space-7) 0 0; }
.acad-filters{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.acad-chip{
	display:inline-flex; align-items:center; gap:var(--space-2);
	padding:var(--space-2) var(--space-4);
	background:var(--white); border:1px solid rgba(41,37,97,.18); color:var(--navy);
	font-size:var(--fs-small); font-weight:var(--fw-medium); text-decoration:none; cursor:pointer;
	transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.acad-chip:hover{ border-color:var(--blue); color:var(--blue); text-decoration:none; }
.acad-chip.is-active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.acad-chip:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.acad-chip__n{ font-size:var(--fs-caption); font-weight:var(--fw-semibold); opacity:.65; }
.acad-chip.is-active .acad-chip__n{ opacity:.85; }

.acad-filter-empty{ text-align:center; color:rgba(45,45,45,.76); padding:var(--space-8) 0; margin:0; }

/* ---------- grid ---------- */
.acad-list{ background:var(--offwhite); padding-top:var(--space-5); }
.acad-grid__item[hidden]{ display:none; }

@media (prefers-reduced-motion:reduce){ .acad-chip{ transition:none; } }
.acad-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:600px){ .acad-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){
	.acad-grid{ grid-template-columns:repeat(3,1fr); }
	.acad-grid--1{ grid-template-columns:minmax(0,520px); justify-content:center; }
	.acad-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:800px; margin-inline:auto; }
	.acad-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.js .acad-grid__item.is-visible:nth-child(2){ transition-delay:.06s; }
.js .acad-grid__item.is-visible:nth-child(3){ transition-delay:.12s; }
.js .acad-grid__item.is-visible:nth-child(4){ transition-delay:.18s; }

@media (max-width:599px){
	.acad-filters{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--space-2); scroll-snap-type:x proximity; scrollbar-color:var(--blue) transparent; }
	.acad-filters li{ flex:0 0 auto; scroll-snap-align:start; }
	.acad-filters::-webkit-scrollbar{ height:4px; }
	.acad-filters::-webkit-scrollbar-thumb{ background:var(--blue); }
}

/* ---------- card ---------- */
.acad-card{
	display:flex; flex-direction:column; height:100%;
	background:var(--white); border:1px solid rgba(41,37,97,.14); color:var(--ink);
	text-decoration:none; position:relative;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.acad-card::before{
	content:""; position:absolute; top:0; left:0; right:0; height:3px;
	background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.acad-card:hover, .acad-card:focus-visible{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(41,37,97,.12); border-color:rgba(41,37,97,.24); text-decoration:none; }
.acad-card:hover::before, .acad-card:focus-visible::before{ transform:scaleX(1); }
.acad-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

.acad-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--navy); display:block; }
.acad-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.acad-card__ph{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	background:
		radial-gradient(75% 90% at 85% 0, rgba(9,91,244,.45), transparent 55%),
		linear-gradient(135deg,var(--blue) 0%, var(--navy) 48%, var(--navy-active) 100%);
}
.acad-card__cat{
	position:absolute; top:var(--space-3); left:var(--space-3);
	background:var(--blue); color:var(--white);
	font-size:var(--fs-caption); font-weight:var(--fw-semibold);
	letter-spacing:.04em; padding:4px 8px;
}

.acad-card__body{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); flex:1 1 auto; }
.acad-card__title{ font-size:var(--fs-h4); line-height:var(--lh-h4); color:var(--navy); margin:0; }

.acad-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); font-size:var(--fs-small); color:rgba(45,45,45,.76); }
.acad-card__m{ display:inline-flex; align-items:center; }
.acad-card__m + .acad-card__m::before{ content:"·"; margin-right:var(--space-2); color:rgba(41,37,97,.42); }
.acad-card__m--lvl{ color:var(--purple-blue); font-weight:var(--fw-medium); }

.acad-card__foot{
	display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
	margin-top:auto; padding-top:var(--space-3); border-top:1px solid rgba(41,37,97,.12);
}
.acad-card__price{ font-weight:var(--fw-bold); color:var(--navy); font-size:var(--fs-h4); }
.acad-card__price del{ color:rgba(45,45,45,.62); font-weight:var(--fw-regular); font-size:var(--fs-small); margin-right:var(--space-1); }
.acad-card__price ins{ text-decoration:none; }
.acad-card__cta{ font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--blue); white-space:nowrap; }

/* ---------- empty state ---------- */
.acad-empty{ text-align:center; max-width:48ch; margin-inline:auto; padding-block:var(--space-7); }
.acad-empty__title{ font-size:var(--fs-h2); color:var(--navy); margin:0 0 var(--space-3); }
.acad-empty__text{ color:var(--ink); margin:0 0 var(--space-5); }

/* ---------- pagination ---------- */
.acad-list .pagination, .acad-list .nav-links{ display:flex; gap:var(--space-2); justify-content:center; margin-top:var(--space-7); flex-wrap:wrap; }
.acad-list .page-numbers{ display:inline-block; padding:var(--space-2) var(--space-3); background:var(--white); border:1px solid rgba(41,37,97,.18); color:var(--navy); font-weight:var(--fw-medium); text-decoration:none; }
.acad-list .page-numbers.current{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.acad-list .page-numbers:hover:not(.current){ border-color:var(--blue); color:var(--blue); }

@media (prefers-reduced-motion:reduce){
	.acad-card, .acad-card::before, .js .acad-hero__device[data-reveal] .acad-hero__cell{ transition:none; }
	.js .acad-hero__device[data-reveal] .acad-hero__cell{ opacity:1; transform:none; }
	.acad-card:hover, .acad-card:focus-visible{ transform:none; }
}