/* webinar.css: /webinar/ only. Photo hero (cream fill below 1025px), the four feature icons, the Upcoming Webinars
   card grid tuning on top of the shared .webinar-card in main.css, the "Why Parents & Students" photo band and the
   dialog icon. Numbers are the measured bboxes from reference/webinar (1440 and 390). Mobile first. */

/* ---- Hero: 50px top on phones, heading, 26px, text, 44px, 2x2 icons, 30px, button flush to the bottom ---- */
.webinar-hero { background-color: var(--c-bg-cream-hero); padding: 50px 0 0; }
.webinar-hero__inner { padding-left: 17px; }
.webinar-hero__title { text-align: center; }
.webinar-hero__body { display: flex; flex-direction: column; align-items: flex-start; }
.webinar-hero__text { margin-top: 24px; font: 400 18px/30px var(--font-sans); color: var(--c-ink); text-align: center; }
.webinar-hero__features {
  display: grid; grid-template-columns: repeat(2, 130px); column-gap: 20px; row-gap: 20px;
  margin: 44px 0 0 10px;
}
.webinar-hero__feature {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  font: 400 16px/16px var(--font-sans); color: var(--c-ink); text-align: center;
}
.webinar-hero__icon { width: 107px; height: 82px; }
.webinar-hero__cta { align-self: center; margin-top: 30px; font-size: 14px; line-height: 14px; }

@media (min-width: 768px) {
  .webinar-hero { padding: 56px 0 40px; }
  .webinar-hero__inner { max-width: 640px; margin: 0 auto; padding-inline: var(--gutter); }
  .webinar-hero__body { align-items: center; }
  .webinar-hero__features { grid-template-columns: repeat(4, 131px); margin-left: 0; }
  .webinar-hero__cta { font-size: 16px; line-height: 16px; }
}

/* Desktop: the photo fills the section (92vh at the 900px capture = 828px); copy sits in the left 550px column */
@media (min-width: 1025px) {
  .webinar-hero {
    min-height: 828px; padding: 80px 0 0 90px;
    background: var(--c-bg-cream-hero) var(--bg-image) center / cover no-repeat;
  }
  .webinar-hero__inner { max-width: none; margin: 0; padding: 0; }
  .webinar-hero__title { text-align: left; }
  .webinar-hero__body { width: 550px; align-items: flex-start; }
  .webinar-hero__text { font-size: 24px; line-height: 36px; margin-top: 21px; }
  .webinar-hero__features { grid-template-columns: repeat(4, 131px); margin: 24px 0 0 10px; }
  .webinar-hero__cta { margin-top: 30px; }
}

/* ---- Upcoming Webinars: 50px top, title 20px intro 37px full-bleed rule 32px grid, 60px bottom ---- */
.webinar-upcoming { padding: 50px 0 60px; }
.webinar-upcoming__title { line-height: 28px; }
.webinar-upcoming__intro { margin-top: 20px; font: 400 18px/23px var(--font-sans); color: var(--c-ink); text-align: center; }
.webinar-upcoming__divider { border: 0; height: 1px; background: #C8C8C8; margin: 37px var(--gutter) 32px; }

/* Phones: the source's cards sat 20px apart inside each three-card row container and 40px apart across containers */
.page-webinar .webinar-grid { row-gap: 20px; }
.page-webinar .webinar-grid > li { display: flex; min-width: 0; }
.page-webinar .webinar-grid > li:nth-child(3n+4) { margin-top: 20px; }
.page-webinar .webinar-card { width: 100%; }
/* The source's text column is inset 10px on the left only (title 340/410px wide) */
/* Phones: two-button (and no-button) cards pull the byline up 2px and the date to 6px under it, then 25px to the
   buttons and 20px to the card edge; a card with no buttons keeps 40px under the date. One-button cards (1 and 2)
   run 11px / 11px / 11px, with the body at least 208px tall so a two-line title keeps its button where card 1's is. */
.page-webinar .webinar-card__body { padding: 20px 0 20px 10px; }
.page-webinar .webinar-card__title { margin: 0; }
.page-webinar .webinar-card__byline { margin-top: -2px; }
.page-webinar .webinar-card__date { margin: 6px 0 0; min-height: 19px; }
.page-webinar .webinar-card__date:last-child { margin-bottom: 20px; }
.page-webinar .webinar-card--single .webinar-card__body { padding-bottom: 11px; min-height: 208px; }
.page-webinar .webinar-card--single .webinar-card__byline { margin-top: 0; }
.page-webinar .webinar-card--single .webinar-card__date { margin: 11px 0; }
/* The source shipped only the Book cut, so its "500" card title and date rendered at Book width. Medium is ~5% wider
   and adds a line to most 420px titles, so these two lines use 400 to keep the measured wrapping and card heights. */
.page-webinar .webinar-card__title, .page-webinar .webinar-card__date { font-weight: 400; }

/* The source set six of the eight bylines (cards 3-8) in Inter 400, which draws a lighter stroke than Circular Book */
.webinar-card__byline--inter { font-family: var(--font-nav); }

/* Date line: grey date, then an orange FREE 50px after it (10px on phones for the `--tight` cards, as the source set
   per widget); FREE wraps under the date if the line runs out of room */
.webinar-card__date-row { text-decoration: none; color: inherit; }
.webinar-card__free { padding-left: 50px; color: var(--c-accent); }
.webinar-card__date--tight .webinar-card__free { padding-left: 10px; }
/* Card 5's phone date widget was a 280px centred box, so its line starts ~5px in */
.page-webinar .webinar-card__date--centred { max-width: 280px; text-align: center; }

.page-webinar .webinar-card__actions { margin-top: 25px; padding-left: 1px; }
.page-webinar .webinar-card--single .webinar-card__actions { margin-top: auto; }
.page-webinar .webinar-card__actions--pair { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 10px 20px; }
.page-webinar .webinar-card__actions--pair > :first-child { justify-self: start; }
.page-webinar .webinar-card__actions--pair > :last-child { justify-self: start; margin-left: 3px; }

@media (min-width: 768px) {
  /* Tablet and up: the grid rows stretch the cards, so the phone-only rhythm above is reset to one set of numbers */
  .page-webinar .webinar-grid { row-gap: 33px; }
  .page-webinar .webinar-grid > li:nth-child(3n+4) { margin-top: 0; }
  .page-webinar .webinar-card__body,
  .page-webinar .webinar-card--single .webinar-card__body { padding: 20px 0 14px 10px; min-height: 0; }
  .page-webinar .webinar-card__byline,
  .page-webinar .webinar-card--single .webinar-card__byline { margin-top: 0; }
  .page-webinar .webinar-card__date,
  .page-webinar .webinar-card--single .webinar-card__date { margin: 10px 0 0; min-height: 0; }
  .page-webinar .webinar-card__date:last-child { margin-bottom: 0; }
  .webinar-card__date--tight .webinar-card__free { padding-left: 50px; }
  .page-webinar .webinar-card__date--centred { max-width: none; text-align: left; }
  .page-webinar .webinar-card__actions,
  .page-webinar .webinar-card--single .webinar-card__actions { margin-top: 20px; }
  .page-webinar .webinar-card__media img { height: auto; aspect-ratio: 420 / 260; }
  /* Tablet cards are ~230px wide: the two buttons sit at either end instead of in two fixed halves */
  .page-webinar .webinar-card__actions--pair { display: flex; justify-content: space-between; gap: 8px; padding-inline: 10px; }
  .page-webinar .webinar-card__actions--pair > :last-child { margin-left: 0; }
}

@media (min-width: 1025px) {
  .webinar-upcoming__title { line-height: 40px; }
  .webinar-upcoming__intro { font-size: 24px; line-height: 36px; }
  .page-webinar .webinar-grid { row-gap: 41px; }
  .page-webinar .webinar-card__media img { height: 260px; aspect-ratio: auto; }
  .page-webinar .webinar-card__body,
  .page-webinar .webinar-card--single .webinar-card__body { padding: 19px 0 20px 10px; }
  .page-webinar .webinar-card__title { margin-bottom: 3px; }
  .page-webinar .webinar-card__date { margin-top: 9px; }
  /* Row 1's one-button cards sit their date 2px and their button 4px lower than the two-button cards */
  .page-webinar .webinar-card--single .webinar-card__date { margin-top: 11px; }
  .page-webinar .webinar-card--single .webinar-card__actions { margin-top: 22px; }
  .page-webinar .webinar-card__actions--pair { display: grid; padding-inline: 10px 20px; }
  .page-webinar .webinar-card__actions--pair > :last-child { justify-self: end; }
  /* Card 4 (row 2, col 1): the source's text column sat flush under the image (title 2px below it, not 20px) and
     its buttons 25px under the date, so its text block starts 18px higher than cards 5 and 6 */
  .page-webinar .webinar-grid > li:nth-child(4) .webinar-card__body { padding-top: 1px; }
  .page-webinar .webinar-grid > li:nth-child(4) .webinar-card__actions { margin-top: 25px; }
}

/* ---- Why Parents & Students: text over the photo's light left side ---- */
.webinar-why {
  min-height: 591px; padding: 50px 10px 0;
  background: var(--c-bg-peach-soft) var(--bg-image) center / cover no-repeat;
}
.webinar-why__title { padding-left: 10px; font: 500 28px/36.5px var(--font-sans); color: var(--c-ink); text-align: left; }
.webinar-why__accent { color: var(--c-accent); }
.webinar-why__text { margin-top: 25px; font: 400 16px/23px var(--font-sans); color: var(--c-ink); }

@media (min-width: 768px) {
  .webinar-why { padding: 80px 60px 60px; }
  .webinar-why__title { padding-left: 0; }
  .webinar-why__text { max-width: 522px; }
}
@media (min-width: 1025px) {
  .webinar-why { min-height: 630px; padding: 163px 0 0 177px; }
  .webinar-why__title { font-size: 40px; line-height: 48px; }
  .webinar-why__text { margin-top: 40px; font-size: 18px; line-height: 29px; }
}

/* ---- Registration dialog icon ---- */
.modal__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--c-accent); }