/* =========================================================================
   Al Duffa — "Student life" (widgets/aidh/class-aidh-student-life-widget.php)
   -------------------------------------------------------------------------
   Matches the Manus design source (alduffa-permanent-site: .student-life
   .life-panel / .act-grid / .init-grid / .emblem) — same card shell, same
   photo-slot treatment as the Campus widget, same gradient emblem cards.
   Colours/fonts come from the theme's alduffa-tokens.css.
========================================================================= */

.ald-life {
  --ald-navy:      var(--c-ink, #092434);
  --ald-navy-soft: var(--c-ink-soft, #1D597C);
  --ald-gold:      var(--c-teal, #D4A73A);
  --ald-gold-deep: var(--c-teal-dark, #9C7A1E);
  --ald-teal:      var(--c-accent-2, #1F8A8A);
  --ald-bg:        var(--c-surface, #F7F4EE);
  --ald-bg-2:      var(--c-white, #FFFFFF);
  --ald-bg-3:      #edf3f4;
  --ald-ink:       var(--c-ink, #092434);
  --ald-muted:     var(--c-body, #5C6B80);
  --ald-line:      #dce5e5;
  font-family: var(--f-body, "DM Sans", sans-serif);
}
.ald-life *,
.ald-life *::before { box-sizing: border-box; }

.ald-life__wrap {
  width: 100%;
  max-width: var(--wrap-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--wrap-pad, 20px);
}

/* ------------------------------------------------------------- Section head */
.ald-life__head { margin-bottom: 38px; }
.ald-life .ald-life__title {
  max-width: 16ch;
  margin: 8px 0 0;
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--ald-ink);
}
.ald-life__lead { max-width: 64ch; margin: 14px 0 0; color: var(--ald-muted); line-height: 1.7; }

/* ------------------------------------------------------------------ Panels */
.ald-life__panel {
  background: var(--ald-bg-2);
  border: 1px solid var(--ald-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 14px 36px rgba(9, 36, 52, .06);
}
.ald-life__panel + .ald-life__panel { margin-top: 22px; }
.ald-life__panel--initiatives { background: linear-gradient(180deg, #fdfefd 0%, #f5f9f8 100%); }

.ald-life__panel-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ald-line);
}
.ald-life__index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--ald-navy);
  color: var(--ald-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.ald-life__panel-head h3 {
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--ald-navy);
  margin: 0;
}
.ald-life__panel-head p { color: var(--ald-muted); font-size: .9rem; line-height: 1.6; margin: 6px 0 0; max-width: 68ch; }

/* ------------------------------------------------------------- Activity grid */
.ald-life__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ald-life__slot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--ald-line);
  background: var(--ald-bg-3);
  border-radius: 2px;
  overflow: hidden;
  color: var(--ald-ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.ald-life__slot:not(.is-empty) { border-style: solid; border-color: transparent; }
.ald-life__slot img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease;
}

/* Full-height vertical gradient wash — keeps the caption readable no
   matter how bright the underlying photo is. */
.ald-life__slot:not(.is-empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 20, 30, 0) 0%,
    rgba(6, 20, 30, 0) 34%,
    rgba(6, 20, 30, .26) 54%,
    rgba(6, 20, 30, .66) 76%,
    rgba(6, 20, 30, .94) 100%);
  transition: background .5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ald-life__slot:not(.is-empty):hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 42px -14px rgba(9, 36, 52, .5);
  }
  .ald-life__slot:not(.is-empty):hover img {
    transform: scale(1.12);
    filter: saturate(1.15) brightness(1.03);
  }
  .ald-life__slot:not(.is-empty):hover::before {
    background: linear-gradient(180deg,
      rgba(6, 20, 30, 0) 0%,
      rgba(6, 20, 30, .05) 26%,
      rgba(6, 20, 30, .42) 54%,
      rgba(6, 20, 30, .8) 76%,
      rgba(6, 20, 30, .97) 100%);
  }
  .ald-life__slot:not(.is-empty):hover .ald-life__slot-cap { transform: translateY(-3px); }
}

.ald-life__slot-ic { position: absolute; top: 12px; left: 12px; z-index: 1; width: 26px; height: 26px; color: var(--ald-muted); opacity: .6; }
.ald-life__slot-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.ald-life__slot:not(.is-empty) .ald-life__slot-cap { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ald-life__slot.is-empty .ald-life__slot-cap { color: var(--ald-ink); }
.ald-life__slot-cap b { font-family: var(--f-heading, "DM Serif Display", serif); font-weight: 400; font-size: .95rem; }
.ald-life__slot-cap small { font-size: .72rem; opacity: .85; }

/* ---------------------------------------------------------- Initiative cards */
.ald-life__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ald-life__card {
  border-radius: 2px;
  border: 1px solid var(--ald-line);
  background: var(--ald-bg);
  display: flex;
  flex-direction: column;
  padding-top: 26px;
  position: relative;
  overflow: hidden;
}
.ald-life__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; background: var(--card-art, var(--ald-navy)); opacity: .9; }
.ald-life__emblem {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 18px;
  display: grid;
  place-items: center;
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-size: 1.5rem;
  color: #fff;
  background: var(--card-art, var(--ald-navy));
  border: 4px solid var(--ald-bg, #F7F4EE);
  position: relative;
  box-shadow: 0 6px 16px rgba(9, 36, 52, .2);
}
.ald-life__card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.ald-life__card h3 { font-size: 1.15rem; margin: 0; font-family: var(--f-heading, "DM Serif Display", serif); font-weight: 400; color: var(--ald-ink); }
.ald-life__card p { font-size: .93rem; color: var(--ald-muted); margin-top: 8px; flex: 1; line-height: 1.6; }
.ald-life__join { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: .85rem; color: var(--ald-muted); }
.ald-life__join-btn {
  border: 1.5px solid var(--ald-navy);
  color: var(--ald-navy);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  display: inline-block;
}
.ald-life__join-btn:hover { background: rgba(9, 36, 52, .06); }

@media (max-width: 980px) {
  .ald-life__grid { grid-template-columns: repeat(2, 1fr); }
  .ald-life__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ald-life__panel { padding: 18px; border-radius: 14px; }
  .ald-life__panel-head { gap: 12px; margin-bottom: 18px; padding-bottom: 16px; }
  .ald-life__index { width: 34px; height: 34px; }
  .ald-life__panel-head h3 { font-size: 1.38rem; }
  .ald-life__panel-head p { font-size: .83rem; }
}
@media (max-width: 520px) {
  .ald-life__grid { grid-template-columns: 1fr 1fr; }
  .ald-life__cards { grid-template-columns: 1fr; }
}