/* Homepage layout layered over global.css and components.css. */
.academy-page { 
  --page-surface: #f6f7fb; 
  --page-ink: #1a2c3e; 
  --page-border: #ccc; 
  border-top: 3px solid #30443e; 
}

.academy-header { 
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page-surface);
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 10px 6.2% 10px 20px; 
  min-height: 100px; 
}


.academy-brand { 
  display: block;
  width: 160px; 
  color: inherit; 
}

.academy-brand img { 
  width: 100%; 
  height: 80px; 
  object-fit: contain; 
}

.academy-brand > .brand-mark {
  width: 200px;
  zoom: 0.8;
}

.brand-mark { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  width: 100%; 
}

.brand-crest { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  color: #d7a32d; 
  font: 38px/0.85 Georgia, serif; 
}

.brand-crest b { 
  display: block; 
  padding: 4px 12px; 
  border: 4px solid #d12f36; 
  border-radius: 8px 8px 45% 45%; 
  color: #d12f36; font: bold 48px/1 Georgia, serif; 
}

.brand-crest small { 
  color: #171b50; 
  font: 11px/1.4 sans-serif; 
  letter-spacing: 5px; 
}

.brand-wordmark { 
  display: flex; 
  flex-direction: column; 
  color: #111; 
  font-family: Georgia, serif; 
  white-space: nowrap; 
}

.brand-wordmark strong { 
  font-size: 44px; 
  font-weight: 400; 
  line-height: 1; 
}

.brand-wordmark > span { 
  background: #cd3035; 
  color: white; 
  font-size: 9px; 
  text-align: center; 
}

.brand-wordmark small { 
  font-size: 4.7px; 
}

.brand-wordmark b { 
  font-size: 16px; 
  line-height: 1; 
  font-weight: 400; 
}

.header-actions { 
  display: flex; 
  gap: 9px; 
  padding-top: 0; 
}

.icon-button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 44px; height: 44px; 
  padding: 0; border: 0; 
  background: transparent; 
  color: #ce3037; 
  border-radius: 6px; 
}

.icon-button svg { 
  width: 42px; 
  height: 42px; 
  fill: currentColor; 
}

.icon-button:hover { 
  color: #a52229; 
  background: #ce303711; 
}

.course-content { 
  padding: 30px; 
  overflow: visible; 
}

.course-grid { 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
  gap: 30px; max-width: 1640px; 
  margin: 0 auto; 
}

.course-card.card { 
  padding: 0; 
  border: 1px solid var(--page-border); 
  border-radius: 7px; 
  overflow: hidden; 
  background: var(--page-surface); 
  box-shadow: none; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.course-card.card:hover { 
  transform: none; 
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .course-card.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(26, 44, 62, 0.16);
  }
}

.course-card.card:focus-within {
  box-shadow: 0 14px 30px rgba(26, 44, 62, 0.16);
}

.course-cover { 
  aspect-ratio: 429 / 240; 
  background: white; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
}

.course-cover > img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.cover-brand > img { 
  object-fit: contain; 
  padding: 20px; 
}

.cover-brand > div { width: 90%; }

.cover-brand .brand-mark { gap: 18px; }

.cover-brand .brand-crest { font-size: clamp(38px, 6vw, 70px); }

.cover-brand .brand-crest b { font-size: clamp(48px, 8vw, 96px); }

.cover-brand .brand-crest small { font-size: 16px; }

.cover-brand .brand-wordmark strong { font-size: clamp(44px, 8vw, 96px); }

.cover-brand .brand-wordmark > span { font-size: 14px; }

.cover-brand .brand-wordmark small { font-size: clamp(4px, .85vw, 10px); }

.cover-brand .brand-wordmark b { font-size: clamp(16px, 3vw, 35px); }

.cover-wordpress { 
  background: #1da2d3; 
  color: white; 
  gap: 20px; 
  text-align: center; 
  font-size: 22px; 
  line-height: 1.2; 
  padding: 20px; 
}

.book-icon { font-size: 110px; }

.cover-pink { position: relative; 
  background: #f5cfc5; 
  color: #111; 
}

.cover-pink::before { 
  content: ''; 
  position: absolute; 
  inset: 44% -20% -35%; 
  background: #e99ca6; 
  border-radius: 50% 50% 0 0; 
  transform: rotate(-3deg); 
}

.cover-pink strong { position: relative; z-index: 1; }

.course-body.card-body { padding: 20px; gap: 0; flex: 1; }

.course-body h2 { font-size: 28px; margin-bottom: 14px; }

.instructor { 
  display: flex; 
  align-items: center; 
  gap: 28px; 
  margin: 0 20px 28px; 
  min-height: 90px; 
  font-size: 20px; 
  font-weight: 700; 
}

.instructor-photo, .instructor-placeholder { 
  width: 86px; 
  height: 90px; 
  flex-shrink: 0; 
  object-fit: contain; 
  object-position: bottom; 
}

.instructor-placeholder { color: #a8b3c0; }

.instructor-placeholder svg { 
  width: 100%; 
  height: 100%; 
  fill: currentColor; 
}

.course-body p { 
  font-size: 20px; 
  margin: 0; 
}

.course-price { 
  text-align: center; 
  border-top: 1px solid var(--page-border); 
  padding: 6px 16px; font-size: 28px; 
  min-height: 56px; 
}

.price-pending { font-size: 16px; }

.academy-footer { 
  width: 100%; 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  min-height: 69px; 
  padding: 10px 4.4%; 
  background: #ce3037; 
  color: white; 
}

.academy-footer p { 
  margin: 0; 
  font-size: 20px; 
}

.academy-footer a { color: white; }

.footer-actions { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-left: auto; 
  margin-right: 18%; 
}

.facebook-icon { 
  width: 41px; 
  height: 41px; 
  background: white;
  color: #ce3037; 
  border-radius: 50%; 
  text-align: center; 
  font: bold 44px/49px Arial, sans-serif; 
  overflow: hidden; 
}

.theme-toggle { color: white; }

.theme-toggle:hover { 
  color: white; 
  background: #ffffff22; 
}

.visually-hidden, .skip-link:not(:focus) { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  overflow: hidden; 
  clip-path: inset(50%); 
  white-space: nowrap; 
}

.skip-link:focus { 
  position: absolute; 
  top: 5px; 
  left: 5px; 
  padding: 10px; 
  z-index: 20; 
  background: white; 
}

:focus-visible { 
  outline: 3px solid #d9a32c; 
  outline-offset: 4px; 
}

.account-dialog { 
  margin: auto; 
  padding: 30px; 
  border: 1px solid var(--page-border); 
  border-radius: 16px; 
  max-width: calc(100% - 32px); 
  color: var(--page-ink); 
  background: var(--page-surface); 
}

.account-dialog::backdrop { background: #0008; }

.account-dialog form { margin-top: 20px; }

.academy-page.dark-theme { 
  --page-surface: #19232f; 
  --page-ink: #edf2f7; 
  --page-border: #455260; 
  background: var(--page-surface); 
  color: var(--page-ink); 
}

.dark-theme .academy-brand .brand-wordmark { color: white; }


@media (max-width: 1100px) {
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .academy-header { min-height: 90px; padding: 5px 20px; }
  .course-content { padding: 20px 16px; }
  .course-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .cover-brand .brand-wordmark strong { font-size: clamp(52px, 14vw, 80px); }
  .cover-brand .brand-wordmark b { font-size: 25px; }
  .cover-brand .brand-wordmark small { font-size: 7px; }
  .course-body h2 { font-size: 25px; }
  .instructor { margin-left: 0; margin-right: 0; gap: 20px; font-size: 18px; }
  .academy-footer { padding: 10px 16px; gap: 12px; }
  .academy-footer p { font-size: 14px; }
  .footer-actions { margin-right: 0; flex-shrink: 0; gap: 5px; }
  .facebook-icon { width: 32px; height: 32px; font-size: 36px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .academy-page *, .academy-page *::before { transition: none; scroll-behavior: auto; }
  .course-card.card:hover { transform: none; }
}