/* =========================================================
   SURFCAMP INFO GRID
========================================================= */

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


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

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

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

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

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


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

.surfcamp-info-card{
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:100%;

  padding:24px;

  background:#fff;

  border:1px solid var(--surfcamp-grid-border,#e6edf0);
  border-radius:28px 28px 32px 22px;

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

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


/* obere Akzentlinie */

.surfcamp-info-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:4px;

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


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

  border-color:rgba(15,111,143,.26);

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


/* =========================================================
   ICON
========================================================= */

.surfcamp-info-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  flex:0 0 52px;

  margin:2px 0 21px;

  border-radius:18px 18px 20px 14px;

  background:linear-gradient(
    135deg,
    rgba(94,211,223,.20),
    rgba(14,116,144,.10)
  );

  color:var(--surfcamp-grid-primary-dark,#0E7490);

  transition:
    transform .22s ease,
    background .22s ease;
}


.surfcamp-info-card:hover .surfcamp-info-card__icon{
  transform:translateY(-2px) rotate(-2deg);

  background:linear-gradient(
    135deg,
    rgba(94,211,223,.28),
    rgba(14,116,144,.14)
  );
}


.surfcamp-info-card__icon i{
  font-size:20px;
  line-height:1;
}


.surfcamp-info-card__icon span{
  display:block;

  color:var(--surfcamp-grid-primary,#1AA6B7);

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

  transform:translateY(-2px);
}


/* =========================================================
   BODY
========================================================= */

.surfcamp-info-card__body{
  display:flex;
  flex-direction:column;

  flex:1;

  min-width:0;
}


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

.surfcamp-info-card__label{
  margin:0 0 9px !important;

  color:var(--surfcamp-grid-primary-dark,#0E7490);

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

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


/* =========================================================
   VALUE
========================================================= */

.surfcamp-info-card__value{
  margin:0 0 11px !important;

  color:var(--surfcamp-grid-text,#22272a);

  font:900 clamp(31px,3vw,42px)/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;

  letter-spacing:-.04em;
}


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

.surfcamp-info-card__title{
  margin:0;

  color:var(--surfcamp-grid-text,#22272a);

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

  letter-spacing:-.025em;

  transition:color .18s ease;
}


.surfcamp-info-card:hover .surfcamp-info-card__title,
.surfcamp-info-card:focus-within .surfcamp-info-card__title{
  color:var(--surfcamp-grid-primary-dark,#0E7490);
}


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

.surfcamp-info-card__text{
  margin-top:13px;

  color:#374151;

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

  opacity:.88;
}


.surfcamp-info-card__text p{
  margin:0 0 10px;
}


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


.surfcamp-info-card__text a{
  color:var(--surfcamp-grid-primary-dark,#0E7490);

  font-weight:700;

  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}


/* =========================================================
   ACTION
========================================================= */

.surfcamp-info-card__actions{
  margin-top:auto;
  padding-top:20px;
}


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

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

  gap:8px;

  min-height:42px;

  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;

  text-decoration:none;

  box-shadow:0 9px 20px rgba(14,116,144,.25);

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


.surfcamp-info-card__button:hover,
.surfcamp-info-card__button:focus{
  color:#fff;

  text-decoration:none;

  transform:translateY(-2px);

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

  box-shadow:0 12px 25px rgba(26,166,183,.32);
}


.surfcamp-info-card__button i{
  font-size:12px;
  line-height:1;

  transition:transform .2s ease;
}


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


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

@media(max-width:1100px){

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

}


@media(max-width:620px){

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


  .surfcamp-info-card{
    padding:22px;
  }

}