/* =========================================================
   SURFCAMP ACCOMMODATION GRID
========================================================= */

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

  padding:clamp(32px,5vw,68px) 0;

  scroll-margin-top:110px;
}


/* =========================================================
   LAYOUT
========================================================= */

.surfcamp-accommodation-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(360px,.92fr);

  gap:clamp(28px,5vw,72px);

  align-items:center;
}


.surfcamp-accommodation-content{
  min-width:0;
}


.surfcamp-accommodation-content
.surfcamp-grid-head{
  margin-bottom:26px;
}


.surfcamp-accommodation-intro{
  max-width:780px;
}


.surfcamp-accommodation-intro > *:first-child{
  margin-top:0;
}


.surfcamp-accommodation-intro > *:last-child{
  margin-bottom:0;
}


/* =========================================================
   ACCORDION
========================================================= */

.surfcamp-accommodation-accordion{
  display:flex;
  flex-direction:column;

  gap:10px;
}


.surfcamp-accommodation-item{
  overflow:hidden;

  background:#fff;

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

  border-radius:
    20px 20px 24px 16px;

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

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


.surfcamp-accommodation-item:hover{
  border-color:
    rgba(26,166,183,.30);
}


.surfcamp-accommodation-item[open]{
  border-color:
    rgba(26,166,183,.32);

  box-shadow:
    0 14px 34px
    rgba(15,111,143,.11);
}


/* =========================================================
   SUMMARY
========================================================= */

.surfcamp-accommodation-summary{
  position:relative;

  display:grid;

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

  gap:14px;

  align-items:center;

  min-height:88px;

  padding:
    11px
    16px
    11px
    11px;

  cursor:pointer;

  list-style:none;

  background:#fff;

  transition:
    background .2s ease;
}


.surfcamp-accommodation-summary::-webkit-details-marker{
  display:none;
}


.surfcamp-accommodation-summary::marker{
  display:none;
}


.surfcamp-accommodation-summary:hover{
  background:
    rgba(26,166,183,.025);
}


.surfcamp-accommodation-summary:focus-visible{
  outline:
    3px solid
    rgba(94,211,223,.45);

  outline-offset:-3px;
}


/* =========================================================
   THUMB
========================================================= */

.surfcamp-accommodation-thumb{
  display:block;

  width:86px;
  height:66px;

  overflow:hidden;

  border-radius:
    15px 15px 18px 10px;

  background:#f3f7f8;

  isolation:isolate;

  transform:translateZ(0);
}


.surfcamp-accommodation-thumb img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);

  backface-visibility:hidden;

  transition:
    transform .35s ease;
}


.surfcamp-accommodation-item:hover
.surfcamp-accommodation-thumb img,

.surfcamp-accommodation-item[open]
.surfcamp-accommodation-thumb img{
  transform:scale(1.055);
}


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

.surfcamp-accommodation-summary-text{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:6px;
}


.surfcamp-accommodation-title{
  display:block;

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

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

  letter-spacing:-.025em;

  transition:color .18s ease;
}


.surfcamp-accommodation-item:hover
.surfcamp-accommodation-title,

.surfcamp-accommodation-item[open]
.surfcamp-accommodation-title{
  color:
    var(--surfcamp-grid-primary-dark,#0E7490);
}


.surfcamp-accommodation-label{
  display:block;

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

  font:
    700 12px/1.4
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;
}


/* =========================================================
   PLUS / MINUS
========================================================= */

.surfcamp-accommodation-toggle{
  position:relative;

  width:34px;
  height:34px;

  flex:0 0 34px;

  border-radius:999px;

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

  transition:
    background .2s ease,
    transform .25s ease;
}


.surfcamp-accommodation-toggle::before,
.surfcamp-accommodation-toggle::after{
  content:"";

  position:absolute;

  top:50%;
  left:50%;

  width:12px;
  height:2px;

  border-radius:999px;

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

  transform:
    translate(-50%,-50%);
}


.surfcamp-accommodation-toggle::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg);

  transition:
    opacity .2s ease,
    transform .25s ease;
}


.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle{
  background:
    linear-gradient(
      135deg,
      var(--surfcamp-grid-primary-light,#5ED3DF),
      var(--surfcamp-grid-primary-dark,#0E7490)
    );
}


.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::before,

.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::after{
  background:#fff;
}


.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::after{
  opacity:0;

  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


/* =========================================================
   PANEL
========================================================= */

.surfcamp-accommodation-panel{
  padding:
    4px
    20px
    20px
    111px;
}


.surfcamp-accommodation-copy{
  color:#374151;

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


.surfcamp-accommodation-copy p{
  margin:0 0 14px;
}


.surfcamp-accommodation-copy p:last-child{
  margin-bottom:0;
}


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

  font-weight:800;
}


.surfcamp-accommodation-copy ul,
.surfcamp-accommodation-copy ol{
  margin:
    13px
    0
    0;

  padding-left:20px;
}


.surfcamp-accommodation-copy li{
  margin-bottom:5px;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.surfcamp-accommodation-media{
  position:relative;

  min-height:520px;
  height:100%;

  overflow:hidden;

  border-radius:
    32px 32px 42px 18px;

  background:#f3f7f8;

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

  isolation:isolate;

  transform:translateZ(0);
}


.surfcamp-accommodation-media__image{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);

  backface-visibility:hidden;

  transition:
    transform .55s ease;
}


.surfcamp-accommodation-media:hover
.surfcamp-accommodation-media__image{
  transform:scale(1.035);
}


.surfcamp-accommodation-media__overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 40%,
      rgba(8,74,91,.34) 100%
    );

  pointer-events:none;
}


.surfcamp-accommodation-media__label{
  position:absolute;

  left:20px;
  bottom:20px;

  z-index:2;

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

  padding:
    9px
    14px;

  border-radius:999px;

  background:
    rgba(14,116,144,.92);

  color:#fff;

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

  backdrop-filter:
    blur(8px);

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

  letter-spacing:.06em;

  text-transform:uppercase;
}


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

@media(max-width:1100px){

  .surfcamp-accommodation-layout{
    grid-template-columns:
      minmax(0,1.1fr)
      minmax(310px,.9fr);

    gap:32px;
  }


  .surfcamp-accommodation-media{
    min-height:480px;
  }

}


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

@media(max-width:620px){

  .surfcamp-accommodation-section{
    padding:34px 0;
  }


  .surfcamp-accommodation-layout{
    grid-template-columns:1fr;

    gap:28px;
  }


  .surfcamp-accommodation-summary{
    grid-template-columns:
      auto
      minmax(0,1fr)
      auto;

    gap:11px;

    min-height:78px;

    padding:
      9px
      12px
      9px
      9px;
  }


  .surfcamp-accommodation-thumb{
    width:70px;
    height:58px;

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


  .surfcamp-accommodation-title{
    font-size:17px;
  }


  .surfcamp-accommodation-label{
    font-size:11px;
  }


  .surfcamp-accommodation-toggle{
    width:30px;
    height:30px;

    flex-basis:30px;
  }


  .surfcamp-accommodation-panel{
    padding:
      4px
      16px
      18px;
  }


  .surfcamp-accommodation-media{
    min-height:330px;

    aspect-ratio:4/3;

    border-radius:
      26px 26px 32px 16px;
  }

}


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

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

  .surfcamp-accommodation-thumb img,
  .surfcamp-accommodation-media__image,
  .surfcamp-accommodation-toggle{
    transition:none;
  }

}