@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";

/* --------------------------------------------------- */
/* -- Custom CSS -------------------- EH 15-07-2024 -- */
/* -- nl/cards/flying-blue-cards clone --------------- */
/* --------------------------------------------------- */

#amex-header {display: none!important;}
#amex-footer {display: none!important;} 

.container-fluid{
  --_fontScale:1;
  --_heroOverlap:var(--Sz5);
}
/* -- Fonts ------------------------ */
.container-fluid h1 {
  font-size: clamp(2.2rem, (1.56rem + 4.1vw) * var(--_fontScale), 4rem)!important;
  line-height: clamp(2.9rem, (1.94rem + 4.28vw) * var(--_fontScale), 4.3rem)!important;
}

.container-fluid h2 {
  font-size: clamp(2rem, (1.64rem + 2.28vw) * var(--_fontScale), 4rem)!important;
  line-height: clamp(2.5rem, (1.64rem + 3.28vw) * var(--_fontScale), 5rem)!important;
}

.container-fluid h3 {
  font-size: clamp(1.6rem, (1.24rem + 1.28vw) * var(--_fontScale), 2.4rem)!important;
  line-height: clamp(2rem, (1.24rem + 2.28vw) * var(--_fontScale), 3.43rem)!important;
}

.container-fluid h4 {
  font-size: clamp(1.6rem, (1.04rem + 0.98vw) * var(--_fontScale), 2.96rem)!important;
  line-height: clamp(1.8rem, (1.04rem + 1.98vw) * var(--_fontScale), 3.96rem)!important;
}

.container-fluid h5 {
  font-size: clamp(1.4rem, (0.84rem + 0.68vw) * var(--_fontScale), 2.66rem)!important;
  line-height: clamp(1.6rem, (0.84rem + 1.68vw) * var(--_fontScale), 3.66rem)!important;
}

.container-fluid p, h6, ul, ol, li {  
  font-size: clamp(1.05rem, (0.2rem + 0.8vw) * var(--_fontScale), 1.2rem)!important;
  line-height: clamp(1.5rem, 2.7vw * var(--_fontScale), 1.8rem)!important;
}

/* -- Hero -------------------------- */
.Hero-custom::before{
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  background:radial-gradient( farthest-corner at 0px 0px,rgba(0,0,0,.7) 20%, transparent)!important;
  z-index:1;
}
.Hero-custom .hidden-md-down::before{
  display:none;
}
.Hero-custom{  
  padding-bottom:calc(var(--_heroOverlap) + var(--Sz4));
  margin-bottom:0px!important;
  min-height: auto!important;
  position: relative;
}
.container-fluid .Hero-custom .row .col-md-6:first-child{
  padding-block: var(--Sz1)!important;
  margin-top: 0px!important;
}
.container-fluid .Hero-custom .row .col-md-6:last-child{
  justify-content: flex-start;
}

.Hero-custom .container{
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.Hero-custom .col-md-6:first-child{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.Hero-custom .richtext{
  max-width: 90ch;
}

/* -- Content row -------------------------- */
#row2{
  z-index:3;
  padding-bottom:var(--Sz5)
}

#row2 .row{
  row-gap: calc(var(--Sz3) * 2);
}

/* -- Content columns -------------------------- */
.row2column{
  position: relative;  
  background-color: white;
  border-radius: 0px 0px var(--BrSmall) var(--BrSmall);
  padding:var(--Sz0)!important;
}

.row2column p:has(a){
  margin-bottom: 0px;
}

.row2column .row{
  padding-block: var(--Sz01)!important;
  margin-inline: 0;
}

.row2column img{  
  position: relative;
  opacity: 0;
  bottom: -80px;
  animation-name: fadeIn;
  animation-duration: 500ms;
  animation-direction: linear;
  animation-fill-mode: forwards;
  filter:drop-shadow(var(--BoxShadow));
}


.row2column .container{
  --_containerPad:2rem;
  margin-top: calc((0px - (var(--_heroOverlap) + var(--Sz2))));
  padding:var(--_containerPad)
}

.container-fluid .Hero-custom .row .col-md-6:first-child{
  margin-bottom: 0px!important;
}

.container-fluid .grid .container .row .row2column .col-md-12{
  left:0!important;
  margin-bottom: 0px!important;
  padding:0;
}

.container-fluid .grid .container .row .row2column .image{
  margin-bottom: 1rem
}


/* -- Gold specific -------------------------- */
#rowGold img{
  animation-delay: 400ms;
}

@media(width > 769px){
  #rowGold img{
    scale: .8;
    transform-origin: left bottom;
  }
}

/* -- Plat specific -------------------------- */
#rowPlatinum .meestgekozen{
  position: absolute;
  left:0px;
  top:-75px;
  background-color: var(--LightBlue);  
  height: 100%;
  z-index: -1;
  padding: var(--Sz0);
  width: 240px;
  max-width: 100%;
  border-radius: var(--BrBig) var(--BrBig) 0px 0px;
  text-align: center;
}


#rowPlatinum{
  box-shadow: var(--SmallBoxShadow);  
  position: relative;
}

#rowPlatinum .meestgekozen p{ 
  font-size: 20px!important;
}

@keyframes fadeIn{
  to{
    opacity: 1;
    bottom:0px;
  }
}

@media(width <= 769px){
  .row2column .container{
    --_containerPad:.7rem;
  }
  
  #row2 .row{
    flex-direction: column;
  }

  #rowPlatinum .meestgekozen{
    top:-60px;   
    text-align:center;
  }
  .container-fluid .grid .container .row .row2column .col-md-12{
    padding:0px!important;
  }
}

@media(width <= 1024px){
  #rowPlatinum .meestgekozen p{
    font-size:14px!important;
  }
}

@media(width <= 420px){
  .container-fluid{
    --_heroOverlap:var(--Sz1);
  }
}