/* academy.zakpy.com: only what the kit does not have. Colours, type and spacing come from the kit tokens. */

.hero .display { font-size: clamp(2.25rem, 5.4vw, 4rem); }

/* Courses: two big cards */
.courses { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.course { display: flex; flex-direction: column; gap: var(--space-2); border-inline-start: 4px solid var(--accent); }
.course h3, .course p { margin: 0; }
.course__tags { gap: 0.5rem; }
.course .link-arrow { margin-top: auto; }

/* Projects: smaller cards with an icon */
.projects { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.project { display: flex; gap: var(--space-2); align-items: flex-start; }
.project .icon { flex: none; }
.project h3 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.project p { margin: 0 0 var(--space-2); }

/* Coming soon block */
.next { padding: var(--space-6) var(--space-4); border-radius: var(--radius); }
.next .lead { max-width: 38rem; }
.next__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.next__tags li { padding: 0.35rem 0.7rem; border: 2px solid currentColor; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9375rem; }
.next .btn--secondary { --btn-fg: var(--inverse-text); --btn-border: var(--inverse-text); }
.next .btn--secondary:hover { --btn-fg: var(--inverse-bg); --btn-bg: var(--inverse-text); }

/* Teacher */
.teacher__stat { justify-self: start; width: fit-content; min-width: 16rem; display: flex; flex-direction: column; gap: 0.25rem; }
.stat .stat__value { color: var(--accent); white-space: nowrap; font-size: clamp(2rem, 7vw, 3rem); }
[dir="rtl"] .stat__value { direction: ltr; text-align: end; unicode-bidi: isolate; }

.footer__mail { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer__legal { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.footer__legal p { margin: 0; }

.nav__logo span, .nav__drawer-head .logo span { white-space: nowrap; }

/* Course language, shown on the title of each course */
.course__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.course__lang { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; vertical-align: middle; }

/* Course video: thumbnail first, the YouTube player loads on click (site.js) */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--zakpy-ink, #111827); }
.video__play { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.video__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease, ease), filter 300ms; }
.video__play:hover img { transform: scale(1.03); filter: brightness(0.85); }
.video__play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.video__icon { position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent, #fff); box-shadow: 4px -4px 0 color-mix(in srgb, var(--accent-solid) 55%, #111827); }
.video__icon .icon { margin-inline-start: 0.2rem; }
.video__label { position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; padding: 0.25rem 0.5rem; background: rgba(17, 24, 39, 0.8); color: #fffcf5; border-radius: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* WhatsApp quick contact button, bottom corner (mirrors in Arabic), under the nav and its drawer */
.wa-fab { position: fixed; z-index: 40; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline-end: 1rem; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent, #fff); box-shadow: 4px -4px 0 color-mix(in srgb, var(--accent-solid) 55%, #111827), var(--shadow-card); transition: transform 180ms var(--ease, ease); }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.wa-fab .icon { width: 1.75rem; height: 1.75rem; }
.footer { padding-block-end: calc(var(--space-5) + 4rem); }
@media (prefers-reduced-motion: reduce) { .video__play img, .wa-fab { transition: none; } }