/* Elementor: CITIM Hero widget (hero with masked image) */
@layer components {
  .CITIMHeader {
    padding: var(--citim-spacing-xl, 4rem) var(--citim-spacing-md, 1.5rem);
    border-radius: 32px;
    max-width: 1200px;
    margin: var(--citim-spacing-xl, 4rem) auto;
  }

  /* Full width: background spans container, inner content stays constrained */
  .CITIMHeader--fullwidth {
    max-width: none;
    width: 100%;
  }

  .CITIMHeader--fullwidth .CITIMHeader__inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Rounded corners: top, bottom, all, or none */
  .CITIMHeader--rounded-all {
    border-radius: 32px;
  }

  .CITIMHeader--rounded-top {
    border-radius: 32px 32px 0 0;
  }

  .CITIMHeader--rounded-bottom {
    border-radius: 0 0 32px 32px;
  }

  .CITIMHeader--rounded-none {
    border-radius: 0;
  }

  .CITIMHeader--no-vertical-margin {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Vertical block padding (padding-bottom follows this; padding-top can be overridden by --pad-top-nav) */
  .CITIMHeader--pad-sm {
    padding-top: var(--citim-spacing-lg, 2rem);
    padding-bottom: var(--citim-spacing-lg, 2rem);
  }

  .CITIMHeader--pad-lg {
    padding-top: calc(var(--citim-spacing-xl, 4rem) * 1.5);
    padding-bottom: calc(var(--citim-spacing-xl, 4rem) * 1.5);
  }

  /* After --pad-* so it overrides only padding-top; padding-bottom keeps the value from --pad-sm/md/lg */
  .CITIMHeader--pad-top-nav {
    padding-top: 150px;
  }

  @media (max-width: 768px) {
    .CITIMHeader--pad-top-nav {
      padding-top: 80px !important;
    }
  }

  .CITIMHeader__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
  }

  .CITIMHeader--image-left .CITIMHeader__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .CITIMHeader__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .CITIMHeader--image-left .CITIMHeader__content {
    order: 2;
  }

  .CITIMHeader--image-right .CITIMHeader__content {
    order: 1;
  }

  /* Subtitle: same accent as title/excerpt per scheme, dimmed via opacity (all combos) */
  .CITIMHeader__subtitle {
    margin: 0;
    font-size: var(--citim-typo-h3-font-size, 1rem);
    font-family: var(--citim-font-secondary, "Roboto", sans-serif);
    font-weight: 500;
    opacity: 0.6;
  }

  .CITIMHeader--subtitle-lg .CITIMHeader__subtitle {
    font-size: var(--citim-typo-h2-font-size, 1.3125rem);
    opacity: 1;
  }

  .CITIMHeader__title {
    margin: 0;
    font-family: var(--citim-typo-h1-font-family, "ES Build", sans-serif);
    font-size: clamp(2rem, 3vw, 2.8rem);
    letter-spacing: var(--citim-typo-h1-letter-spacing, -1px);
    line-height: var(--citim-typo-h1-line-height, 1.1);
    font-weight: var(--citim-typo-h1-font-weight, 400);
  }

  .CITIMHeader--title-sm .CITIMHeader__title {
    font-size: clamp(1.75rem, 2.5vw, 2.2rem);
  }

  .CITIMHeader--title-lg .CITIMHeader__title {
    font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  }

  .CITIMHeader__excerpt {
    margin: 0;
    max-width: 32rem;
    font-family: var(--citim-font-secondary, "Roboto", sans-serif);
    font-size: var(--citim-typo-paragraph-font-size, 1rem);
  }

  /* div (not p) so lists/shortcodes stay inside; force nested markup to use scheme color */
  .CITIMHeader__excerpt * {
    color: inherit;
  }

  .CITIMHeader__cta {
    margin-top: 0.5rem;
  }

  .CITIMHeader__ctaButton {
    text-decoration: none;
  }

  .CITIMHeader__ctaButton:hover {
    text-decoration: none;
  }

  /* Color schemes
   * - emeraude: emeraude_light bg + bleu_signal text + cta
   * - corail: lime_light bg + corail text + cta
   */

  /* Header color schemes – 8 brand combos matching motif grid (2x4) */

  /* 1) Lime clair (fond) + Émeraude (accent) – top left */
  .CITIMHeader--scheme-lime_emeraude {
    background-color: var(--citim-color-lime_light, #f4fec2);
  }

  .CITIMHeader--scheme-lime_emeraude .CITIMHeader__title,
  .CITIMHeader--scheme-lime_emeraude .CITIMHeader__excerpt,
  .CITIMHeader--scheme-lime_emeraude .CITIMHeader__subtitle {
    color: var(--citim-color-emeraude, #3a9980);
  }

  .CITIMHeader--scheme-lime_emeraude .CITIMHeader__mediaMask {
    background-color: var(--citim-color-emeraude, #3a9980);
  }

  /* 2) Bleu signal (fond) + Lime clair (accent) – top 2nd */
  .CITIMHeader--scheme-bleu_lime {
    background-color: var(--citim-color-bleu_signal, #4a75f5);
  }

  .CITIMHeader--scheme-bleu_lime .CITIMHeader__title,
  .CITIMHeader--scheme-bleu_lime .CITIMHeader__excerpt,
  .CITIMHeader--scheme-bleu_lime .CITIMHeader__subtitle {
    color: var(--citim-color-lime_light, #f4fec2);
  }

  .CITIMHeader--scheme-bleu_lime .CITIMHeader__mediaMask {
    background-color: var(--citim-color-lime_light, #f4fec2);
  }

  /* 3) Émeraude clair (fond) + Corail (accent) – top 3rd */
  .CITIMHeader--scheme-emeraude_corail {
    background-color: var(--citim-color-emeraude_light, #b6e6d3);
  }

  .CITIMHeader--scheme-emeraude_corail .CITIMHeader__title,
  .CITIMHeader--scheme-emeraude_corail .CITIMHeader__excerpt,
  .CITIMHeader--scheme-emeraude_corail .CITIMHeader__subtitle {
    color: var(--citim-color-corail, #f29980);
  }

  .CITIMHeader--scheme-emeraude_corail .CITIMHeader__mediaMask {
    background-color: var(--citim-color-corail, #f29980);
  }

  /* 4) Corail clair (fond) + Bleu signal (accent) – top right */
  .CITIMHeader--scheme-corail_bleu {
    background-color: var(--citim-color-corail_light, #f6bfaf);
  }

  .CITIMHeader--scheme-corail_bleu .CITIMHeader__title,
  .CITIMHeader--scheme-corail_bleu .CITIMHeader__excerpt,
  .CITIMHeader--scheme-corail_bleu .CITIMHeader__subtitle {
    color: var(--citim-color-bleu_signal, #4a75f5);
  }

  .CITIMHeader--scheme-corail_bleu .CITIMHeader__mediaMask {
    background-color: var(--citim-color-bleu_signal, #4a75f5);
  }

  /* 5) Émeraude (fond) + Lime clair (accent) – bottom left */
  .CITIMHeader--scheme-emeraude_lime {
    background-color: var(--citim-color-emeraude, #3a9980);
  }

  .CITIMHeader--scheme-emeraude_lime .CITIMHeader__title,
  .CITIMHeader--scheme-emeraude_lime .CITIMHeader__excerpt,
  .CITIMHeader--scheme-emeraude_lime .CITIMHeader__subtitle {
    color: var(--citim-color-lime_light, #f4fec2);
  }

  .CITIMHeader--scheme-emeraude_lime .CITIMHeader__mediaMask {
    background-color: var(--citim-color-lime_light, #f4fec2);
  }

  /* 6) Lime clair (fond) + Bleu signal (accent) – bottom 2nd */
  .CITIMHeader--scheme-lime_bleu {
    background-color: var(--citim-color-lime_light, #f4fec2);
  }

  .CITIMHeader--scheme-lime_bleu .CITIMHeader__title,
  .CITIMHeader--scheme-lime_bleu .CITIMHeader__excerpt,
  .CITIMHeader--scheme-lime_bleu .CITIMHeader__subtitle {
    color: var(--citim-color-bleu_signal, #4a75f5);
  }

  .CITIMHeader--scheme-lime_bleu .CITIMHeader__mediaMask {
    background-color: var(--citim-color-bleu_signal, #4a75f5);
  }

  /* 7) Corail (fond) + Émeraude clair (accent) – bottom 3rd */
  .CITIMHeader--scheme-corail_emeraude {
    background-color: var(--citim-color-corail, #f29980);
  }

  .CITIMHeader--scheme-corail_emeraude .CITIMHeader__title,
  .CITIMHeader--scheme-corail_emeraude .CITIMHeader__excerpt,
  .CITIMHeader--scheme-corail_emeraude .CITIMHeader__subtitle {
    color: var(--citim-color-emeraude_light, #b6e6d3);
  }

  .CITIMHeader--scheme-corail_emeraude .CITIMHeader__mediaMask {
    background-color: var(--citim-color-emeraude_light, #b6e6d3);
  }

  /* 8) Bleu signal clair (fond) + Émeraude (accent) – bottom right */
  .CITIMHeader--scheme-bleu_light_emeraude {
    background-color: var(--citim-color-bleu_signal_light, #d9e8ff);
  }

  .CITIMHeader--scheme-bleu_light_emeraude .CITIMHeader__title,
  .CITIMHeader--scheme-bleu_light_emeraude .CITIMHeader__excerpt,
  .CITIMHeader--scheme-bleu_light_emeraude .CITIMHeader__subtitle {
    color: var(--citim-color-emeraude, #3a9980);
  }

  .CITIMHeader--scheme-bleu_light_emeraude .CITIMHeader__mediaMask {
    background-color: var(--citim-color-emeraude, #3a9980);
  }

  /* 9) Émeraude clair (fond) + Bleu signal (accent) – extra combo */
  .CITIMHeader--scheme-emeraudeLight_bleu {
    background-color: var(--citim-color-emeraude_light, #b6e6d3);
  }

  .CITIMHeader--scheme-emeraudeLight_bleu .CITIMHeader__title,
  .CITIMHeader--scheme-emeraudeLight_bleu .CITIMHeader__excerpt,
  .CITIMHeader--scheme-emeraudeLight_bleu .CITIMHeader__subtitle {
    color: var(--citim-color-bleu_signal, #4a75f5);
  }

  .CITIMHeader--scheme-emeraudeLight_bleu .CITIMHeader__mediaMask {
    background-color: var(--citim-color-bleu_signal, #4a75f5);
  }

  /* Optional: keep PNG/SVG transparency visible (no colored background behind the image) */
  .CITIMHeader--image-bg-transparent .CITIMHeader__mediaMask {
    background-color: transparent;
  }

  .CITIMHeader__media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .CITIMHeader__media--noMask .CITIMHeader__mediaMask {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .CITIMHeader--image-left .CITIMHeader__media {
    order: 1;
  }

  .CITIMHeader--image-right .CITIMHeader__media {
    order: 2;
  }

  .CITIMHeader__mediaMask {
    position: relative;
    width: min(420px, 100%);
    aspect-ratio: 1 / 1;
    -webkit-mask-image: var(--citim-header-mask-url);
    mask-image: var(--citim-header-mask-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    overflow: hidden;
  }

  .CITIMHeader__mediaMask img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  .CITIMHeader__media--noMask .CITIMHeader__mediaMask {
    aspect-ratio: auto;
  }

  .CITIMHeader__media--noMask .CITIMHeader__mediaMask img {
    object-fit: contain;
  }

  .CITIMHeader__media--offsetLower {
    transform: translateY(20%);
  }

  /* When image is offset lower, reduce vertical padding by half to compensate */
  .CITIMHeader:has(.CITIMHeader__media--offsetLower) {
    padding-top: calc(var(--citim-spacing-xl, 4rem) * 0.5);
    padding-bottom: calc(var(--citim-spacing-xl, 4rem) * 0.5);
  }

  .CITIMHeader:has(.CITIMHeader__media--offsetLower).CITIMHeader--pad-sm {
    padding-top: calc(var(--citim-spacing-lg, 2rem) * 0.5);
    padding-bottom: calc(var(--citim-spacing-lg, 2rem) * 0.5);
  }

  .CITIMHeader:has(.CITIMHeader__media--offsetLower).CITIMHeader--pad-lg {
    padding-top: calc(var(--citim-spacing-xl, 4rem) * 1.5 * 0.5);
    padding-bottom: calc(var(--citim-spacing-xl, 4rem) * 1.5 * 0.5);
  }

  @media (max-width: 767px) {
    .CITIMHeader__media--offsetLower {
      transform: none;
    }

    .CITIMHeader:has(.CITIMHeader__media--offsetLower) {
      padding-top: calc(var(--citim-spacing-lg, 3rem) * 0.5);
      padding-bottom: calc(var(--citim-spacing-lg, 3rem) * 0.5);
    }
  }

  @media (max-width: 767px) {
    .CITIMHeader {
      padding: var(--citim-spacing-lg, 3rem) var(--citim-spacing-md, 1.5rem);
      border-radius: 24px;
    }

    .CITIMHeader__mediaMask {
      max-height: 45vw;
    }

    .CITIMHeader--rounded-all {
      border-radius: 24px;
    }

    .CITIMHeader--rounded-top {
      border-radius: 24px 24px 0 0;
    }

    .CITIMHeader--rounded-bottom {
      border-radius: 0 0 24px 24px;
    }

    .CITIMHeader--rounded-none {
      border-radius: 0;
    }

    .CITIMHeader__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }

    .CITIMHeader__content {
      order: 2;
      text-align: left;
    }

    .CITIMHeader__media {
      order: 1;
    }
  }
}