/* Tablet-desktop hardening for iPad-class viewports using "Request Desktop Site".
   Keeps Blockboard's desktop visual language without squeezing full-width desktop compositions
   into a roughly 1024px CSS viewport. */

@media (min-width: 721px) and (max-width: 1180px) {
  body[data-page="home"] .page-shell {
    width: min(calc(100% - 24px), var(--max));
  }

  /* Keep the desktop header, but let every region actually fit at iPad widths. */
  body[data-page="home"] .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px 9px 12px;
  }

  body[data-page="home"] .brand { gap: 8px; }
  body[data-page="home"] .brand-mark { width: 28px; height: 28px; }
  body[data-page="home"] .brand strong { font-size: .75rem; }
  body[data-page="home"] .brand small { font-size: .51rem; }

  body[data-page="home"] .nav-links {
    min-width: 0;
    gap: 1px;
  }
  body[data-page="home"] .nav-links a {
    padding: 7px 7px;
    font-size: .71rem;
  }

  body[data-page="home"] .header-actions {
    min-width: 0;
    gap: 5px;
  }
  body[data-page="home"] .header-badge {
    padding: 7px 8px;
    font-size: .66rem;
  }
  body[data-page="home"] .account-button {
    max-width: 132px;
    padding: 6px 8px;
  }
  body[data-page="home"] .account-button > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Site Studio's full desktop layouts are intentionally wide. At tablet desktop widths,
   * preserve their visual personality but move the feature deck beneath the copy instead
   * of forcing a 300-500px media column beside an oversized headline.
   *
   * These selectors are deliberately stronger than the runtime layout rules because the
   * Site Studio layout stylesheet is injected after the static CSS.
   */
  html:root[data-bb-hero-v2="1"] body[data-page="home"] .dashboard-hero--cinematic {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 28px !important;
    padding: 34px 30px !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-copy--cinematic {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 780px) !important;
    max-width: 780px !important;
    padding: 0 !important;
    align-self: start !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-copy--cinematic h1 {
    max-width: 760px !important;
    font-size: clamp(3.7rem, 7.4vw, 5rem) !important;
    line-height: .93 !important;
    letter-spacing: -.052em !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-copy--cinematic > p {
    max-width: 620px !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-feature-group {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    transform: none !important;
    translate: none !important;
    transform-origin: center center !important;
  }

  html:root[data-bb-hero-v2="1"][data-bb-hero-companion]:not([data-bb-hero-companion="none"]) body[data-page="home"] .hero-feature-group {
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr) !important;
    align-items: stretch !important;
  }

  html:root[data-bb-hero-v2="1"][data-bb-hero-companion="none"] body[data-page="home"] .hero-feature-group {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-feature-group > .hero-feature {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 250px !important;
    transform: none !important;
  }

  html:root[data-bb-hero-v2="1"] body[data-page="home"] .hero-companion {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-height: 250px !important;
  }

  /* Panel keeps its framed appearance while becoming a horizontal tablet deck. */
  html:root[data-bb-hero-v2="1"][data-bb-hero-layout="panel"] body[data-page="home"] .hero-feature-group {
    padding: 10px !important;
    gap: 10px !important;
  }

  /* Spotlight remains centered even though its media deck moves into normal flow. */
  html:root[data-bb-hero-v2="1"][data-bb-hero-layout="spotlight"] body[data-page="home"] .hero-copy--cinematic {
    margin-inline: auto !important;
    text-align: center !important;
  }
  html:root[data-bb-hero-v2="1"][data-bb-hero-layout="spotlight"] body[data-page="home"] .hero-copy--cinematic > p {
    margin-inline: auto !important;
  }
  html:root[data-bb-hero-v2="1"][data-bb-hero-layout="spotlight"] body[data-page="home"] .hero-actions {
    justify-content: center !important;
  }

  /* Always give the artwork a clean fallback surface if a browser refuses an image decode. */
  body[data-page="home"] .hero-nether-backdrop {
    background:
      radial-gradient(circle at 66% 42%, rgba(168, 108, 193, .17), transparent 24%),
      radial-gradient(circle at 78% 66%, rgba(217, 111, 79, .11), transparent 30%),
      #0b0709;
  }
  body[data-page="home"] .hero-feature__custom {
    background:
      radial-gradient(circle at 60% 36%, rgba(168, 108, 193, .15), transparent 28%),
      linear-gradient(145deg, rgba(217, 111, 79, .08), transparent 52%),
      #0b0709;
  }
  body[data-page="home"] .hero-feature__custom img {
    color: transparent;
  }

  /*
   * The bundled nether-hero-static.webp is malformed binary in the current repository.
   * Hide only that built-in asset so Safari/Opera do not paint their broken-image glyph;
   * user-supplied Site Studio images remain untouched and continue to render normally.
   */
  body[data-page="home"] .hero-nether-backdrop img[src$="nether-hero-static.webp"],
  body[data-page="home"] .hero-feature img[src$="nether-hero-static.webp"] {
    display: none !important;
  }

  /*
   * hero-content-fit is injected after static CSS and still sees the published desktop
   * hero height. Explicitly neutralize its zoom/padding at tablet-desktop widths so the
   * first line never tucks beneath the sticky header.
   */
  html:root[data-bb-hero-v2="1"] body[data-page="home"] .dashboard-hero--cinematic[data-bb-hero-fit-active="1"] {
    padding: 58px 30px 34px !important;
    gap: 28px !important;
  }
  html:root[data-bb-hero-v2="1"] body[data-page="home"] .dashboard-hero--cinematic[data-bb-hero-fit-active="1"] .hero-copy--cinematic,
  html:root[data-bb-hero-v2="1"] body[data-page="home"] .dashboard-hero--cinematic[data-bb-hero-fit-active="1"] .hero-feature-group {
    zoom: 1 !important;
  }
  html:root[data-bb-hero-v2="1"] body[data-page="home"] .dashboard-hero--cinematic[data-bb-hero-fit-active="1"] .hero-copy--cinematic {
    transform: none !important;
    translate: none !important;
    margin-top: 0 !important;
  }
}