/* Tablet portrait keeps the banner proportional and gives the portrait room. */
@media (min-width: 641px) and (max-width: 1099px) and (orientation: portrait) {
  header { height: clamp(58px, 5.25svh, 72px); }

  .hero .roles {
    top: clamp(285px, 27svh, 375px);
    bottom: auto;
    left: 4%;
  }

  .hero .hero-image { transform: scale(1); }
  html.tablet-subtle .hero .hero-image { transform: scale(1.12); }
  html.tablet-original .hero .hero-image { transform: scale(1.22); }
  html.tablet-full .hero .hero-image { transform: none; object-position: center center; }
}

/* Tablet landscape follows the approved wide hero composition. */
@media (min-width: 1001px) and (max-width: 1450px) and (min-height: 601px) and (orientation: landscape) {
  header { height: 48px; }

  .hero { height: calc(100svh - 48px); min-height: 0; }

  .hero .hero-image {
    transform: none;
    object-position: center 65%;
  }

  .hero .roles {
    left: 8%;
    bottom: clamp(215px, calc(26svh + 30px), 305px);
    font-size: clamp(52px, 5.3vw, 72px);
    line-height: 1.08;
  }
}

@media (min-width: 1300px) and (max-width: 1450px) and (min-height: 601px) and (orientation: landscape) {
  .hero .hero-image { object-position: right top; }
}

@media (min-width: 1001px) and (max-width: 1299px) and (min-height: 601px) and (orientation: landscape) {
  .hero .hero-image { object-position: right center; }
}

/* Bring the smaller landscape role groups closer to the chair, matching the 13-inch balance. */
@media (min-width: 1150px) and (max-width: 1299px) and (min-height: 601px) and (orientation: landscape) {
  .hero .roles { left: 12.5%; }
}

@media (min-width: 1001px) and (max-width: 1149px) and (min-height: 601px) and (orientation: landscape) {
  .hero .roles { left: 14%; }
}

/* Tablet greetings follow the approved desktop hierarchy. */
html.tablet-portrait-board .hero h1 {
  left: 46%; top: 10%; font-size: 20px; font-weight: 500; color: #171815;
}
/* Match both Pro portraits to Mini's 20px greeting at 1133px hero height. */
@media (min-width: 800px) and (max-width: 1099px) and (orientation: portrait) {
  html.tablet-portrait-board .hero h1 { font-size: 1.765225svh; }
}
html.tablet-landscape-board .hero h1 {
  left: 46%; top: 10%; font-size: 20px; font-weight: 500; color: #171815;
}
html.tablet-portrait-board .hero-name,
html.tablet-landscape-board .hero-name {
  display: inline-block; cursor: pointer;
  transition: color .22s ease, transform .22s ease;
}
html.tablet-portrait-board .hero-name:focus-visible,
html.tablet-portrait-board .hero-name.is-selected,
html.tablet-landscape-board .hero-name:hover,
html.tablet-landscape-board .hero-name:focus-visible,
html.tablet-landscape-board .hero-name.is-selected {
  color: #234b74; transform: translateX(7px);
}
@media (hover: hover) {
  html.tablet-portrait-board .hero-name:hover {
    color: #234b74; transform: translateX(7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.tablet-portrait-board .hero-name,
  html.tablet-landscape-board .hero-name { transition: none; }
}

/* Keep the thirteen-inch greeting entirely on the plaster wall. */
@media (min-width: 1300px) {
  html.tablet-landscape-board .hero h1 { left: 44%; }
}
/* Mini uses the approved wider desktop artwork to fit head and shoes without a margin. */
@media (max-width: 1149px) {
  html.tablet-landscape-board .hero .hero-image {
    object-fit: cover; object-position: right center;
  }
}

/* Real tablet portraits use the same approved crop as the review wrapper.
   The 1860px canvas adds 324px on the left of the former 1536px portrait:
   shift its centered crop by 162px at the 100svh / 1024px cover scale. */
html.tablet-portrait-board:not(.tablet-review) .hero .hero-image {
  object-position: calc(50% - 15.8203125svh) top;
}

/* Safari toolbars must not switch a landscape tablet into the fallback hero.
   On short landscape windows, keep enough image height for head and shoes;
   the final strip can scroll into view rather than cropping Kevin's head. */
html.tablet-landscape-board header { height: 48px; }
html.tablet-landscape-board .hero {
  height: calc(100svh - 48px);
  min-height: calc(100vw * 1024 / 1860);
}
html.tablet-landscape-board .hero .hero-image { transform: none; }