/* =========================================================
   Home: "Explore Our Courses" – photo frame on each card
   Photos: assets/js/courses.js (empty src = designed placeholder)
   ========================================================= */

.course-media { position: relative; z-index: 0; margin: -12px -11px 0; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; background: var(--light); }
.course-media > img, .course-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.course-media > img { object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .7s var(--ease); -webkit-user-drag: none; user-select: none; }
.course-media.has-photo > img { opacity: 1; }
.course-media.has-photo .course-ph { opacity: 0; }

/* designed placeholder: brand tint, a soft dot grid and a word that fits the track */
.course-ph { display: block; overflow: hidden; transition: transform .7s var(--ease), opacity .4s; }
.course-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(3, 86, 67, .14) 1.4px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 65%); mask-image: linear-gradient(135deg, #000 0%, transparent 65%); }
.is-phonics .course-ph { background: linear-gradient(135deg, #FFF6D9 0%, var(--color-accent-soft) 100%); }
.is-grammar .course-ph { background: linear-gradient(135deg, #F4FCF7 0%, #D6F0E0 100%); }
.is-speaking .course-ph { background: linear-gradient(135deg, var(--light) 0%, #FFF1C4 100%); }
.course-ph-glyph { position: absolute; right: 16px; top: 50%; transform: translateY(-38%); font-family: var(--font-head); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; opacity: .95;
  text-shadow: 0 6px 18px rgba(3, 86, 67, .08); font-size: 50px; white-space: nowrap; }
.is-phonics .course-ph-glyph::before { content: "Aa Bb"; color: #fff; }
.is-grammar .course-ph-glyph::before { content: "a · an · the"; font-size: 32px; }
.is-speaking .course-ph-glyph::before { content: "Hello!"; }
.course-ph-cam { position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .78); color: var(--secondary); }
.course-ph-label { position: absolute; left: 54px; top: 13px; font-family: var(--font-body); font-weight: 600; font-size: 10.5px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); opacity: .62; }
.course-ph-label b { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0; text-transform: none; opacity: .9; }
.course-card:hover .course-ph, .course-card:hover .course-media > img { transform: scale(1.05); }

/* thin green outline, the same as the pricing cards */
.page-home main .course-card, .course-card { border: 1.5px solid rgba(52, 156, 92, .3); } /* --secondary at 30% strength */

/* the icon row sits half over the bottom of the frame */
.course-grid .course-card .course-top { position: relative; z-index: 1; align-items: flex-end; margin-top: -27px; padding: 0 4px; }
.course-grid .course-card .course-top .course-icon { box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(3, 86, 67, .12); }
.course-grid .course-card .course-top .course-level { box-shadow: 0 0 0 3px #fff; margin-bottom: 4px; }
.course-grid .course-card:hover .course-top .course-icon { box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 8px 18px rgba(0, 0, 0, .12); }
.course-grid .course-card:hover .course-top .course-level { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }

/* Phonics: the wide card keeps its one-row layout, with the frame on the left */
.page-home main .course-card.is-wide:hover::before, .course-card.is-wide:hover::before { transform: scale(26); } /* the hover colour fills the whole wide card */
.course-card.is-wide .course-media { flex: 0 0 210px; margin: -8px 0 -8px -6px; aspect-ratio: 16 / 10; }
.course-card.is-wide .course-ph-glyph { font-size: 40px; right: auto; left: 50%; transform: translate(-50%, -50%); }
.course-card.is-wide .course-ph-label { display: none; }

@media (max-width: 999px) {
  .course-card.is-wide .course-media { flex-basis: calc(100% + 18px); margin: -10px -9px 4px; aspect-ratio: 3 / 1; }
  .course-card.is-wide .course-ph-label { display: block; }
}
@media (max-width: 640px) {
  .course-card.is-wide .course-media { flex: none; align-self: flex-start; width: calc(100% + 18px); margin: -10px -9px 16px; aspect-ratio: 16 / 9; }
  .course-ph-glyph { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-ph, .course-media > img { transition: none; }
  .course-card:hover .course-ph, .course-card:hover .course-media > img { transform: none; }
}

/* =========================================================
   Course cards: arrive on scroll the same way as the pricing cards
   (rise and grow slightly, one after another across each row)
   ========================================================= */
.js .course-card[data-reveal] { opacity: 0; transform: translateY(60px) scale(.95);
  transition: opacity .8s var(--ease) var(--d, 0ms), transform 1s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms), box-shadow .45s var(--ease), border-color .45s, color .45s; }
.js .course-card[data-reveal].is-in { opacity: 1; transform: none; }
.course-grid > .course-card { --d: 0ms; }
.course-grid > .course-card:nth-child(3n) { --d: 200ms; }
.course-grid > .course-card:nth-child(3n+1):not(:first-child) { --d: 400ms; }
@media (max-width: 999px) {
  .course-grid > .course-card:nth-child(n) { --d: 0ms; }
  .course-grid > .course-card:nth-child(odd):not(:first-child) { --d: 200ms; }
}
@media (max-width: 640px) { .course-grid > .course-card:nth-child(n) { --d: 0ms; } }
@media (prefers-reduced-motion: reduce) { .js .course-card[data-reveal] { opacity: 1; transform: none; } }

/* the whole card opens the course page: keep the card-wide link layer above the icon row */
.course-card .course-link::after { z-index: 2; }

/* "View Course" sits on the right, where the hover colour arrives first, and turns white only once the colour is behind it */
.course-card .course-link { align-self: flex-end; transition: color .3s .15s, gap .3s; }
.course-card.is-wide .course-link { margin-left: auto; align-self: center; }

/* active course tab: the gradient runs under the border, so the edge matches the fill */
.course-tab[aria-pressed="true"], .page-home main .course-tab[aria-pressed="true"],
.course-tab[aria-pressed="true"]:hover, .page-home main .course-tab[aria-pressed="true"]:hover { border-color: transparent; background-origin: border-box; }