/* iPad / tablet pass (761–1366px): iPad mini, Air and Pro, portrait and landscape.
   Loads last. Phones (≤760px) and desktops (>1366px) are not affected. */

@media (min-width: 761px) and (max-width: 1366px) {
  /* Community + Shop: the sticky note sits on the photo's corner instead of alone in an empty row */
  .side-hero { position: relative; }
  .side-hero .hero-note, [data-page="shop"] .hero-note {
    position: absolute; top: auto; bottom: 28px; right: 28px; left: auto;
    width: 200px; margin: 0; z-index: 3; transform: rotate(4deg);
  }

  /* Sport & Wellness: every activity photo the same height, so the captions line up */
  #app .act img { width: 100%; height: 260px; object-fit: cover; object-position: center 30%; }
  .acts { align-items: stretch; }

  /* Coffee: the slogan gets its own row under "Explore our coffee collection" */
  .collection-cta { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 28px; }
  #app .collection-cta > img { height: 100%; min-height: 220px; object-fit: cover; }
  .collection-cta .stamp-script {
    grid-column: 1 / -1; justify-self: center; text-align: center; white-space: normal;
    transform: none; max-width: 100%; padding: 0 24px 28px; font-size: clamp(40px, 5vw, 60px);
  }
}

/* iPad portrait (761–900px) */
@media (min-width: 761px) and (max-width: 900px) {
  /* the hero photo is the top 360px of the stacked hero */
  .side-hero .hero-note, [data-page="shop"] .hero-note { bottom: auto; top: 200px; }

  /* 4 columns, three full rows, no tile stretched wider than its photo:
     marathon yoga tai-chi triathlon / KAYAK hiking ski / snowboard fitness horse paddle */
  .acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .act.wide { grid-column: auto; }
  .act:nth-child(5) { grid-column: span 2; }
}

/* iPad landscape and iPad Pro (901–1366px) */
@media (min-width: 901px) and (max-width: 1366px) {
  /* 7 columns, two full rows: marathon yoga tai-chi triathlon KAYAK(3) / HIKING(2) ski snowboard fitness horse paddle */
  .acts { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .act.wide { grid-column: auto; }
  .act:nth-child(5) { grid-column: span 3; }
  .act:nth-child(6) { grid-column: span 2; }

  /* Coffee wellness: the latte photo fills its side instead of shrinking to a thumbnail */
  .wellness { grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto; }
  #app .wellness > img { height: 100%; min-height: 300px; object-fit: cover; }

  /* Community: the quote card fits its narrower column */
  .video-quote { font-size: clamp(26px, 2.6vw, 36px); }
}