/*
 * Hero Destination Section — preemptive FOUC prevention.
 * Matches the DOM structure directly, so the flex-row layout applies on the
 * first paint (before decorateSections adds `data-section-type` via JS).
 * Requires :has() support (Chrome 105+, Safari 16.4+, Firefox 121+) — same
 * baseline as the rest of the site (see cross-browser matrix in PBI 1216373).
 * El selector :has() se perdió en ebd73fb9; sin él el hero rompe el grid de dos
 * columnas hasta que corre el JS (VSTS 1282508).
 * El :not([class*="grid-"]) es obligatorio: el selector estructural describe una
 * FORMA de DOM (rich-text + default-content con imagen), no un tipo de sección, y
 * sin la exclusion capturaba tambien las secciones con layout de grid — su
 * especificidad (0,3,2) gana al display:grid de grid-layout.css (0,3,0), y al dejar
 * de ser grid los `grid-column: span N` de los hijos se ignoran (VSTS 1282504).
 */
div.section:not([class*="grid-"]):has(> .cms-rich-text-wrapper):has(> .default-content-wrapper picture),
div.section[data-section-type='hero-destinations'],
div.section[data-section-type='hero-destinations-detail'] {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

div.section[data-section-type='hero-destinations'] .cms-rich-text-wrapper {
  max-width: 304px;

  .cms-rich-text-content div div {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  h1,h2, h3, h4, h5, h6, p {
    margin: 0;
    color: var(--color-text-normal-primary);
    font-weight: var(--font-weight-bold);
  }

  h1 {
        font-size: 52px;
  }

  p {
    font-size: 20px;
  }
}

div.section[data-section-type='hero-destinations-detail'] .cms-rich-text-wrapper {
  max-width: 304px;

  h1 {
    margin: 0;
    font-size: 44px;
    line-height: 1.3;
  }

  p {
    margin: 16px auto 0;
    font-size: 20px;
    line-height: 1.5;
  }
}

div.section[data-section-type='hero-destinations'] div.default-content-wrapper{
  p {
    margin: 0 !important;
  }
}

@media (max-width: 1023px) {
  div.section:not([class*="grid-"]):has(> .cms-rich-text-wrapper):has(> .default-content-wrapper picture),
  div.section[data-section-type='hero-destinations'],
  div.section[data-section-type='hero-destinations-detail'] {
    flex-direction: column;
    width: 100%;

    p {
        margin: 0;
    }
  }

  div.section[data-section-type='hero-destinations'] .cms-rich-text-wrapper, div.section[data-section-type='hero-destinations-detail'] .cms-rich-text-wrapper {
    align-self: baseline;
    max-width: none;
  } 

  div.section[data-section-type='hero-destinations'] .cms-rich-text-wrapper {
    h1{
        font-size: 44px;
    }
  }

  div.section[data-section-type='hero-destinations-detail'] .default-content-wrapper {
    img {
      width: 100%;
      height: auto;
    }
  }
}