/* Shared layout contract for Wagtail marketing blocks.
   Keep structural behavior here so blocks render consistently across
   whichever site-wide base template CSS is active. */

.page-section {
  position: relative;
}

.hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 32rem;
  padding: 5rem 0;
  background: var(--color-background, #ffffff);
  color: var(--color-text, #212529);
}

/* Neutralize vendor pseudo-element treatments so the hero behaves the same
   regardless of which base stylesheet is loaded underneath. */
.hero-section::after {
  content: none !important;
}

.hero-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Subtle overlay keeps foreground content readable over image backgrounds. */
.hero-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28));
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

.hero-section__eyebrow,
.hero-section__heading,
.hero-section__subheading,
.hero-section__ctas {
  position: relative;
  z-index: 1;
}

.hero-section__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
  color: inherit;
}

.hero-section__subheading {
  font-family: var(--font-body, Roboto, sans-serif);
  color: inherit;
  max-width: 44rem;
}

.hero-section .btn-primary {
  background-color: var(--color-primary, #0d6efd);
  border-color: var(--color-primary, #0d6efd);
}

.hero-section .btn-outline-secondary {
  color: var(--color-text, #212529);
  border-color: currentColor;
}

.hero-section--tone-dark {
  color: #ffffff;
}

.hero-section--tone-dark .btn-outline-secondary {
  color: #ffffff;
}

.hero-section--layout-center .hero-section__subheading {
  margin-left: auto;
  margin-right: auto;
}

.hero-section--height-md {
  min-height: 28rem;
}

.hero-section--height-lg {
  min-height: 36rem;
}

.hero-section--height-xl {
  min-height: 42rem;
}

@media (max-width: 991.98px) {
  .hero-section {
    min-height: 24rem;
    padding: 4rem 0;
  }

  .hero-section--height-lg,
  .hero-section--height-xl {
    min-height: 30rem;
  }
}

/* ============================================================
   Glide.js core CSS
   Extracted from material-kit-pro.css so both base templates
   get carousel support regardless of which kit CSS is loaded.
   ============================================================ */
.glide {
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.glide * {
    box-sizing: inherit
}

.glide__slides,
.glide__track {
    overflow: hidden
}

.glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    touch-action: pan-Y;
    padding: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    padding: 40px 0
}

.glide__slide,
.glide__slides--dragging {
    user-select: none
}

.glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.glide__slide a {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.glide__arrows,
.glide__bullets {
    -webkit-touch-callout: none;
    user-select: none
}

.glide--rtl {
    direction: rtl
}

.glide__arrow {
    position: absolute;
    display: block;
    top: 50%;
    z-index: 2;
    color: #fff;
    text-transform: uppercase;
    padding: 9px 12px;
    background-color: transparent;
    border: 2px solid hsla(0, 0%, 100%, .5);
    border-radius: 4px;
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    text-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
    opacity: 1;
    cursor: pointer;
    transition: opacity .15s ease, border .3s ease-in-out;
    transform: translateY(-50%);
    line-height: 1
}

.glide__arrow:focus {
    outline: none
}

.glide__arrow:hover {
    border-color: #fff
}

.glide__arrow--left {
    left: 2em
}

.glide__arrow--right {
    right: 2em
}

.glide__arrow--disabled {
    opacity: .33
}

.glide__bullets {
    position: absolute;
    z-index: 2;
    bottom: 2em;
    left: 50%;
    display: inline-flex;
    list-style: none;
    transform: translateX(-50%)
}

.glide__bullet {
    background-color: hsla(0, 0%, 100%, .5);
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    margin: 0 .25em
}

.glide__bullet:focus {
    outline: none
}

.glide__bullet:focus,
.glide__bullet:hover {
    border: 2px solid #fff;
    background-color: hsla(0, 0%, 100%, .5)
}

.glide__bullet--active {
    background-color: #fff
}

.glide--swipeable {
    cursor: grab;
    cursor: -webkit-grab
}

.glide--dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.glide__slides {
    overflow: visible;
    transform-style: preserve-3d
}

.glide__slide {
    transform: perspective(2000px)
}

.glide__container {
    border: 1px solid #f0f2f5;
    border-radius: .75rem;
    transition: all .5s ease;
    will-change: transform;
    transform-style: preserve-3d;
    position: relative
}

/* Logo / text carousel block (StreamField logo_carousel) */
.marketing-carousel-section {
  padding: 3rem 0;
}

.marketing-carousel__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
  font-weight: 600;
}

.marketing-glide-wrapper {
  position: relative;
}

.marketing-carousel__slide-inner {
  padding: 0.75rem 0.5rem;
}

.marketing-carousel__slide-img {
  max-height: 4rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.marketing-carousel__slide-label {
  font-size: 0.95rem;
  color: var(--color-text, #212529);
}

.marketing-carousel__arrows {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.marketing-carousel__arrow {
  border: 1px solid var(--color-secondary, #dee2e6);
  background: var(--color-background, #fff);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 1;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.marketing-carousel__arrow:hover {
  border-color: var(--color-primary, #0d6efd);
  color: var(--color-primary, #0d6efd);
}

/* Inline contact form block (StreamField inline_contact) */
.marketing-inline-contact-section {
  padding: 3rem 0;
}

.marketing-contact__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
}