/* ==========================================================================
   PAGE — Delivery product pages
   adaptive-learning.html, ebooks.html, audio-video-player.html,
   reader-as-a-service.html, journals.html
   One template for all five, reached from the "Read more" buttons in
   Delivery section 5. Layout, copy and imagery follow the old
   themonkplatform.com/products/* pages (light hero with the yellow corner
   triangle, video + copy, yellow feature band with hover-reveal cards);
   type, colour and chrome are the current site's.
   Namespace `product-` for every class and token.
   ========================================================================== */

:root {
  --product-yellow:     #FFC600;  /* = --delivery-gold / --site-yellow */
  --product-navy:       #0F0F35;  /* = --delivery-ink-deep */
  --product-navy-deep:  #02021B;  /* = --site-dark, the button fill */
  --product-ink:        #272729;
  --product-light:      #FAFAFA;  /* hero + overview surface */
  --product-white:      #FFFFFF;

  --product-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --product-max:      1240px;
  --product-gutter:   20px;
  --product-header-h: 76px;  /* keep in step with --delivery-header-h */
  /* Rise of the diagonal edge where the yellow band starts. */
  --product-slope:    clamp(56px, 14vw, 210px);
}

@media (min-width: 480px) {
  :root { --product-gutter: 24px; }
}

@media (min-width: 768px) {
  :root { --product-gutter: clamp(32px, 10.119vw - 45.71px, 100px); }
}

/* --- page shell ---------------------------------------------------------- */

.product-page,
.product-page *,
.product-page *::before,
.product-page *::after {
  box-sizing: border-box;
}

.product-page {
  padding-top: var(--product-header-h);
  font-family: var(--product-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--product-ink);
  background: var(--product-light);
  overflow-x: clip;
  overflow-wrap: anywhere;
}

.product-page h1,
.product-page h2,
.product-page h3,
.product-page p {
  margin: 0;
}

.product-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.product-container {
  width: 100%;
  max-width: calc(var(--product-max) + var(--product-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--product-gutter);
}

.product-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.product-page :focus-visible {
  outline: 2px solid var(--product-navy);
  outline-offset: 3px;
}

/* --- 1. hero — the Delivery page's banner -------------------------------
   Same band as .delivery-hero: dark ground, amber glow behind the headline,
   gold eyebrow with its rule, one phrase of the headline in gold, and the
   same fixed band heights per breakpoint. Keep the two in step. */

.product-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding-block: 56px;
  color: #ffffff;
  background-color: #060F1E;   /* = --delivery-hero-bg */
  background-image: radial-gradient(
    104.5% 91.1% at 50% 20%,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0) 70%
  );
}

@media (min-width: 768px) {
  .product-hero { min-height: 440px; padding-top: 88px; }
}

@media (min-width: 1024px) {
  .product-hero { min-height: 488px; padding-top: 113px; }
}

.product-hero-inner {
  position: relative;
}

.product-hero .product-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.8886rem + 0.2174vw, 1.0625rem);
  line-height: 1.5;
  color: var(--product-yellow);
}

.product-rule {
  flex: 0 0 auto;
  width: 40px;
  height: 2px;
  background: currentColor;
}

.product-hero .product-hero-title {
  max-width: 17em;
  margin-top: 16px;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  line-height: 1.25;
  color: #ffffff;
}

.product-hl {
  color: #FFC905;   /* = --delivery-gold-bright */
}

/* --- 2. overview — video left, copy right -------------------------------- */

.product-overview {
  position: relative;
  z-index: 1;   /* the video sits over the diagonal of the yellow band */
  padding-top: clamp(48px, 6vw, 96px);
  /* Stacked, the copy comes last, so clear the whole diagonal below it. */
  padding-bottom: calc(var(--product-slope) + 24px);
}

.product-overview-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.product-video {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.product-video img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-video:hover img,
.product-video:focus-visible img {
  transform: scale(1.03);
}

.product-overview .product-overview-title {
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  line-height: 1.35;
  color: var(--product-navy);
}

/* The yellow marker bar under the lead word, as on the old pages. */
.product-mark {
  background-image: linear-gradient(var(--product-yellow), var(--product-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 88%;
}

.product-overview-body {
  margin-top: 18px;
}

.product-overview-body p {
  font-weight: 300;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  color: var(--product-navy);
}

.product-overview-body p + p {
  margin-top: 16px;
}

/* --- 3. features — the yellow band --------------------------------------- */

.product-features {
  position: relative;
  padding-block: clamp(48px, 5vw, 72px) clamp(56px, 6vw, 96px);
  background: var(--product-yellow);
}

/* The diagonal top edge: high on the left, meeting the band on the right. */
.product-features::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--product-slope);
  background: var(--product-yellow);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.product-features-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.product-features .product-features-title {
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.25;
  color: var(--product-navy);
}

.product-features .product-features-intro {
  max-width: 640px;
  margin: 16px auto 0;
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.55;
  color: var(--product-navy);
}

.product-features .product-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 25px;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* --- the cards: photo + label, title and copy revealed on hover ---------- */

.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 363 / 350;
  padding: 24px;
  cursor: pointer;
  background-color: var(--product-white);
  border-radius: 4px;
}

.product-card-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Washes the photo out on hover so the revealed copy reads cleanly. */
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-card-label,
.product-card-reveal {
  position: absolute;
  left: 24px;
  right: 24px;
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.product-card .product-card-label {
  bottom: clamp(40px, 5vw, 64px);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1.3;
  color: var(--product-navy);
}

.product-card-reveal {
  top: clamp(72px, 8vw, 118px);
  opacity: 0;
  transform: translateY(24px);
}

.product-card .product-card-title {
  max-width: 90%;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  line-height: 1.3;
  color: var(--product-navy);
}

.product-card .product-card-text {
  max-width: 85%;
  margin-top: 18px;
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);
  line-height: 1.5;
  color: #000000;
}

.product-card:hover::after,
.product-card:focus-visible::after,
.product-card:focus-within::after {
  opacity: 1;
}

.product-card:hover .product-card-label,
.product-card:focus-visible .product-card-label,
.product-card:focus-within .product-card-label {
  opacity: 0;
  transform: translateY(-12px);
}

.product-card:hover .product-card-reveal,
.product-card:focus-visible .product-card-reveal,
.product-card:focus-within .product-card-reveal {
  opacity: 1;
  transform: none;
}

/* Touch screens have no hover: show the revealed state from the start. */
@media (hover: none) {
  .product-card::after { opacity: 1; }
  .product-card .product-card-label { opacity: 0; }
  .product-card-reveal { opacity: 1; transform: none; }
}

/* --- CTA, inside the yellow band ----------------------------------------- */

.product-cta {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
}

.product-cta .product-cta-title {
  max-width: 900px;
  margin-inline: auto;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.375rem);
  line-height: 1.3;
  color: var(--product-navy);
}

.product-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 12px clamp(32px, 4vw, 64px);
  font-family: var(--product-font);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.3;
  color: var(--product-white);
  text-decoration: none;
  background: var(--product-navy-deep);
  border: 1px solid var(--product-navy-deep);
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.product-cta-btn:hover,
.product-cta-btn:focus-visible {
  color: var(--product-navy-deep);
  background: var(--product-white);
}

/* --- video lightbox ------------------------------------------------------ */

.product-lightbox {
  width: min(960px, 100vw - 32px);
  max-width: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.product-lightbox::backdrop {
  background: rgba(2, 2, 27, 0.85);
}

.product-lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.product-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.product-lightbox-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  font: 400 32px/1 var(--product-font);
  color: var(--product-white);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.product-lightbox-close:hover,
.product-lightbox-close:focus-visible {
  color: var(--product-yellow);
}

/* --- breakpoints --------------------------------------------------------- */

@media (min-width: 600px) {
  .product-features .product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A lone last card sits in the middle, as on the old pages. */
  .product-card-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12.5px);
    justify-self: center;
  }
}

@media (min-width: 1024px) {
  .product-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 96px);
  }

  /* Side by side, the diagonal is meant to cut behind the video. */
  .product-overview {
    padding-bottom: clamp(32px, 4vw, 64px);
  }

  .product-features .product-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Reset the two-column centring, then centre a lone card in a row of three. */
  .product-card-grid > .product-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  .product-card-grid > .product-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }

  /* Journals: eight cards read as two rows of four. */
  .product-features .product-card-grid--8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Four across the columns are narrower than the 320px floor would allow,
     so let the aspect ratio alone set the height. */
  .product-card-grid--8 .product-card {
    min-height: 0;
    padding: 20px;
  }

  .product-card-grid--8 .product-card-label,
  .product-card-grid--8 .product-card-reveal {
    left: 20px;
    right: 20px;
  }

  .product-card-grid--8 .product-card .product-card-label {
    font-size: clamp(1.375rem, 1rem + 0.7vw, 1.75rem);
  }

  .product-card-grid--8 .product-card-reveal {
    top: clamp(56px, 6vw, 88px);
  }

  .product-card-grid--8 .product-card .product-card-title {
    font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.375rem);
  }

  .product-card-grid--8 .product-card .product-card-text {
    font-size: 0.9375rem;
  }

  /* Four cards (Audio Video Player) stay two by two, centred. */
  .product-features .product-card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-page *,
  .product-page *::before,
  .product-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .product-video:hover img,
  .product-video:focus-visible img {
    transform: none;
  }
}

/* ftw:new-pages product detail (figma 52:6284) */

/* ==========================================================================
   PAGE LAYOUT — Delivery product detail (ebooks.html, adaptive-learning.html)
   Figma: mon-k-website › "eBooks" (node 52:6284), 1440 desktop frame, used
   as the template for every product page moved onto it. The banner is the
   shared .product-hero; the three sections under it are this block,
   namespaced `pd-`. Measurements in comments are Figma px.
   ========================================================================== */

:root {
  --pd-yellow:   #FFC600;
  --pd-amber:    #F59E0B;   /* intro accent bar */
  --pd-navy:     #0F0F35;
  --pd-ink:      #272729;
  --pd-grey-ink: #4C4C4C;   /* features title */
  --pd-body:     #333333;
  --pd-band:     #F6F6F6;
  --pd-cta-ink:  #1B1B1B;
  --pd-btn-ink:  #282626;
  --pd-radius:   10px;
}

/* --- 2. intro ------------------------------------------------------------ */

.pd-intro {
  background: #ffffff;
  padding-block: clamp(48px, 8.3vw, 120px) clamp(48px, 7.7vw, 111px);
}

.pd-intro-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.pd-accent {
  display: block;
  width: 50px;
  height: 5px;
  background: var(--pd-amber);
}

.pd-intro .pd-intro-title {
  max-width: 540px;
  margin-top: 16px;
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.1875rem);   /* → 35px */
  line-height: 1.29;                                          /* 45 / 35 */
  color: var(--pd-navy);
}

.pd-hl {
  color: var(--pd-yellow);
}

.pd-intro .pd-intro-text {
  max-width: 515px;
  margin-top: 21px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pd-ink);
}

/* 311 + 23 + 341 of 675, the photo sitting 51px lower than the video. */
.pd-intro-media {
  display: grid;
  grid-template-columns: minmax(0, 311fr) minmax(0, 341fr);
  gap: 23px;
  align-items: start;
}

.pd-intro-video,
.pd-intro-photo {
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--pd-radius);
}

.pd-intro-photo {
  margin-top: clamp(24px, 3.5vw, 51px);
}

.pd-intro-video img,
.pd-intro-photo img {
  width: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.pd-intro-video img { aspect-ratio: 311 / 377; }
.pd-intro-photo img { aspect-ratio: 341 / 377; object-position: 0 40%; }

.pd-intro-video:hover img,
.pd-intro-video:focus-visible img {
  transform: scale(1.03);
}

/* --- 3. features --------------------------------------------------------- */

.pd-features {
  background: var(--pd-band);
  padding-block: clamp(56px, 6.5vw, 93px) clamp(56px, 6.8vw, 98px);
}

.pd-features .pd-features-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.1875rem);   /* → 35px */
  line-height: 1.37;                                          /* 48 / 35 */
  color: var(--pd-grey-ink);
}

.pd-features .pd-features-intro {
  max-width: 905px;
  margin: 8px auto 0;
  text-align: center;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);       /* → 17px */
  line-height: 1.5;
  color: var(--pd-body);
}

/* 401 x 421 cards, 18px column / 20px row gaps. */
.pd-features .pd-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 18px;
  margin-top: clamp(28px, 2.6vw, 38px);
}

.pd-card {
  display: flex;
  flex-direction: column;
  /* Figma sets the copy 24px in (the photo 22px in) — the narrower inset
     is what lets the longest titles hold one line in a 401px card. */
  padding: 32px 22px 0 24px;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--pd-radius);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* The Figma shows the first card with a yellow outline — the hover state. */
.pd-card:hover {
  border-color: var(--pd-yellow);
  box-shadow: 0 14px 28px -18px rgba(15, 15, 53, .3);
  transform: translateY(-2px);
}

.pd-card-badge {
  align-self: flex-start;
  padding: 2px 13px;
  font-weight: 500;
  font-size: 15px;
  line-height: 26px;
  color: #000000;
  background: var(--pd-yellow);
  border-radius: 5px;
}

.pd-card .pd-card-title {
  margin-top: 26px;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #000000;
}

.pd-card .pd-card-text {
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 26px;
  color: #000000;
}

/* The photo: 357 x 196, 22px in from the card's sides and floor. */
.pd-card .pd-card-img {
  width: calc(100% + 2px);
  max-width: none;
  margin: auto 0 22px -2px;
  aspect-ratio: 357 / 196;
  object-fit: cover;
  border-radius: var(--pd-radius);
}

/* The product photos carried over from the old pages (images/products/)
   fade to white at the foot, so they crop from nearer the top. */
.pd-card .pd-card-img[src*="/products/"],
.pd-intro-photo img[src*="/products/"] {
  object-position: 50% 28%;
}

/* Those pages' video thumbnails are near-square with the title running edge
   to edge, so they keep their own proportions instead of the eBooks 311:377
   crop, which clipped the words. */
.pd-intro-video img[src*="/products/"] {
  aspect-ratio: 800 / 819;
}

/* A lone last card (seven on Adaptive Learning) sits centred in its row. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .pd-cards > .pd-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
  }
}

@media (min-width: 1024px) {
  .pd-cards > .pd-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* Four and eight cards (Audio Video Player, Journals) run four across on
   wide screens, so no row is left with a lone card. */
@media (min-width: 1200px) {
  /* (0,3,0) so it outranks the three-column rule later in this block. */
  .pd-features .pd-cards.pd-cards--4,
  .pd-features .pd-cards.pd-cards--8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pd-cards--4 > .pd-card:last-child:nth-child(3n + 1),
  .pd-cards--8 > .pd-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}

/* --- 4. CTA ---------------------------------------------------------------- */

.pd-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9.9vw, 143px) clamp(64px, 9.3vw, 134px);
  text-align: center;
  background: #ffffff;
}

/* The faint grid texture along the bottom (Figma "s 1", 17% opacity). */
.pd-cta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: min(491px, 100%);
  background: url("../images/home/cta-background.jpg") center top / cover no-repeat;
  opacity: .17;
  pointer-events: none;
}

.pd-cta .pd-cta-title {
  max-width: 967px;
  margin-inline: auto;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1875rem);       /* → 35px */
  line-height: 1.43;                                          /* 50 / 35 */
  color: var(--pd-cta-ink);
}

.pd-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 229px;
  min-height: 55px;
  margin-top: 16px;
  padding: 0 24px;
  font-family: var(--product-font);
  font-weight: 700;
  font-size: 18px;
  color: var(--pd-btn-ink);
  text-decoration: none;
  background: var(--pd-yellow);
  border-radius: 5px;
  transition: background-color .2s ease;
}

.pd-cta-btn img {
  display: block;
  transition: transform .2s ease;
}

.pd-cta-btn:hover,
.pd-cta-btn:focus-visible {
  background: #ffd23d;
}

.pd-cta-btn:hover img,
.pd-cta-btn:focus-visible img {
  transform: translateX(3px);
}

/* --- breakpoints ----------------------------------------------------------- */

@media (min-width: 600px) {
  .pd-features .pd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* 540 copy / 25 gap / 675 media, of 1240. */
  .pd-intro-grid {
    grid-template-columns: minmax(0, 540fr) minmax(0, 675fr);
    gap: 25px;
  }

  .pd-features .pd-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pd-card {
    min-height: 421px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-card,
  .pd-card:hover,
  .pd-intro-video img,
  .pd-cta-btn img {
    transition: none;
    transform: none !important;
  }
}