/*
 * Blank page template (page.hubl.html)
 * ------------------------------------
 * Interior pages use a hidden page <h1> plus a visible h2 in the
 * first Text + Media + CTA module. Global Content on the header
 * module can leave overlap_hero enabled even when the template
 * sets overlap_hero=false, so the nav floats over the first
 * section. Reserve the same top clearance as TextMediaCta
 * `.sectionPageHero`, Content with Bullets, CardStack sidebars,
 * and the blog listing hero band.
 *
 * Loaded only from page.hubl.html via require_css.
 */

.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-text-media-cta'],
.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-content-bullets'],
.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-card-stack'],
.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-hero'] {
  padding-block: calc(var(--space-3xl) + 5.5rem) var(--section-padding-y);
}

@media (min-width: 768px) {
  .gmpf-page-main
    .dnd-section:not(.dnd-section ~ .dnd-section)
    [data-testid='gmpf-text-media-cta'],
  .gmpf-page-main
    .dnd-section:not(.dnd-section ~ .dnd-section)
    [data-testid='gmpf-content-bullets'],
  .gmpf-page-main
    .dnd-section:not(.dnd-section ~ .dnd-section)
    [data-testid='gmpf-card-stack'],
  .gmpf-page-main
    .dnd-section:not(.dnd-section ~ .dnd-section)
    [data-testid='gmpf-hero'] {
    padding-block: calc(var(--space-4xl) + 6rem) var(--section-padding-y);
  }
}

/*
 * First-section CardStack sidebars with brand-gradient sit under the
 * overlap header's rounded primary row. Paint the hero clearance band
 * with the page surface so purple does not bleed behind the nav
 * corners; keep the gradient on the card column only.
 */
.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-card-stack'][data-section-bg='brand-gradient'] {
  position: relative;
  isolation: isolate;
  /* Match TextMediaCta brand-gradient-fade in the hero band. */
  background:
    linear-gradient(243.79deg, rgba(238, 238, 238, 0) 9.25%, #eeeeee 41.84%),
    linear-gradient(185.43deg, rgba(255, 255, 255, 0) 78.59%, #ffffff 93.49%),
    linear-gradient(0deg, var(--color-surface-soft-panel), var(--color-surface-soft-panel));
}

.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-card-stack'][data-section-bg='brand-gradient']::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--space-3xl) + 5.5rem);
  inset-block-end: 0;
  background: var(--gradient-brand-diagonal);
  z-index: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .gmpf-page-main
    .dnd-section:not(.dnd-section ~ .dnd-section)
    [data-testid='gmpf-card-stack'][data-section-bg='brand-gradient']::before {
    inset-block-start: calc(var(--space-4xl) + 6rem);
  }
}

.gmpf-page-main
  .dnd-section:not(.dnd-section ~ .dnd-section)
  [data-testid='gmpf-card-stack'][data-section-bg='brand-gradient']
  > .gmpf-container {
  position: relative;
  z-index: 1;
}

/*
 * Side-by-side promotional download rows (posters, graphics, etc.).
 * Kentico served previews at 460–500px inside centred two-column rows.
 */
.gmpf-page-main .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair) {
  --gmpf-promo-image-max: 28.75rem;
  box-sizing: border-box;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.gmpf-page-main .dnd-section.gmpf-poster-pair {
  --gmpf-promo-image-max: 31.25rem;
}

@media (min-width: 768px) {
  .gmpf-page-main .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair) {
    padding-inline: var(--space-2xl);
  }
}

.gmpf-page-main .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair) .dnd-column {
  padding-inline: var(--space-sm);
}

@media (min-width: 768px) {
  .gmpf-page-main .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair) .dnd-column {
    padding-inline: var(--space-md);
  }
}

.gmpf-page-main
  .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair)
  [data-testid='gmpf-image-inner'] {
  max-width: var(--gmpf-promo-image-max);
}

.gmpf-page-main
  .dnd-section:is(.gmpf-poster-pair, .gmpf-promo-graphics-pair)
  [data-testid='gmpf-image-link'] {
  max-width: var(--gmpf-promo-image-max);
  margin-inline: auto;
  box-shadow: var(--shadow-md);
}

.gmpf-page-main
  .dnd-section.gmpf-promo-graphics-pair
  [data-testid='gmpf-image-caption'] {
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Inline leaflet previews embedded in Text + Media + CTA body copy */
.gmpf-page-main [data-testid='gmpf-tmc-body'] :global(img) {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}