/*
 * "Camp Activities" sticker collage
 * Figma: Desktop 70:83–70:90, 70:242 (section band y 1600–2250 on 70:3)
 *        Mobile 86:32–86:40 (section band y 1520–2170 on 70:187)
 *
 * The heading and six hologram stickers live on a positioned "stage" that
 * scales as one unit (container-query units), so the overlaps stay exactly
 * as designed from 320 to 1440. --u = 1 design px on the stage.
 * Sticker sizes/positions are the Figma values. Rotated stickers use their
 * un-rotated size (derived from the Figma bounding box) and are rotated about
 * their centre; centres were fitted against the Figma render.
 *
 * Interactive (js/activities.js): each sticker is a button. The active one
 * scales up and is the only sticker above the heading; the rest sit behind
 * it, keeping their original paint order among themselves (--layer).
 */

.activities {
  position: relative;
  z-index: 1;
  container-type: inline-size;
}

/* ---------- Mobile (390 frame, scaled fluidly up to 560px) ---------- */

.activities__inner {
  max-width: 560px;
  margin-inline: auto;
  /* 650px band: stage 0–400, text 418–591, 59px bottom */
  padding-bottom: calc(59 * min(100cqi, 560px) / 390);
}

.activities__collage {
  position: relative;
  /* own stacking context for the heading/sticker z-indexes below */
  isolation: isolate;
  aspect-ratio: 390 / 400;
  container-type: inline-size;
}

.activities__collage > * {
  --u: calc(100cqi / 390);
}

.activities__title {
  position: absolute;
  z-index: 10;
  left: calc(37 * var(--u));
  top: calc(153.24 * var(--u));
  margin: 0;
  /* Core/Display scaled with the stage (48px at the 390 frame) */
  font-size: calc(48 * var(--u));
  white-space: nowrap;
  text-shadow: 0 calc(3.266 * var(--u)) calc(3.266 * var(--u)) var(--shadow-text);
  /* hovers pass through to the stickers tucked behind it */
  pointer-events: none;
}

/* Button reset + shared transform: rotation per sticker, scale when active */
.activities__sticker {
  position: absolute;
  z-index: var(--layer);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(12 * var(--u));
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  transition: transform 180ms ease-out;
}

.activities__sticker img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.activities__sticker[aria-pressed="true"] {
  z-index: 20;
  --scale: 1.18;
}

.activities__sticker:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}

/* Original paint order (sports → pool) for overlaps between resting stickers */
.activities__sticker--sports   { --layer: 1; }
.activities__sticker--bible    { --layer: 2; }
.activities__sticker--memories { --layer: 3; --rot: -17.35deg; }
.activities__sticker--worship  { --layer: 4; }
.activities__sticker--friends  { --layer: 5; --rot: 14.74deg; }
.activities__sticker--pool     { --layer: 6; --rot: 2.28deg; }

.activities__sticker--sports   { left: 0;                       top: calc(48 * var(--u));     width: calc(144 * var(--u));    height: calc(151 * var(--u)); }
.activities__sticker--bible    { left: calc(156 * var(--u));    top: calc(48 * var(--u));     width: calc(208 * var(--u));    height: calc(198 * var(--u)); }
.activities__sticker--worship  { left: calc(88 * var(--u));     top: calc(234 * var(--u));    width: calc(133 * var(--u));    height: calc(149 * var(--u)); }
.activities__sticker--memories { left: calc(28.39 * var(--u));  top: calc(225.12 * var(--u)); width: calc(120.67 * var(--u)); height: calc(120.67 * var(--u)); }
.activities__sticker--friends  { left: calc(264.41 * var(--u)); top: calc(90.03 * var(--u));  width: calc(141.19 * var(--u)); height: calc(151.74 * var(--u)); }
.activities__sticker--pool     { left: calc(231.54 * var(--u)); top: calc(223 * var(--u));    width: calc(148.22 * var(--u)); height: calc(140.9 * var(--u));  }

.activities__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: calc(18 * min(100cqi, 560px) / 390);
  padding-inline: calc(40 * min(100cqi, 560px) / 390);
}

/* All copies share one grid cell so the block is always as tall as the
   longest one: no layout jump when the text swaps. */
.activities__copies {
  display: grid;
}

.activities__copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* quick crossfade: the old copy fades out, then the new one fades in */
  opacity: 0;
  visibility: hidden;
  transition: opacity 90ms ease-in, visibility 0s linear 90ms;
}

.activities__copy.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease-out 70ms, visibility 0s;
}

.activities__subtitle {
  margin: 0;
  max-width: 268px;
  text-shadow: 0 3.266px 3.266px var(--shadow-text);
}

.activities__body {
  margin: 0;
  max-width: 310px;
  color: var(--text-secondary);
}

/* ---------- Carousel indicator: ‹ • • • • • • › ---------- */

.activities__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: -8px; /* optically align the first arrow with the text */
}

.activities__nav[hidden] {
  display: none;
}

.activities__arrow,
.activities__dot {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}

.activities__arrow {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transition: opacity 150ms ease-out;
}

.activities__arrow:hover {
  opacity: 1;
}

.activities__dots {
  display: flex;
  align-items: center;
}

/* 24px hit area around a small dot; the active dot stretches into a pill */
.activities__dot {
  width: 20px;
  height: 24px;
}

.activities__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--text-primary);
  opacity: 0.35;
  transition: width 200ms ease-out, opacity 200ms ease-out;
}

.activities__dot:hover::before {
  opacity: 0.7;
}

.activities__dot[aria-current="true"] {
  width: 28px;
}

.activities__dot[aria-current="true"]::before {
  width: 16px;
  opacity: 1;
}

.activities__arrow:focus-visible,
.activities__dot:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
  opacity: 1;
}

/* ---------- Tablet (768–1023): mobile composition, roomier text ---------- */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .activities__subtitle,
  .activities__body {
    max-width: 440px;
  }
}

/* ---------- Desktop (1440 frame) ----------
 * Two-column composition from 1024px: below that the collage would shrink to
 * ~350px beside the text column, so tablets keep the stacked layout.
 */

@media (min-width: 1024px) {
  .activities__inner {
    display: grid;
    /* Stage = Figma x 110–960 (850 wide); text column at x 991, 310 wide */
    grid-template-columns: minmax(0, 850px) minmax(240px, 310px);
    column-gap: clamp(24px, 3vw, 31px);
    align-items: center;
    max-width: 1440px;
    padding: 0 clamp(24px, 17.5cqi - 113px, 139px) 0 clamp(24px, 12.4cqi - 69px, 110px);
  }

  .activities__collage {
    aspect-ratio: 850 / 650;
  }

  .activities__collage > * {
    --u: calc(100cqi / 850);
  }

  .activities__title {
    left: calc(152.71 * var(--u));
    top: calc(200.24 * var(--u));
    /* Core/Display scaled with the stage (100px at 1440) */
    font-size: calc(100 * var(--u));
  }

  .activities__sticker--sports   { left: calc(130.66 * var(--u)); top: calc(41 * var(--u));     width: calc(241.72 * var(--u)); height: calc(253.97 * var(--u)); }
  .activities__sticker--bible    { left: calc(429.54 * var(--u)); top: calc(59.78 * var(--u));  width: calc(349.52 * var(--u)); height: calc(333.18 * var(--u)); }
  .activities__sticker--worship  { left: 0;                       top: calc(244.34 * var(--u)); width: calc(222.94 * var(--u)); height: calc(249.89 * var(--u)); }
  .activities__sticker--memories { left: calc(175.21 * var(--u)); top: calc(365.88 * var(--u)); width: calc(202.53 * var(--u)); height: calc(202.53 * var(--u)); }
  .activities__sticker--friends  { left: calc(645.78 * var(--u)); top: calc(120.97 * var(--u)); width: calc(236.97 * var(--u)); height: calc(254.67 * var(--u)); }
  .activities__sticker--pool     { left: calc(516.16 * var(--u)); top: calc(362.32 * var(--u)); width: calc(248.76 * var(--u)); height: calc(236.49 * var(--u)); }

  .activities__text {
    margin: 0;
    padding: 0;
    /* Figma text block sits at y 169–522 of the 650 band (≈20px below centre) */
    transform: translateY(20px);
  }

  .activities__subtitle {
    max-width: 268px;
  }
}

/* ---------- Reduced motion: content still swaps, stickers don't grow ---------- */

@media (prefers-reduced-motion: reduce) {
  .activities__sticker {
    transition: none;
  }

  .activities__sticker[aria-pressed="true"] {
    --scale: 1;
  }

  .activities__dot::before {
    transition: none;
  }
}