/* Desktop layer for the mobile-first Stitch screens.
   Everything below 1024px is untouched — the phone layout ships as designed. */
@media (min-width: 1024px) {

  /* --- page chrome --------------------------------------------------- */
  main { padding-top: 5rem !important; }
  [data-app-shell] { padding-bottom: 0 !important; }

  /* Full-bleed tinted bands, but the content inside them stays readable. */
  main section,
  main > footer,
  main > div > footer {
    padding-inline: max(2rem, calc((100% - var(--shell, 1200px)) / 2)) !important;
    padding-block: 3rem !important;
  }
  [data-shell="narrow"] { --shell: 860px; }
  [data-shell="ticket"] { --shell: 1180px; }
  main[data-shell] { padding-inline: 2rem !important; }
  main[data-shell] > div { width: 100%; max-width: var(--shell); margin-inline: auto; }

  /* Pages whose own markup already centres itself (psg, assessment). */
  [data-native-desktop] main section { padding-inline: max(2rem, calc((100% - 1320px) / 2)) !important; }

  /* --- card lists become grids --------------------------------------- */
  [data-grid] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: start;
  }
  [data-grid="wide"] { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important; }
  [data-grid="two"]  { grid-template-columns: repeat(2, 1fr) !important; }

  /* Suites showcase: photo on one side, switcher + feature chips fill the other,
     so the short column no longer leaves a hole next to the tall photo. */
  #suites-section > [data-grid] { align-items: stretch !important; }
  #suites-section [data-suite-side] { height: 100%; }
  #suites-section [data-suite-side] > * { flex: 1 1 0; }
  #suites-section [data-suite-side] .grid { grid-auto-rows: 1fr; }

  /* --- homepage hero: text on the right, image on the left ----------- */
  [data-hero] {
    display: grid !important;
    grid-template-columns: 1fr 1.05fr;
    grid-template-rows: auto auto auto;
    column-gap: 3.5rem;
    row-gap: 1.25rem;
    align-items: center;
    padding-block: 4rem !important;
  }
  [data-hero] > :nth-child(1) { grid-column: 2; grid-row: 1 / 4; aspect-ratio: 4 / 3.4 !important; }
  [data-hero] > :nth-child(2) { grid-column: 1; grid-row: 1; align-self: end; }
  [data-hero] > :nth-child(3) { grid-column: 1; grid-row: 2; flex-direction: row !important; }
  [data-hero] > :nth-child(3) > a { width: auto; flex: 1; }
  [data-hero] > :nth-child(4) { grid-column: 1; grid-row: 3; align-self: start; }
  [data-hero] h1 { font-size: 40px !important; line-height: 60px !important; }
  [data-hero] p  { font-size: 17px !important; line-height: 32px !important; }

  /* --- homepage campaign poster: 512px source, never stretch it full-width --- */
  [data-campaign] { display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; }
  [data-campaign] > :first-child { aspect-ratio: 512 / 461 !important; }
  [data-campaign] > :first-child img { object-fit: contain !important; }

  /* --- booking: sticky action bar follows the content column --------- */
  [data-sticky-bar] {
    inset-inline: 0 !important;
    bottom: 0 !important;
    padding-inline: max(2rem, calc((100% - 860px) / 2)) !important;
    border-top: 1px solid rgb(196 198 207 / .5);
  }
  [data-sticky-bar] > div { max-width: none !important; }
}

/* The phone tab bar and the desktop bar must never both be on screen. */
@media (max-width: 1023.98px) { [data-desktop-header] { display: none !important; } }