/* activities: ported from sections/camp-activities.liquid */
.camp-act {
  padding-block: var(--camp-space-6) var(--camp-space-7);
}

.camp-act__head {
  position: relative;
  display: grid;
  gap: var(--camp-space-3);
  max-width: 720px;
  padding-inline-end: 110px;
}

.camp-act__art {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 110px;
  height: 110px;
}

.camp-act__el {
  position: absolute;
}

.camp-act__el--a {
  width: 76px;
  inset-block-start: 0;
  inset-inline-end: 0;
  rotate: 12deg;
}

.camp-act__el--b {
  width: 58px;
  inset-block-end: 0;
  inset-inline-start: 0;
  rotate: -14deg;
}

/* Pillar chips: jump to a pillar */
.camp-act__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--camp-space-2);
  margin-block-start: var(--camp-space-5);
}

.camp-act__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--camp-space-4);
  border-radius: var(--camp-radius-pill);
  background: var(--camp-white);
  color: var(--camp-navy);
  font-weight: var(--camp-weight-bold);
  text-decoration: none;
  box-shadow: 0 3px 0 rgb(0 57 115 / 0.12);
  transition: transform 250ms var(--camp-ease-spring);
}

.camp-act__chip::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pc);
}

.camp-act__chip:hover {
  transform: translateY(-2px) rotate(-2deg);
}

/* One band per pillar, in that pillar's colours */
.camp-act__pillar {
  position: relative;
  background: var(--section-bg);
  scroll-margin-top: calc(var(--camp-header-h) + 8px);
}

.camp-act__pillar-head {
  display: flex;
  align-items: center;
  gap: var(--camp-space-4);
  margin-block-end: var(--camp-space-6);
}

.camp-act__pillar-art {
  position: relative;
  flex: none;
  width: 92px;
  height: 84px;
}

.camp-act__pel {
  position: absolute;
}

.camp-act__pel--a {
  width: 66px;
  inset-block-start: 0;
  inset-inline-start: 0;
  rotate: -10deg;
}

.camp-act__pel--b {
  width: 48px;
  inset-block-end: 0;
  inset-inline-end: 0;
  rotate: 12deg;
}

.camp-act__pillar-head .camp-h2 {
  margin: 0;
}

.camp-act__intro {
  margin: var(--camp-space-1) 0 0;
  max-width: 560px;
}

.camp-act__providers {
  display: grid;
  gap: var(--camp-space-5);
}

.camp-act__card {
  display: grid;
  gap: var(--camp-space-4);
  min-width: 0;
  padding: var(--camp-space-5);
  border-radius: var(--camp-radius-lg);
  background: var(--camp-white);
  box-shadow: 0 6px 0 rgb(0 57 115 / 0.08);
  border-block-start: 6px solid var(--pc);
}

.camp-act__card-head {
  display: flex;
  align-items: center;
  gap: var(--camp-space-4);
}

.camp-act__card-head .camp-h3 {
  margin: 0;
}

.camp-act__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 84px;
  height: 84px;
  padding: 10px;
  border-radius: 22px;
  background: var(--camp-white);
  box-shadow: inset 0 0 0 2px rgb(0 57 115 / 0.1);
  rotate: -3deg;
}

.camp-act__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.camp-act__text {
  margin: 4px 0 0;
  color: var(--camp-ink, var(--camp-navy));
}

/* Photos: a swipeable strip of polaroids on phones, a tidy row on desktop */
.camp-act__photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: var(--camp-space-3);
  margin: 0 calc(var(--camp-space-5) * -1);
  padding: var(--camp-space-2) var(--camp-space-5) var(--camp-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.camp-act__photos::-webkit-scrollbar {
  display: none;
}

.camp-act__photo {
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  padding: 6px;
  border-radius: 16px;
  background: var(--camp-white);
  box-shadow: 0 4px 14px rgb(0 57 115 / 0.14);
  rotate: var(--tilt);
  transition: rotate 300ms var(--camp-ease-spring);
}

.camp-act__photo:hover {
  rotate: 0deg;
}

.camp-act__photo img,
.camp-act__photo .camp-img-missing {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
}

.camp-act__end {
  padding-block: var(--camp-space-8);
}

.camp-act__end-wrap {
  display: grid;
  justify-items: center;
  gap: var(--camp-space-5);
  text-align: center;
}

.camp-act__end .camp-btn {
  gap: var(--camp-space-3);
}

.camp-act__bag {
  width: 28px;
  rotate: -8deg;
}

@media screen and (min-width: 750px) {
  .camp-act__photos {
    grid-auto-columns: 220px;
  }
}

@media screen and (min-width: 990px) {
  .camp-act__head {
    padding-inline-end: 180px;
  }

  .camp-act__art {
    width: 170px;
    height: 150px;
  }

  .camp-act__el--a {
    width: 120px;
  }

  .camp-act__el--b {
    width: 84px;
  }

  .camp-act__pillar-art {
    width: 128px;
    height: 112px;
  }

  .camp-act__pel--a {
    width: 92px;
  }

  .camp-act__pel--b {
    width: 66px;
  }

  .camp-act__card {
    padding: var(--camp-space-6);
  }

  .camp-act__photos {
    margin-inline: calc(var(--camp-space-6) * -1);
    padding-inline: var(--camp-space-6);
    grid-auto-columns: 240px;
  }
}