/* Desktop layout for the EN landing page (>=1024px only). Phones and tablets never match this
   file: every rule lives inside the media query below. The markup belongs to the React bundle,
   so selectors target its structure; desktop-v1.js adds the sticky offer card (#dk-offer) and
   the reviews grid (.dk-reviews-grid). Layout width: min(1140px, 100% - 64px) = content column
   + 40px gap + 360px card. */
@media (min-width: 1024px) {

  /* ---------- Hero: copy and CTA on the left, product preview on the right ---------- */
  main > section:first-child {
    padding: 28px 0 44px;
    text-align: left;
  }
  main > section:first-child > div {
    width: min(1140px, 100% - 64px);
    max-width: none;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    column-gap: 56px;
  }
  main > section:first-child > div > * {
    grid-column: 1;
    margin: 0;
  }
  main > section:first-child > div > :nth-child(1) { grid-row: 2; justify-self: start; }
  main > section:first-child > div > h1 {
    grid-row: 3;
    max-width: none;
    margin-top: 20px;
    padding: 0;
    font-size: 2.5rem;
  }
  main > section:first-child > div > :nth-child(3) {
    grid-row: 4;
    max-width: 34rem;
    margin-top: 20px;
    padding: 0;
  }
  main > section:first-child > div > :nth-child(4) {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    padding-top: 0;
    text-align: center;
  }
  main > section:first-child > div > :nth-child(4) > div:first-child { max-width: none; }
  /* The hero CTA ships hidden for phones; desktop has room for it. */
  main > section:first-child > div > div.hidden {
    display: block;
    grid-row: 5;
    margin-top: 28px;
  }
  main > section:first-child > div > div.hidden > button {
    width: auto;
    min-width: 300px;
  }
  main > section:first-child > div > :nth-child(6) {
    grid-row: 6;
    margin-top: 20px;
    padding-top: 0;
    align-items: flex-start;
  }

  /* Balanced line breaks avoid one-word last lines in the big headings. */
  main h1, main h2 { text-wrap: balance; }

  /* ---------- Content column on the left, room for the sticky card on the right ---------- */
  html:not(.dk-nocard) #what-readers-say,
  html:not(.dk-nocard) #historia-catolica,
  html:not(.dk-nocard) #what-you-get,
  html:not(.dk-nocard) #what-you-get + section,
  html:not(.dk-nocard) #what-you-get + section + section {
    padding-left: calc((100% - min(1140px, 100% - 64px)) / 2);
    padding-right: calc((100% - min(1140px, 100% - 64px)) / 2 + 400px);
  }
  html:not(.dk-nocard) #what-readers-say > div,
  html:not(.dk-nocard) #historia-catolica > div,
  html:not(.dk-nocard) #what-you-get > div,
  html:not(.dk-nocard) #what-you-get + section > div,
  html:not(.dk-nocard) #what-you-get + section + section > div {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* ---------- Reviews: grid instead of the one-at-a-time carousel ---------- */
  html.dk-reviews #what-readers-say > div > div.relative { display: none; }
  .dk-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 8px;
  }
  .dk-reviews-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 699 / 1050;
    object-fit: cover;
    background: #fff;
    border: 1px solid rgb(226 232 240 / 0.9);
    border-radius: 16px;
  }

  /* ---------- What you get: image beside the text ---------- */
  #what-you-get > div > div:last-child > div {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
  }
  #what-you-get > div > div:last-child > div > * { margin-top: 0; margin-bottom: 0; }

  /* ---------- Bonuses: keep the 3 columns inside the narrower column ---------- */
  #what-you-get + section .grid { gap: 16px; }
  #what-you-get + section .grid > div { padding: 16px; justify-content: flex-start; }
  #what-you-get + section .grid > div > div:nth-child(3) { flex-grow: 1; }
  #what-you-get + section .grid > div > div:nth-child(2) { height: 12rem; }

  /* ---------- Testimonials: static 2-column grid instead of the marquee ---------- */
  #what-you-get + section + section > div.relative > div.flex {
    display: block;
    overflow: visible;
    margin: 0;
  }
  /* Both marquee rows carry the same ten testimonials: keep the first row, as a grid. */
  #what-you-get + section + section > div.relative > div.pointer-events-none,
  #what-you-get + section + section > div.relative > div.flex:last-child { display: none; }
  #what-you-get + section + section .animate-marquee-continuous {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: auto;
    padding: 0;
    animation: none;
    will-change: auto;
  }
  #what-you-get + section + section .animate-marquee-continuous > div { width: auto; }
  #what-you-get + section + section .animate-marquee-continuous > div:nth-child(n + 7) { display: none; }

  /* ---------- Sticky offer card (built by desktop-v1.js) ---------- */
  #dk-offer {
    position: fixed;
    z-index: 20;
    top: 50%;
    right: calc((100% - min(1140px, 100% - 64px)) / 2);
    width: 360px;
    padding: 30px 22px 18px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  #dk-offer.dk-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  #dk-offer .dk-badge { font-size: 0.6875rem; padding: 5px 14px; }
  #dk-offer .dk-img {
    display: block;
    width: auto;
    height: 132px;
    margin: 0 auto;
    object-fit: contain;
  }
  #dk-offer .dk-price {
    padding: 6px 0 12px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
  }
  #dk-offer .dk-price p { font-size: 0.8125rem; }
  #dk-offer .dk-price div > span:first-child { font-size: 1.5rem; }
  #dk-offer .dk-price div > span:last-child { font-size: 3rem; line-height: 1; }
  #dk-offer .dk-list { padding: 12px 0; }
  #dk-offer .dk-list > div {
    margin: 0;
    padding: 3px 0;
    gap: 10px;
    font-size: 0.8125rem;
  }
  #dk-offer .dk-list > div > span:first-child { width: 18px; height: 18px; margin-top: 0; }
  #dk-offer .dk-cta { padding: 14px 16px; font-size: 1.0625rem; }
  #dk-offer .dk-cta:focus-visible { outline: 3px solid #1e3a8a; outline-offset: 3px; }
  #dk-offer .dk-secure { margin: 0; padding-top: 10px; font-size: 0.75rem; }
  #dk-offer .dk-secure span { text-align: left; }
}

/* Short laptop screens: drop the picture first, then the bonus lines, so the card always fits. */
@media (min-width: 1024px) and (max-height: 759px) {
  #dk-offer .dk-img { display: none; }
}
@media (min-width: 1024px) and (max-height: 599px) {
  #dk-offer .dk-list > div.dk-bonus { display: none; }
}

/* Small laptops: narrower card, and bonuses in 2 columns so the content column is not cramped. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html:not(.dk-nocard) #what-readers-say,
  html:not(.dk-nocard) #historia-catolica,
  html:not(.dk-nocard) #what-you-get,
  html:not(.dk-nocard) #what-you-get + section,
  html:not(.dk-nocard) #what-you-get + section + section {
    padding-right: calc((100% - min(1140px, 100% - 64px)) / 2 + 352px);
  }
  #dk-offer { width: 320px; padding-left: 18px; padding-right: 18px; }
  #dk-offer .dk-badge { font-size: 0.625rem; }
  #dk-offer .dk-cta { padding-left: 10px; padding-right: 10px; font-size: 0.875rem; }
  #what-you-get + section .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #what-you-get + section .grid > div:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
  #what-you-get > div > div:last-child > div { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}

@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 819px) {
  #dk-offer .dk-img { display: none; }
}

@media (min-width: 1280px) {
  main > section:first-child > div > h1 { font-size: 3rem; }
}

/* Landscape paper can be wider than 1024px: never print the floating card. */
@media print and (min-width: 1024px) {
  #dk-offer { display: none; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #dk-offer, #dk-offer.dk-show { transition: none; }
}