.camp-showcase {
  position: relative;
  overflow: clip;
  padding-block: clamp(4.5rem, 8vw, 7rem);
  background: var(--color-accent-soft);
}

.camp-showcase::before,
.camp-showcase::after {
  position: absolute;
  border: 1px solid rgb(229 57 53 / 14%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.camp-showcase::before { width: 24rem; height: 24rem; inset: -12rem auto auto -10rem; }
.camp-showcase::after { width: 32rem; height: 32rem; inset: auto -16rem -18rem auto; }

.camp-showcase__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(29rem, 34rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.camp-showcase__copy { padding-top: 0.75rem; }

.camp-showcase__eyebrow {
  margin: 0 0 1rem;
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.camp-showcase h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.5rem, 6.5vw, 6.8rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.88;
}

.camp-showcase h2 span,
.camp-showcase h2 em { display: block; }
.camp-showcase h2 em { color: var(--color-accent); font-style: normal; }

.camp-showcase__lead {
  max-width: 32rem;
  margin: 1.4rem 0 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.camp-day {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.camp-day li {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: white;
}

.camp-day li > span {
  display: inline-flex;
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.55rem;
  background: var(--color-accent-soft-strong);
  color: var(--color-accent);
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.camp-day strong { display: block; font-size: 0.8125rem; line-height: 1.35; }
.camp-day p { margin: 0.35rem 0 0; color: var(--color-muted); font-size: 0.6875rem; line-height: 1.5; }

.camp-showcase__cta { margin-top: 1.75rem; }

.camp-panel {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  background: white;
  box-shadow: 0 1.5rem 4rem rgb(70 32 36 / 10%);
}

.camp-pricing h3,
.camp-shifts h3 {
  margin: 0 0 0.85rem;
  color: var(--color-muted);
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.camp-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.camp-price {
  min-width: 0;
  padding: 0.9rem 0.65rem;
  border-radius: 1rem;
  background: var(--color-accent-soft);
  text-align: center;
}

.camp-price--primary { background: var(--color-accent-soft-strong); }
.camp-price p,
.camp-price strong,
.camp-price span,
.camp-price del { display: block; }
.camp-price p { margin: 0 0 0.25rem; color: var(--color-muted); font-size: 0.625rem; font-weight: 600; }
.camp-price del { min-height: 0.8rem; color: #9b8e91; font-size: 0.5625rem; }
.camp-price strong { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 900; letter-spacing: -0.035em; white-space: nowrap; }
.camp-price span { margin-top: 0.2rem; color: var(--color-muted); font-size: 0.5625rem; }

.camp-panel__notes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1.5rem; }
.camp-panel__notes span { padding: 0.4rem 0.65rem; border: 1px solid var(--color-border); border-radius: 0.7rem; color: var(--color-muted); font-size: 0.625rem; font-weight: 750; }
.camp-panel__notes .camp-panel__note-accent { border: 2px solid var(--color-accent); color: var(--color-accent); font-weight: 900; }

.camp-shifts__list { display: grid; gap: 0.5rem; }

.camp-shift {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  width: 100%;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  background: var(--color-surface-warm);
  text-align: left;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.camp-shift:hover:not(:disabled) { border-color: rgb(229 57 53 / 22%); background: #fffafa; transform: translateX(0.12rem); }
.camp-shift--selected { border-color: rgb(229 57 53 / 30%); background: var(--color-accent-soft); }
.camp-shift--sold { cursor: not-allowed; opacity: 0.48; }

.camp-shift__index {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  font-size: 0.625rem;
  font-weight: 900;
}

.camp-shift__main { display: grid; min-width: 0; }
.camp-shift__main strong { overflow: hidden; font-size: 0.8125rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.camp-shift__main small { margin-top: 0.1rem; color: var(--color-muted); font-size: 0.625rem; }
.camp-shift__price { font-size: 0.75rem; font-weight: 900; white-space: nowrap; }

@media (max-width: 64rem) {
  .camp-showcase__layout { grid-template-columns: 1fr; }
  .camp-showcase__copy { max-width: 48rem; }
  .camp-panel { max-width: 48rem; }
}

@media (max-width: 48rem) {
  .camp-showcase { padding-block: 4rem; }
  .camp-showcase h2 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .camp-day { grid-template-columns: 1fr; }
  .camp-panel { padding: 1.1rem; }
}

@media (max-width: 31rem) {
  .camp-pricing__grid { grid-template-columns: 1fr; }
  .camp-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; text-align: left; }
  .camp-price p { margin: 0; }
  .camp-price del,
  .camp-price span { display: none; }
  .camp-shift { grid-template-columns: auto minmax(0, 1fr); }
  .camp-shift__price { grid-column: 2; }
}