/* Activities page. Loaded by activities/index.html only. Goal-style checklists, panels and the
   download band come from sections.css; cards, tags and icon badges from components.css. */

.section--tight {
  padding-block: var(--space-2);
}

/* Impact numbers: one white strip that overlaps the bottom of the page header */
.impact-wrap {
  position: relative;
  margin-block-start: calc(var(--space-6) * -1);
}

.impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.impact__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.impact__item:nth-child(n + 3) {
  border-block-start: 1px solid var(--c-rule);
}

.impact__item:nth-child(even) {
  border-inline-start: 1px solid var(--c-rule);
}

/* Phones: icon above the number, so the text gets the full cell width */
@media (max-width: 599.98px) {
  .impact__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.impact__item .icon-badge {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.impact__item .icon-badge .icon {
  inline-size: 1.3rem;
  block-size: 1.3rem;
}

.impact__item strong {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2;
}

@media (min-width: 900px) {
  .impact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .impact__item {
    padding: var(--space-5);
  }

  .impact__item:nth-child(n + 3) {
    border-block-start: 0;
  }

  .impact__item + .impact__item {
    border-inline-start: 1px solid var(--c-rule);
  }
}

/* Text on one side, highlights on the other */
.feature-split {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.feature-split__text h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 700;
}

.feature-split__text {
  padding-block-start: var(--space-3);
}

.feature-split__text > p {
  margin-block-start: var(--space-3);
  color: var(--c-ink-soft);
}

.mini-facts {
  display: grid;
  gap: var(--space-3);
  max-inline-size: none;
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
}

.mini-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
}

.mini-facts .icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--c-dawn);
  color: var(--c-emerald);
}

.feature-split > .checklist {
  padding: var(--space-5);
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 12px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .feature-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
}

/* Conference: green feature panel */
.conference {
  --focus: var(--c-brass);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-l);
  background: var(--c-night);
  color: var(--c-on-night);
}

.conference::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-on-night);
  opacity: 0.07;
  -webkit-mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
  mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
}

.conference .label-pill {
  border-color: transparent;
}

.conference h2 {
  margin-block-start: var(--space-3);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
}

.conference__main > p:not(.label-pill) {
  margin-block-start: var(--space-2);
  color: var(--c-on-night-soft);
}

.conference__facts {
  display: grid;
  gap: var(--space-2);
  max-inline-size: none;
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

.conference__facts li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.conference__facts .icon {
  margin-block-start: 0.2em;
  color: var(--c-brass);
}

.conference__programme {
  align-self: center;
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--c-on-night) 20%, transparent);
  border-radius: calc(var(--radius-l) - 12px);
  background: color-mix(in srgb, var(--c-on-night) 7%, transparent);
}

.conference__big {
  color: var(--c-on-night-soft);
  font-size: 1.125rem;
}

.conference__big strong {
  margin-inline-end: var(--space-2);
  color: var(--c-brass);
  font-family: var(--font-head);
  font-size: 3rem;
  line-height: 1;
}

.conference__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-inline-size: none;
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

.conference__chips li {
  padding: 0.3125rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-on-night);
  color: var(--c-night);
  font-size: var(--fs-small);
  font-weight: 700;
}

@media (min-width: 900px) {
  .conference {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
    padding: var(--space-7);
  }
}

/* Two cards side by side */
.duo {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.duo .card {
  gap: var(--space-4);
}

.duo .card > p {
  color: var(--c-ink-soft);
}

/* Card header: icon beside the title, meta line under it */
.card__head {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.card__head h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.card__meta {
  margin-block-start: 2px;
  color: var(--c-brass-text);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* Wide screens: the two cards share rows, so their headers, intros and lists line up */
@media (min-width: 900px) {
  .duo {
    grid-template-rows: auto auto 1fr;
  }

  .duo > .card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .duo .card .checklist {
    align-self: start;
  }
}

.card .checklist {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--c-rule);
}

.card .checklist li + li {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
}

/* ---------- Awareness programmes ----------
   Ramadan programme as a green feature card on the left; the two Hajj programmes stacked on
   the right as compact white cards. Below 1200px the right column is too narrow for the
   two-column topic lists, so the feature card spans the width and the Hajj cards sit under
   it: side by side from 1024px, stacked below that. */
.aw-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1200px) {
  .aw-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }
}

/* Feature card */
.aw-feature {
  --focus: var(--c-brass);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-l);
  background: var(--c-night);
  color: var(--c-on-night);
}

.aw-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-on-night);
  opacity: 0.07;
  -webkit-mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
  mask: url("/assets/images/pattern-star-cross.svg") center / 96px 96px repeat;
}

/* Large olive diamond outline, centred on the corner so its edge stays clear of the title and
   meta line */
.aw-feature::after {
  content: "";
  position: absolute;
  inset-block-start: -5rem;
  inset-inline-end: -5rem;
  z-index: -1;
  inline-size: 10rem;
  block-size: 10rem;
  border: 1px solid var(--c-brass);
  opacity: 0.5;
  rotate: 45deg;
}

.aw-feature__head,
.aw-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.aw-feature__head .icon-badge {
  background: var(--c-on-night);
  color: var(--c-night);
}

.aw-feature h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
}

.aw-feature__meta {
  margin-block-start: 2px;
  color: var(--c-brass);
  font-size: var(--fs-small);
  font-weight: 700;
}

.aw-feature__intro {
  color: var(--c-on-night-soft);
}

.aw-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-inline-size: none;
  padding: 0;
  list-style: none;
}

.aw-stats li {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--c-on-night) 20%, transparent);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--c-on-night) 8%, transparent);
}

.aw-stats span {
  color: var(--c-on-night-soft);
  font-size: 0.875rem;
}

.aw-stats strong {
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.25;
}

/* The two special sessions, at the foot of the card */
.aw-sessions {
  display: grid;
  gap: var(--space-3);
  max-inline-size: none;
  padding: var(--space-4) 0 0;
  border-block-start: 1px dashed color-mix(in srgb, var(--c-on-night) 25%, transparent);
  list-style: none;
}

@media (min-width: 640px) {
  .aw-sessions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aw-sessions li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--c-on-night-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.aw-sessions strong {
  display: block;
  color: var(--c-on-night);
}

.aw-sessions__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-on-night) 12%, transparent);
  color: var(--c-brass);
}

@media (min-width: 768px) {
  .aw-feature {
    padding: var(--space-7);
  }
}

/* Ticked topics in two columns */
.aw-topics {
  display: grid;
  gap: var(--space-2) var(--space-4);
  max-inline-size: none;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.4;
}

@media (min-width: 480px) {
  .aw-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aw-topics li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.aw-topics .checklist__mark {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0;
}

.aw-topics .checklist__mark .icon {
  inline-size: 0.8rem;
  block-size: 0.8rem;
}

.aw-topics--light li {
  font-weight: 700;
}

.aw-topics--light .checklist__mark {
  background: var(--c-brass);
  color: var(--c-night);
}

/* Hajj cards */
.aw-stack {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .aw-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aw-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 8px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.aw-card .icon-badge {
  inline-size: 3rem;
  block-size: 3rem;
}

.aw-card .icon-badge .icon {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

.aw-card .aw-topics {
  font-size: 0.9375rem;
}

.aw-card h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
}

.aw-card__meta {
  margin-block-start: 2px;
  color: var(--c-brass-text);
  font-size: var(--fs-small);
  font-weight: 700;
}

.aw-card__intro {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}

.aw-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--c-rule);
  color: var(--c-ink-soft);
  font-size: 0.9375rem;
}

.aw-card__note .icon {
  margin-block-start: 0.15em;
  color: var(--c-brass-text);
}

/* Phones: icon above the title in every card header on this page, so long titles and meta lines
   get the full card width. Last in the file so it overrides the header rules above. */
@media (max-width: 479.98px) {
  .card__head,
  .aw-feature__head,
  .aw-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}