/* lavin.education public site — what styles.css doesn't carry: the old
   product/instructor/linktree pages kept these in inline <style> blocks
   ($pageStyles). Mobile-first: base rules are the phone layout, min-width
   queries widen it (the old max-width: 768px breakpoint, turned around). */

/* ── Small utilities ─────────────────────────────────────────── */
.site-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.site-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-mt-half { margin-top: 0.5rem; }
.site-form-msg { margin-top: 0.5rem; font-size: 0.875rem; min-height: 1.25rem; }
.site-form-msg--ok { color: #16a34a; }
.site-form-msg--error { color: #dc2626; }
.site-404-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Community: webinar cards stack on a phone ───────────────── */
.webinar-card { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem; }
.webinar-card__image { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.webinar-card__sub { font-size: 0.9375rem; color: var(--moln); margin-top: 0.25rem; line-height: 1.4; }
@media (min-width: 541px) {
  .webinar-card { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; }
  .webinar-card__image { width: 160px; height: 100px; aspect-ratio: auto; }
}

/* ── Product page ────────────────────────────────────────────── */
.product-hero { padding: calc(var(--header-h) + 2rem) 0 2.5rem; }
.product-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.product-hero__content { max-width: 540px; min-width: 0; }
.product-hero__type { font-family: inherit; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--moln); margin-bottom: 1rem; }
.product-hero__title { font-size: 1.75rem; margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.product-hero__sub-headline { font-size: 1.125rem; color: var(--moln); margin-bottom: 1rem; }
.product-hero__instructor-text { color: var(--moln); margin-bottom: 1rem; }
.product-hero__image { border-radius: var(--radius-card); overflow: hidden; }
.product-hero__image img { width: 100%; height: auto; object-fit: cover; }
.product-hero__dates { margin-top: 1.25rem; margin-bottom: 0.25rem; }
.product-hero__dates-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--moln); margin-bottom: 0.5rem; }
.product-hero__date-item { font-size: 0.9375rem; color: var(--black); padding: 0.25rem 0; }
.product-hero__date-location { color: var(--moln); }
.product-hero__dates--past .product-hero__date-item { color: var(--moln); }
.product-hero__webinar-date { font-size: 1.125rem; font-weight: 600; color: var(--eld); margin-bottom: 1rem; }
.product-hero__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 769px) {
  .product-hero { padding: calc(var(--header-h) + 3rem) 0 3rem; }
  .product-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .product-hero__title { font-size: 2.5rem; }
}

.product-description { padding: 3rem 0; }
.product-description__inner { max-width: 720px; margin: 0 auto; overflow-wrap: break-word; }
.product-description__inner h2, .product-description__inner h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.product-description__inner p { margin-bottom: 1rem; }
.product-description__inner ul, .product-description__inner ol { margin: 0 0 1rem 1.25rem; }
.product-description__inner a { color: var(--eld); text-decoration: underline; }
.product-description__inner img { border-radius: var(--radius-media); margin: 1.5rem 0; max-width: 100%; height: auto; }
.product-description__inner iframe, .product-description__inner video { max-width: 100%; }
@media (min-width: 769px) { .product-description { padding: 4rem 0; } }

.product-instructors { padding: 3rem 0; background: var(--vit); }
.product-instructors h2 { text-align: center; font-size: 1.75rem; margin-bottom: 2rem; }
.instructors-grid { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.instructor-card { text-align: center; text-decoration: none; color: inherit; transition: opacity 0.2s; max-width: 220px; }
.instructor-card:hover { opacity: 0.8; }
.instructor-card__image { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; }
.instructor-card__name { font-family: inherit; font-size: 1.125rem; font-weight: 600; }
.instructor-card__title { font-size: 0.875rem; color: var(--moln); margin-top: 0.25rem; }
.instructor-card__bio img { max-width: 100%; height: auto; }
@media (min-width: 769px) { .product-instructors { padding: 4rem 0; } .product-instructors h2 { margin-bottom: 2.5rem; } }

.product-pricing { padding: 3rem 0; text-align: center; }
.product-pricing h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.product-pricing__lead { margin-bottom: 1.5rem; color: var(--moln); }
.product-pricing__terms { font-size: 0.875rem; color: var(--moln); margin-top: 2rem; }
.product-pricing__terms a { color: var(--eld); text-decoration: underline; }
.pricing-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pricing-btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background: var(--eld); color: var(--vit); font-family: inherit; font-weight: 600; font-size: 1rem; border-radius: var(--radius-pill); text-decoration: none; transition: opacity 0.2s; max-width: 100%; text-align: center; }
.pricing-btn:hover { opacity: 0.9; }
.pricing-btn__amount { font-size: 0.875rem; opacity: 0.9; }
@media (min-width: 769px) { .product-pricing { padding: 4rem 0; } .product-pricing h2 { margin-bottom: 2rem; } }

.signup-form { max-width: 520px; margin: 0 auto; }
.signup-form__row { display: flex; flex-direction: column; gap: 0.75rem; }
.signup-form__input { width: 100%; min-width: 0; padding: 0.875rem 1rem; border: 1px solid #ccc; border-radius: var(--radius-pill); font-size: 1rem; font-family: inherit; background: var(--vit); }
.signup-form__btn { padding: 0.875rem 1.5rem; background: var(--eld); color: var(--vit); font-family: inherit; font-weight: 600; font-size: 1rem; border: none; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.signup-form__btn:hover { opacity: 0.9; }
@media (min-width: 541px) {
  .signup-form__row { flex-direction: row; flex-wrap: wrap; }
  .signup-form__input { flex: 1 1 180px; width: auto; }
}

/* ── Instructor page ─────────────────────────────────────────── */
.instructor-hero { padding: calc(var(--header-h) + 2rem) 0 2.5rem; }
.instructor-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem; max-width: 900px; margin: 0 auto; }
.instructor-hero__image { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.instructor-hero__content { flex: 1; min-width: 0; }
.instructor-hero__name { font-size: 1.875rem; margin-bottom: 0.5rem; }
.instructor-hero__title { font-size: 1rem; color: var(--moln); margin-bottom: 1.5rem; }
.instructor-hero__bio { font-size: 1rem; line-height: 1.8; color: var(--black); text-align: left; overflow-wrap: break-word; }
.instructor-hero__bio p { margin-bottom: 1rem; }
.instructor-hero__bio img { max-width: 100%; height: auto; }
@media (min-width: 769px) {
  .instructor-hero { padding: calc(var(--header-h) + 3rem) 0 3rem; }
  .instructor-hero__inner { flex-direction: row; align-items: flex-start; text-align: left; gap: 3rem; }
  .instructor-hero__image { width: 200px; height: 200px; }
  .instructor-hero__name { font-size: 2.25rem; }
}

.instructor-courses { padding: 1rem 0 3rem; }
.instructor-courses h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.instructor-courses .course-card { background: var(--vit); }

.other-instructors { padding: 3rem 0; background: var(--vit); }
.other-instructors h2 { text-align: center; font-size: 1.75rem; margin-bottom: 2rem; }
.others-grid { display: flex; gap: 1.5rem 2rem; justify-content: center; flex-wrap: wrap; }
.other-card { text-align: center; text-decoration: none; color: inherit; transition: opacity 0.2s; max-width: 160px; }
.other-card:hover { opacity: 0.8; }
.other-card__image { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.75rem; }
.other-card__name { font-family: inherit; font-size: 1rem; font-weight: 600; }
@media (min-width: 769px) { .other-instructors { padding: 4rem 0; } .other-instructors h2 { margin-bottom: 2.5rem; } }

/* ── Link tree ───────────────────────────────────────────────── */
.linktree { padding: calc(var(--header-h, 134px) + 2rem) 0 3rem; }
.linktree__heading { text-align: center; margin-bottom: 2rem; }
.linktree__list { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.linktree__item { display: block; padding: 1.25rem 1.5rem; background: var(--vit, #FFFFFF); border-radius: var(--radius-card, 16px); text-decoration: none; color: var(--black, #001317); transition: transform 0.15s ease, box-shadow 0.15s ease; overflow-wrap: anywhere; }
.linktree__item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.linktree__item-title { font-weight: 600; font-size: 1.0625rem; margin: 0; }
.linktree__item-desc { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--moln, #557F8B); line-height: 1.4; }
.linktree__empty { text-align: center; color: var(--moln, #557F8B); padding: 3rem 0; }
@media (min-width: 769px) { .linktree { padding-top: calc(var(--header-h, 134px) + 3rem); } }

/* A course without an image gets a quiet placeholder instead of an empty
   white box (added in the Paradigm move). */
.course-card__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dimma, #FAF4E5);
}
.course-card__image--empty .course-card__mark {
  width: 38%;
  height: auto;
  object-fit: contain;
  opacity: 0.22;
}