/* =========================================================
   RELATED SURFCAMPS GRID
========================================================= */

.related-surfcamps-grid-section{
  background:transparent;

  padding:
    clamp(32px,4vw,60px)
    0;
}


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

.related-surfcamps-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;

  align-items:stretch;
}


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

.related-surfcamps-card{
  position:relative;

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

  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;
}


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

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


/* =========================================================
   LINK
========================================================= */

.related-surfcamps-card__link{
  position:relative;

  display:flex;

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

  overflow:hidden;

  border-radius:inherit;

  color:#fff;

  text-decoration:none;

  isolation:isolate;

  transform:translateZ(0);
}


.related-surfcamps-card__link:hover,
.related-surfcamps-card__link:focus{
  color:#fff;

  text-decoration:none;
}


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

.related-surfcamps-card__media{
  position:absolute;

  inset:0;

  overflow:hidden;

  border-radius:inherit;

  background:#f3f7f8;

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


.related-surfcamps-card__media img{
  position:absolute;

  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:inherit;

  transform:scale(1.001);

  transition:
    transform .45s ease;

  backface-visibility:hidden;
}


.related-surfcamps-card:hover
.related-surfcamps-card__media img,

.related-surfcamps-card:focus-within
.related-surfcamps-card__media img{
  transform:scale(1.05);
}


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

.related-surfcamps-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
========================================================= */

.related-surfcamps-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,.03) 0%,
      rgba(10,80,104,.20) 35%,
      rgba(10,80,104,.58) 68%,
      rgba(8,55,73,.94) 100%
    );

  pointer-events:none;
}


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

.related-surfcamps-card__content{
  position:relative;

  z-index:2;

  align-self:flex-end;

  width:100%;

  padding:24px;
}


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

.related-surfcamps-card__label{
  display:inline-flex;
  align-items:center;

  margin:0 0 11px;

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

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

  letter-spacing:.13em;

  text-transform:uppercase;
}


.related-surfcamps-card__label::before{
  content:"\f57d";

  font-family:
    "Font Awesome 5 Free";

  font-weight:900;

  margin-right:8px;

  opacity:.78;
}


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

.related-surfcamps-card__title{
  margin:0;

  color:#fff;

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

  letter-spacing:-.03em;
}


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

.related-surfcamps-card__button{
  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;
}


.related-surfcamps-card:hover
.related-surfcamps-card__button,

.related-surfcamps-card:focus-within
.related-surfcamps-card__button{
  transform:translateY(-2px);

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

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


.related-surfcamps-card__button i{
  font-size:12px;

  transition:
    transform .2s ease;
}


.related-surfcamps-card:hover
.related-surfcamps-card__button i,

.related-surfcamps-card:focus-within
.related-surfcamps-card__button i{
  transform:translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

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

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

  .related-surfcamps-grid{
    grid-template-columns:1fr;
  }


  .related-surfcamps-card,
  .related-surfcamps-card__link{
    min-height:320px;
  }


  .related-surfcamps-card__content{
    padding:22px;
  }


  .related-surfcamps-card__title{
    font-size:25px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .related-surfcamps-card,
  .related-surfcamps-card__media img,
  .related-surfcamps-card__button,
  .related-surfcamps-card__button i{
    transition:none;
  }


  .related-surfcamps-card:hover,
  .related-surfcamps-card:focus-within{
    transform:none;
  }


  .related-surfcamps-card:hover
  .related-surfcamps-card__media img,

  .related-surfcamps-card:focus-within
  .related-surfcamps-card__media img{
    transform:scale(1.001);
  }

}