/* ════════════════════════════════════════════════════════════
   ACTIVITIES.CSS — Activities Page
   Requires: variables.css, common.css loaded first.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   HERO — Navy bg + watermark + category chips + CTA
   ════════════════════════════════════════════════════════════ */
#activities-hero {
  position:   relative;
  background: var(--navy);
  padding:    140px 64px 90px;
  overflow:   hidden;
  isolation:  isolate;
  text-align: center;
}

#activities-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../images/inner-page-bg.png') center / contain no-repeat;
  opacity:    0.08;
  z-index:    -1;
}

.ah-content {
  max-width: 940px;
  margin:    0 auto;
  z-index: 1;
  position: inherit;
}

#activities-hero .section-label {
  justify-content: center;
}

.ah-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight:    900;
  line-height:    1.1;
  color:          var(--white);
  margin:         14px 0 18px;
  letter-spacing: -0.01em;
}

.ah-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  font-weight: 400;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   680px;
  margin:      0 auto 28px;
}

/* Category chip row */
.ah-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             10px;
  margin-bottom:   30px;
}

.ah-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(255, 255, 255, 0.08);
  border:          1px solid rgba(255, 255, 255, 0.2);
  color:           rgba(255, 255, 255, 0.85);
  font-family:     'Inter', sans-serif;
  font-weight:     600;
  font-size:       13px;
  padding:         8px 18px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.25s var(--ease-bounce);
}
.ah-chip:hover {
  background:   var(--sun);
  color:        var(--navy);
  border-color: var(--sun);
  transform:    translateY(-2px);
}

.ah-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.ah-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}


/* ════════════════════════════════════════════════════════════
   PILLARS — "Six Pillars of Joyful Learning"
   6 colored tiles on light bg
   ════════════════════════════════════════════════════════════ */
#activities-pillars {
  background: #F4F6FB;
  padding:    90px 64px 100px;
}

.ap-head {
  text-align:    center;
  margin-bottom: 50px;
}

.ap-head .section-label {
  justify-content: center;
  color:           var(--navy);
}
.ap-head .section-label::before,
.ap-head .section-label::after {
  background: var(--navy);
}

.ap-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 14px;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.ap-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       var(--text-soft);
  max-width:   560px;
  margin:      0 auto;
}

.ap-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   18px;
  max-width:             1240px;
  margin:                0 auto;
}

.ap-tile {
  border-radius:   16px;
  padding:         28px 16px 22px;
  text-align:      center;
  text-decoration: none;
  transition:      transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.ap-tile:hover {
  transform:  translateY(-6px);
  box-shadow: 0 18px 38px rgba(15, 27, 61, 0.12);
}

/* Per-tile pastel cycle */
.ap-tile:nth-child(1) { background: #DCEFD8; }   /* mint */
.ap-tile:nth-child(2) { background: #FCEFC9; }   /* butter */
.ap-tile:nth-child(3) { background: #D9E2FA; }   /* periwinkle */
.ap-tile:nth-child(4) { background: #FCDFD2; }   /* peach */
.ap-tile:nth-child(5) { background: #F4D5EE; }   /* pink */
.ap-tile:nth-child(6) { background: #CFE4F7; }   /* sky */

.ap-icon {
  font-size:     34px;
  line-height:   1;
  margin-bottom: 14px;
  display:       block;
}

.ap-tile h3 {
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  font-weight: 800;
  color:       var(--navy);
  margin:      0;
  line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════
   DETAIL SECTIONS — 6 zigzag activity blocks
   ════════════════════════════════════════════════════════════ */
.act-detail {
  padding: 90px 64px;
}

.act-detail--white { background: var(--white); }
.act-detail--light { background: #F4F6FB; }
.act-detail--navy  { background: var(--navy); }
.act-detail--sun   { background: var(--sun); }

.ad-container {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:   "image content";
  gap:                   64px;
  max-width:             1180px;
  margin:                0 auto;
  align-items:           center;
}

.ad-image-col   { grid-area: image; }
.ad-content-col { grid-area: content; }

.act-detail--content-left .ad-container {
  grid-template-areas: "content image";
}


/* ── Image ── */
.ad-image {
  position:      relative;
  border-radius: 18px;
  overflow:      hidden;
  border:        4px solid var(--sun);
  box-shadow:    0 25px 60px rgba(15, 27, 61, 0.2);
}
.ad-image img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
}

/* Sun bg variant gets a white border instead, so the sun frame doesn't blend in */
.act-detail--sun .ad-image { border-color: var(--white); }


/* ── Content column ── */
.ad-content-col {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.act-detail .section-label {
  margin-bottom: 0;
}

.ad-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 3.4vw, 2.8rem);
  font-weight:    900;
  line-height:    1.1;
  margin:         4px 0 6px;
  letter-spacing: -0.01em;
}

.ad-body {
  font-family: 'Inter', sans-serif;
  font-size:   14.5px;
  font-weight: 400;
  line-height: 1.75;
  margin:      0;
}

.ad-list {
  list-style:            none;
  padding:               0;
  margin:                14px 0 0;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px 22px;
}

.ad-list li {
  font-family:  'Inter', sans-serif;
  font-size:    13.5px;
  font-weight:  500;
  line-height:  1.5;
  padding-left: 20px;
  position:     relative;
}
.ad-list li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           7px;
  width:         7px;
  height:        7px;
  background:    var(--coral);
  border-radius: 50%;
}


/* ── Theme overrides per background ── */

/* White / Light bg */
.act-detail--white .ad-title,
.act-detail--light .ad-title  { color: var(--navy); }
.act-detail--white .ad-body,
.act-detail--light .ad-body   { color: var(--text-soft); }
.act-detail--white .ad-list li,
.act-detail--light .ad-list li { color: var(--text-soft); }

/* Light bg: bullet stays coral, eyebrow stays coral */
/* (default already handles this) */

/* Music section in screenshot uses navy bullets on light bg — handled by class below */
.act-detail--bullets-navy .ad-list li::before { background: var(--navy); }
.act-detail--bullets-navy .ad-list li         { color: var(--navy); }


/* Navy bg */
.act-detail--navy .ad-title    { color: var(--white); }
.act-detail--navy .ad-body     { color: rgba(255, 255, 255, 0.72); }
.act-detail--navy .ad-list li  { color: rgba(255, 255, 255, 0.82); }
.act-detail--navy .ad-list li::before { background: var(--sun); }

.act-detail--navy .section-label {
  color: var(--sun);
}
.act-detail--navy .section-label::before,
.act-detail--navy .section-label::after {
  background: var(--sun);
}


/* Sun (yellow) bg */
.act-detail--sun .ad-title    { color: var(--navy); }
.act-detail--sun .ad-body     { color: rgba(15, 27, 61, 0.78); }
.act-detail--sun .ad-list li  { color: var(--navy); }
.act-detail--sun .ad-list li::before { background: var(--navy); }

.act-detail--sun .section-label {
  color: var(--navy);
}
.act-detail--sun .section-label::before,
.act-detail--sun .section-label::after {
  background: var(--navy);
}


/* ════════════════════════════════════════════════════════════
   ENROLL CTA — Navy section with content + collage
   ════════════════════════════════════════════════════════════ */
#activities-enroll {
  background: var(--navy);
  padding:    90px 64px 100px;
}

.ae-grid {
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  gap:                   60px;
  max-width:             1180px;
  margin:                0 auto;
  align-items:           center;
}


/* Content (left) */
.ae-content .section-label {
  color: var(--sun);
}
.ae-content .section-label::before,
.ae-content .section-label::after {
  background: var(--sun);
}

.ae-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--white);
  line-height:    1.1;
  margin:         14px 0 16px;
  letter-spacing: -0.01em;
}

.ae-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   480px;
  margin:      0 0 26px;
}

.ae-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.ae-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}


/* Collage (right): 1 big top + 2 small bottom */
.ae-collage          { display: flex; flex-direction: column; gap: 12px; }
.ae-collage-main     {
  border-radius: 14px;
  overflow:      hidden;
  aspect-ratio:  16 / 10;
}
.ae-collage-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-collage-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ae-collage-row > div {
  border-radius: 14px;
  overflow:      hidden;
  aspect-ratio:  4 / 3;
}
.ae-collage-row img  { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #activities-hero    { padding: 130px 32px 70px; }

  #activities-pillars { padding: 70px 32px 80px; }
  .ap-grid            { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .act-detail         { padding: 70px 32px; }
  .ad-container,
  .act-detail--content-left .ad-container {
    display:        flex;
    flex-direction: column;
    gap:            32px;
  }
  .ad-list            { grid-template-columns: 1fr; }

  #activities-enroll  { padding: 80px 32px; }
  .ae-grid            { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  #activities-hero    { padding: 110px 24px 60px; }

  #activities-pillars { padding: 60px 18px 70px; }
  .ap-grid            { grid-template-columns: repeat(2, 1fr); max-width: 480px; margin: 0 auto; }

  .act-detail         { padding: 60px 24px; }

  #activities-enroll  { padding: 70px 24px 80px; }
}