/**
 * Copyright (C) 2025 Deutsche Lufthansa AG. All rights reserved.
 * 
 * This software is the confidential and proprietary information of Deutsche Lufthansa AG.
 */
.promo-hero {
    position: relative;
    width: 100%;
    min-height: 450px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.promo-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(118, 118, 118, 0.5); /* #767676 with 50% opacity */
    z-index: 2;
    pointer-events: none; /* does not block clicks or interactions */
}


/* Background layer */
.promo-hero__background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; /* Default fallback */
    z-index: 1;
}

.promo-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* behind content */
    pointer-events: none;
}

.dcep-moving-image {    
    display: block;
    width: 100%;
    height: 100%;
}

/* Content layer */
.promo-hero__content {
    width: 100%;
	max-width: none;
    position: relative;
    z-index: 3;
    padding: 88px;
    color: #ffffff;
}

.heading-small {
	margin-bottom: 48px;
}

.promo-hero__description {
    line-height: 24px;
    font-size: 18px;
    margin-bottom: 44px;
}

.brandColour_coreBlue { background: linear-gradient(
    170deg,
    #2254BB 0%,
    #021959 100%
  ) !important; }
.brandColour_lightBlue { background: linear-gradient(
    170deg,
    #388EF1 0%,
    #2E5DB7 100%
  ) !important; }
.brandColour_sand { background: linear-gradient(
    170deg,
    #B9B5AA 0%,
    #9C917E 100%
  ) !important; }
.brandColour_teal { background: linear-gradient(
    170deg,
    #199CA2 0%,
    #045064 100%
  ) !important; }
.brandColour_red { background: linear-gradient(
    170deg,
    #FE3964 0%,
    #CE0027 100%
  ) !important; }
.brandColour_purple { background: linear-gradient(
    170deg,
    #BF7097 0%,
    #B34D8C 100%
  ) !important; }

.brandColour_alt_coreBlue { background: linear-gradient(
    170deg,
    #2254BB 0%,
    #021959 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_coreBlue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #2254BB 0%,
    #021959 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}
.brandColour_alt_lightBlue { background: linear-gradient(
    170deg,
    #388EF1 0%,
    #2E5DB7 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_lightBlue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #388EF1 0%,
    #2E5DB7 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}
.brandColour_alt_sand { background: linear-gradient(
    170deg,
    #B9B5AA 0%,
    #9C917E 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_sand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #B9B5AA 0%,
    #9C917E 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}
.brandColour_alt_teal { background: linear-gradient(
    170deg,
    #199CA2 0%,
    #045064 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_teal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #199CA2 0%,
    #045064 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}
.brandColour_alt_red { background: linear-gradient(
    170deg,
    #FE3964 0%,
    #CE0027 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_red::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #FE3964 0%,
    #CE0027 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}
.brandColour_alt_purple { background: linear-gradient(
    170deg,
    #BF7097 0%,
    #B34D8C 100%
  ) !important; 
  clip-path: content-box;
}
.brandColour_alt_purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #BF7097 0%,
    #B34D8C 100%
  );
  /* THIS creates: diagonal → flat */
  clip-path: polygon(
    0 0,        /* top-left */
    100% 0,     /* top-right */
    100% 30%,   /* horizontal flat end */
    70% 30%,    /* flat start */
    0 70%       /* diagonal down */
  );
}


/* LEFT aligned block */
.promo-hero--left .promo-hero__content {
    width: 50%;
    margin-right: auto;
    text-align: left;
}

/* RIGHT aligned block */
.promo-hero--right .promo-hero__content {
    width: 776px;
    margin-left: 450px;
}

.promo-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 28px;
    margin: 8px 12px 0 0;

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;

    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.promo-hero__cta-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.promo-hero__cta-label {
    display: inline-block;
}

.promo-hero__cta--primaryBtn {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
}

.promo-hero__cta--primaryBtn:hover {
    background-color: rgba(255,255,255,0.85);
    transform: translateY(-2px);
}

.promo-hero__cta--secondaryBtn {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.promo-hero__cta--secondaryBtn:hover {
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

.promo-hero__cta--textLink:hover {
    text-decoration: underline;
}

.promo-hero__cta--textLink,
.promo-hero__cta--externalLink {
    background-color: transparent;
    color: #ffffff;
    padding: 0;
    margin: 8px 0 0 0;
    border: none;
    font-weight: 600;
    padding-right: 20px;
}

.promo-hero__cta--externalLink:hover {
    text-decoration: underline;
}

/* SPLIT LAYOUT CONTAINER */
.promo-hero__split-layout {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 1; /* below text, above base */
}

/* PANELS */
.promo-hero__panel {
    height: 100%;
}

.promo-hero__panel--brand {
    background-color: var(--brand-colour, #767676); /* model.brandColourClass sets this */
    flex: 1;
}

.promo-hero__panel--image {
    background-size: cover;
    background-position: center;
    width: 450px;
}


/* MOBILE */
@media (max-width: 767px) {

    .promo-hero {
        height: 750px;
    }
    .promo-hero__split-layout {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* TOP IMAGE */
    .promo-hero__panel--image {
        width: 100%;
        height: 290px !important;
        order: 1;
    }
    /* BOTTOM BRAND PANEL */
    .promo-hero__panel--brand {
        width: 100%;
        height: calc(750px - 290px); /* 460px */
        display: flex;
        justify-content: center;   /* horizontal */
        align-items: center;        /* vertical */
        position: relative;
        z-index: 1;
        order: 2;
    }
    /* Move the content INSIDE the brand panel visually */
     .promo-hero__content {
        position: absolute;
        top: 290px;                  /* sits inside brand panel */
        height: calc(750px - 290px); /* 460px */      
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        padding: 10px;
        max-width: 90%;              /* readable text width */
        left: 50%;
        transform: translateX(-50%); /* perfectly centered horizontally */
        text-align: left;
        z-index: 2;
    }

    .heading-small {
        margin-bottom: 60px;
    }

	.promo-hero--brandColour .promo-hero__content {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: 90%;    /* readability */
        margin: 0 auto;
        text-align: left;
        z-index: 2;
    }

	.moving-image {
		position: inherit;
    }

    /* Background image focal point dynamic override */
     .promo-hero.mobile-focus--top-left .promo-hero__background {
        background-position: top left;
    }
    .promo-hero.mobile-focus--top-center .promo-hero__background {
        background-position: top center;
    }
    .promo-hero.mobile-focus--top-right .promo-hero__background {
        background-position: top right;
    }
    .promo-hero.mobile-focus--center-left .promo-hero__background {
        background-position: center left;
    }
    .promo-hero.mobile-focus--center-center .promo-hero__background {
        background-position: center center;
    }
    .promo-hero.mobile-focus--center-right .promo-hero__background {
        background-position: center right;
    }
    .promo-hero.mobile-focus--bottom-left .promo-hero__background {
        background-position: bottom left;
    }
    .promo-hero.mobile-focus--bottom-center .promo-hero__background {
        background-position: bottom center;
    }
    .promo-hero.mobile-focus--bottom-right .promo-hero__background {
        background-position: bottom right;
    }

    /* On mobile, content overlays left */
    .promo-hero--left .promo-hero__content,
    .promo-hero--right .promo-hero__content {
        margin: 0 auto;
        text-align: left;
        width: 100%;
    }

	.promo-hero__ctas {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        gap: 12px;
        width: 100%;
        margin-top: 20px;
    }

    .promo-hero__cta {
        margin: 0;
    	width: 100%;
    	justify-content: center;
    }

    .promo-hero__cta--link {
        padding: 0;
        margin: 0;
    }

    .promo-hero__cta--textLink,
    .promo-hero__cta--externalLink {
        background-color: transparent;
        color: #ffffff;
        padding: 0;
        margin: 8px 0 0 0;
        border: none;
        font-weight: 600;
    }
}

@media (max-width: 500px) {
    .brandColour_alt_coreBlue::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #2254BB 0%,
            #021959 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
    .brandColour_alt_lightBlue::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #388EF1 0%,
            #2E5DB7 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
    .brandColour_alt_sand::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #B9B5AA 0%,
            #9C917E 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
    .brandColour_alt_teal::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #199CA2 0%,
            #045064 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
    .brandColour_alt_red::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #FE3964 0%,
            #CE0027 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
    .brandColour_alt_purple::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #BF7097 0%,
            #B34D8C 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            40% 30%,    /* flat start */
            0 70%       /* diagonal down */
            );
    }
}

@media (min-width: 900px) {
	.brandColour_alt_coreBlue::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #2254BB 0%,
            #021959 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
    .brandColour_alt_lightBlue::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #388EF1 0%,
            #2E5DB7 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
    .brandColour_alt_sand::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #B9B5AA 0%,
            #9C917E 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
    .brandColour_alt_teal::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #199CA2 0%,
            #045064 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
    .brandColour_alt_red::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #FE3964 0%,
            #CE0027 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
    .brandColour_alt_purple::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            #BF7097 0%,
            #B34D8C 100%
            );
        /* THIS creates: diagonal → flat */
        clip-path: polygon(
            0 0,        /* top-left */
            100% 0,     /* top-right */
            100% 30%,   /* horizontal flat end */
            70% 30%,    /* flat start */
            0 65%       /* diagonal down */
            );
    }
}