/* =========================================================
   SURFCAMP OVERVIEW GRID
========================================================= */

.surfcamp-overview-section{
  position:relative;

  padding:
    clamp(24px,3vw,38px)
    0
    clamp(28px,3vw,44px);

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


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

.surfcamp-overview-grid{
  display:grid;

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

  gap:12px;

  align-items:stretch;
}


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

.surfcamp-overview-card{
  position:relative;

  display:flex;
  flex-direction:column;

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

  padding:18px;

  overflow:hidden;

  background:#ffffff;

  border:
    1px solid
    var(--surfcamp-grid-border,#e6edf0);

  border-radius:
    22px 22px 26px 16px;

  box-shadow:
    0 3px 14px
    rgba(15,111,143,.045);

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

  text-decoration:none;

  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease;

  isolation:isolate;
}


/* obere Akzentlinie */

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

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

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

  opacity:.85;
}


/* =========================================================
   CLICKABLE
========================================================= */

a.surfcamp-overview-card{
  color:
    var(--surfcamp-grid-text,#22272a);

  text-decoration:none;
}


a.surfcamp-overview-card:hover,
a.surfcamp-overview-card:focus{
  color:
    var(--surfcamp-grid-text,#22272a);

  text-decoration:none;

  transform:translateY(-4px);

  border-color:
    rgba(26,166,183,.30);

  box-shadow:
    0 17px 36px
    rgba(15,111,143,.12);
}


a.surfcamp-overview-card:focus-visible{
  outline:
    3px solid
    rgba(94,211,223,.42);

  outline-offset:3px;
}


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

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

  width:42px;
  height:42px;

  flex:0 0 42px;

  margin-bottom:17px;

  border-radius:
    15px 15px 17px 11px;

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

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

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


.surfcamp-overview-card__icon i{
  font-size:16px;
  line-height:1;
}


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

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


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

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

  min-width:0;

  margin-top:auto;
}


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

.surfcamp-overview-card__label{
  margin:0 0 7px;

  color:
    var(--surfcamp-grid-muted,#66727a);

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

  letter-spacing:.12em;

  text-transform:uppercase;
}


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

.surfcamp-overview-card__value{
  color:
    var(--surfcamp-grid-text,#22272a);

  font:
    850 16px/1.28
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  letter-spacing:-.018em;

  overflow-wrap:anywhere;

  transition:color .18s ease;
}


.surfcamp-overview-card--link:hover
.surfcamp-overview-card__value{
  color:
    var(--surfcamp-grid-primary-dark,#0E7490);
}


/* =========================================================
   ARROW
========================================================= */

.surfcamp-overview-card__arrow{
  position:absolute;

  top:18px;
  right:17px;

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

  width:28px;
  height:28px;

  border-radius:999px;

  background:
    rgba(26,166,183,.07);

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

  font-size:10px;

  transition:
    transform .20s ease,
    background .20s ease,
    color .20s ease;
}


.surfcamp-overview-card--link:hover
.surfcamp-overview-card__arrow{
  transform:translateY(3px);

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

  color:#ffffff;
}


/* =========================================================
   STATIC DESTINATION
========================================================= */

.surfcamp-overview-card--static{
  background:
    linear-gradient(
      145deg,
      rgba(94,211,223,.07),
      rgba(14,116,144,.035)
    );
}


/* =========================================================
   SPRUNGMARKEN
========================================================= */

#surfspots,
#reisezeit,
#surfkurs,
#verpflegung,
#unterkunft{
  scroll-margin-top:110px;
}


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

@media(max-width:1180px){

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

    gap:14px;
  }

}


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

@media(max-width:620px){

  .surfcamp-overview-section{
    padding:
      22px
      0
      32px;
  }


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

    gap:10px;
  }


  .surfcamp-overview-card{
    min-height:130px;

    padding:15px;

    border-radius:
      19px 19px 22px 13px;
  }


  .surfcamp-overview-card__icon{
    width:38px;
    height:38px;

    flex-basis:38px;

    margin-bottom:15px;

    border-radius:
      13px 13px 15px 9px;
  }


  .surfcamp-overview-card__icon i{
    font-size:15px;
  }


  .surfcamp-overview-card__arrow{
    top:14px;
    right:13px;

    width:26px;
    height:26px;
  }


  .surfcamp-overview-card__label{
    font-size:9px;
  }


  .surfcamp-overview-card__value{
    font-size:15px;
  }

}


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

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

  .surfcamp-overview-card,
  .surfcamp-overview-card__icon,
  .surfcamp-overview-card__arrow,
  .surfcamp-overview-card__value{
    transition:none;
  }


  a.surfcamp-overview-card:hover,
  a.surfcamp-overview-card:focus{
    transform:none;
  }

}