/* =========================================================
   SURFCAMP INTRO GRID
========================================================= */

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

  padding:
    clamp(38px,5vw,72px)
    0;
}


/* =========================================================
   LAYOUT
   gleiche Grundlogik wie Content Split
========================================================= */

.surfcamp-intro-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(380px,.92fr);

  gap:
    clamp(36px,6vw,82px);

  align-items:start;
}


.surfcamp-intro-grid__left,
.surfcamp-intro-grid__right{
  min-width:0;
}


/* =========================================================
   KICKER
========================================================= */

.surfcamp-intro-grid
.surfcamp-grid-kicker{
  margin-bottom:18px;
}


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

.surfcamp-intro-grid
.surfcamp-grid-title{
  max-width:650px;

  margin-bottom:0;
}


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

.surfcamp-intro-grid__text{
  max-width:720px;

  color:#374151;

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


.surfcamp-intro-grid__left
.surfcamp-intro-grid__text{
  margin-top:24px;
}


.surfcamp-intro-grid__right
.surfcamp-intro-grid__text{
  margin-top:0;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.surfcamp-intro-grid__text p{
  margin:0 0 17px;
}


.surfcamp-intro-grid__text p:last-child{
  margin-bottom:0;
}


/* =========================================================
   EMPHASIS
========================================================= */

.surfcamp-intro-grid__text strong{
  color:
    var(--surfcamp-grid-text,#22272a);

  font-weight:800;
}


/* =========================================================
   LINKS
========================================================= */

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

  font-weight:700;

  text-decoration:underline;

  text-underline-offset:3px;
}


/* =========================================================
   LISTS
========================================================= */

.surfcamp-intro-grid__text ul,
.surfcamp-intro-grid__text ol{
  margin:
    18px
    0
    0;

  padding-left:21px;
}


.surfcamp-intro-grid__text li{
  margin-bottom:7px;
}


/* =========================================================
   RIGHT COLUMN ACCENT
========================================================= */

.surfcamp-intro-grid__right{
  padding:
    clamp(24px,3vw,34px);

  background:
    linear-gradient(
      145deg,
      rgba(94,211,223,.08),
      rgba(14,116,144,.035)
    );

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

  border-radius:
    24px 24px 30px 16px;
}


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

@media(max-width:1100px){

  .surfcamp-intro-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,.85fr);

    gap:38px;
  }

}


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

@media(max-width:620px){

  .surfcamp-intro-grid-section{
    padding:
      34px
      0
      38px;
  }


  .surfcamp-intro-grid{
    display:flex;

    flex-direction:column;

    gap:26px;
  }


  .surfcamp-intro-grid__left,
  .surfcamp-intro-grid__right{
    width:100%;
  }


  .surfcamp-intro-grid__left
  .surfcamp-intro-grid__text{
    margin-top:20px;
  }


  .surfcamp-intro-grid__text{
    max-width:100%;

    font-size:15px;
    line-height:1.65;
  }


  .surfcamp-intro-grid__right{
    padding:22px;

    border-radius:
      20px 20px 24px 13px;
  }

}