/* =========================================================
   SURFCAMP FEATURE GRID
========================================================= */

.surfcamp-feature-grid-section{
  color:var(--surfcamp-grid-text,#22272a);
  padding:clamp(32px,4vw,60px) 0;
}


/* =========================================================
   GRID
========================================================= */

.surfcamp-feature-grid{
  display:grid;
  gap:20px;
  align-items:stretch;
}


.surfcamp-feature-grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}


.surfcamp-feature-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}


.surfcamp-feature-grid--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}


/* =========================================================
   CARD
========================================================= */

.surfcamp-feature-card{
  position:relative;

  min-width:0;
  min-height:390px;

  overflow:hidden;

  border-radius:28px 28px 32px 22px;

  background:#f3f7f8;

  box-shadow:0 2px 12px rgba(15,111,143,.04);

  transition:
    transform .22s ease,
    box-shadow .22s ease;

  isolation:isolate;

  transform:translateZ(0);

  backface-visibility:hidden;
}


.surfcamp-feature-card:hover,
.surfcamp-feature-card:focus-within{
  transform:translateY(-5px);

  box-shadow:
    var(
      --surfcamp-grid-shadow,
      0 22px 54px rgba(15,111,143,.15)
    );
}


/* =========================================================
   SURFACE
========================================================= */

.surfcamp-feature-card__surface{
  position:relative;

  display:flex;

  width:100%;
  height:100%;
  min-height:390px;

  overflow:hidden;

  border-radius:inherit;

  color:#fff;

  text-decoration:none;

  isolation:isolate;

  transform:translateZ(0);
}


a.surfcamp-feature-card__surface:hover,
a.surfcamp-feature-card__surface:focus{
  color:#fff;
  text-decoration:none;
}


/* =========================================================
   MEDIA
========================================================= */

.surfcamp-feature-card__media{
  position:absolute;
  inset:0;

  overflow:hidden;

  border-radius:inherit;

  background:#f3f7f8;

  clip-path:inset(
    0 round 28px 28px 32px 22px
  );
}


.surfcamp-feature-card__image{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:inherit;

  transform:scale(1.001);

  backface-visibility:hidden;

  transition:transform .45s ease;
}


.surfcamp-feature-card:hover
.surfcamp-feature-card__image,
.surfcamp-feature-card:focus-within
.surfcamp-feature-card__image{
  transform:scale(1.05);
}


/* =========================================================
   IMAGE FALLBACK
========================================================= */

.surfcamp-feature-card__placeholder{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(255,255,255,.18),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--surfcamp-grid-primary-light,#5ED3DF),
      var(--surfcamp-grid-primary-dark,#0E7490)
    );
}


/* =========================================================
   OVERLAY
========================================================= */

.surfcamp-feature-card__overlay{
  position:absolute;
  inset:0;

  z-index:1;

  border-radius:inherit;

  clip-path:inset(
    0 round 28px 28px 32px 22px
  );

  background:linear-gradient(
    180deg,
    rgba(0,0,0,.02) 0%,
    rgba(10,80,104,.18) 28%,
    rgba(10,80,104,.62) 65%,
    rgba(8,55,73,.94) 100%
  );

  pointer-events:none;
}


/* =========================================================
   CONTENT
========================================================= */

.surfcamp-feature-card__content{
  position:relative;
  z-index:2;

  align-self:flex-end;

  width:100%;

  padding:25px;
}


/* =========================================================
   LABEL
========================================================= */

.surfcamp-feature-card__label{
  display:flex;
  align-items:center;

  gap:8px;

  width:max-content;
  max-width:100%;

  margin:0 0 11px !important;

  color:rgba(255,255,255,.84);

  font:800 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;

  letter-spacing:.14em;
  text-transform:uppercase;
}


.surfcamp-feature-card__label i{
  flex:0 0 auto;

  color:var(--surfcamp-grid-primary-light,#5ED3DF);

  font-size:11px;
}


/* =========================================================
   TITLE
========================================================= */

.surfcamp-feature-card__title{
  margin:0;

  color:#fff;

  font:900 28px/1.08 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;

  letter-spacing:-.03em;
}


/* =========================================================
   TEXT
========================================================= */

.surfcamp-feature-card__text{
  max-width:36em;

  margin-top:11px;

  color:rgba(255,255,255,.90);

  font:500 15px/1.52 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}


.surfcamp-feature-card__text p{
  margin:0 0 9px;
}


.surfcamp-feature-card__text p:last-child{
  margin-bottom:0;
}


.surfcamp-feature-card__text strong{
  color:#fff;
  font-weight:800;
}


/* =========================================================
   BUTTON
========================================================= */

.surfcamp-feature-card__button{
  position:relative;
  z-index:1;

  display:inline-flex;
  align-items:center;

  gap:8px;

  min-height:42px;

  margin-top:18px;

  padding:10px 15px;

  border-radius:999px;

  background:linear-gradient(
    90deg,
    var(--surfcamp-grid-primary-light,#5ED3DF),
    var(--surfcamp-grid-primary-dark,#0E7490)
  );

  color:#fff;

  font:900 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;

  box-shadow:0 10px 22px rgba(14,116,144,.32);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.surfcamp-feature-card__surface:hover
.surfcamp-feature-card__button,
.surfcamp-feature-card__surface:focus
.surfcamp-feature-card__button{
  transform:translateY(-2px);

  background:linear-gradient(
    90deg,
    #7FE7F0,
    #0C6B86
  );

  box-shadow:0 13px 28px rgba(26,166,183,.34);
}


.surfcamp-feature-card__button i{
  font-size:12px;

  line-height:1;

  transition:transform .2s ease;
}


.surfcamp-feature-card__surface:hover
.surfcamp-feature-card__button i,
.surfcamp-feature-card__surface:focus
.surfcamp-feature-card__button i{
  transform:translateX(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .surfcamp-feature-grid--4,
  .surfcamp-feature-grid--3,
  .surfcamp-feature-grid--2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


@media(max-width:620px){

  .surfcamp-feature-grid--4,
  .surfcamp-feature-grid--3,
  .surfcamp-feature-grid--2{
    grid-template-columns:1fr;
  }


  .surfcamp-feature-card,
  .surfcamp-feature-card__surface{
    min-height:360px;
  }


  .surfcamp-feature-card__content{
    padding:23px;
  }


  .surfcamp-feature-card__title{
    font-size:26px;
  }

}