/* =========================================================================
   Al Duffa — "Our Campus" page header (widgets/aidh/class-aidh-campus-widget.php)
   -------------------------------------------------------------------------
   Matches the Manus design source (alduffa-permanent-site: #campus
   .sec-head / .bld-grid / .campus-cta) 1:1 — same grid ratios, same
   dashed-border photo slots, same left-accent tiles. Colours/fonts come
   from the theme's alduffa-tokens.css, same as aidh-programs.css.
========================================================================= */

.ald-campus {
  --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-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-campus *,
.ald-campus *::before { box-sizing: border-box; }

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

/* ---------------------------------------------------------------- Header */
.ald-campus__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.ald-campus .ald-campus__title {
  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-campus__link {
  font-weight: 600;
  color: var(--ald-navy-soft);
  text-decoration: none;
  white-space: nowrap;
}
.ald-campus__link::after { content: " \2192"; }
html[dir="rtl"] .ald-campus__link::after { content: " \2190"; }
.ald-campus__link:hover { text-decoration: underline; }

.ald-campus__sub {
  margin: 0 0 18px;
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ald-ink);
}

/* ----------------------------------------------------------- Photo grid */
.ald-campus__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
.ald-campus__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-campus__slot.is-wide { grid-row: span 2; aspect-ratio: auto; }
.ald-campus__slot:hover { border-color: var(--ald-navy-soft); }
.ald-campus__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;
}
.ald-campus__slot:not(.is-empty) { border-style: solid; border-color: transparent; }

/* Full-height vertical gradient wash — always dark enough at the bottom
   for the caption to read, independent of how bright the photo is. */
.ald-campus__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) 36%,
    rgba(6, 20, 30, .24) 55%,
    rgba(6, 20, 30, .64) 76%,
    rgba(6, 20, 30, .93) 100%);
  transition: background .5s ease, opacity .5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ald-campus__slot:not(.is-empty):hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 48px -16px rgba(9, 36, 52, .5);
  }
  .ald-campus__slot:not(.is-empty):hover img {
    transform: scale(1.12);
    filter: saturate(1.15) brightness(1.03);
  }
  .ald-campus__slot:not(.is-empty):hover::before {
    background: linear-gradient(180deg,
      rgba(6, 20, 30, 0) 0%,
      rgba(6, 20, 30, .05) 28%,
      rgba(6, 20, 30, .4) 55%,
      rgba(6, 20, 30, .78) 76%,
      rgba(6, 20, 30, .97) 100%);
  }
  .ald-campus__slot:not(.is-empty):hover .ald-campus__slot-cap { transform: translateY(-4px); }
}

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

/* ------------------------------------------------------------- CTA tiles */
.ald-campus__cta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
.ald-campus__tile {
  padding: 22px;
  border: 1px solid var(--ald-line);
  border-radius: 10px;
  background: var(--ald-bg-2);
  border-inline-start: 4px solid var(--ald-teal);
}
.ald-campus__tile h3 {
  margin: 0 0 6px;
  font-family: var(--f-heading, "DM Serif Display", serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ald-ink);
}
.ald-campus__tile p {
  margin: 0 0 12px;
  color: var(--ald-muted);
  font-size: .95rem;
  line-height: 1.6;
}
.ald-campus__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ald-campus__btn:hover { transform: translateY(-1px); }
.ald-campus__btn--solid { background: var(--ald-navy); color: #fff; }
.ald-campus__btn--solid:hover { background: var(--ald-navy-soft); color: #fff; }
.ald-campus__btn--outline { border-color: currentColor; background: transparent; color: var(--ald-ink); }
.ald-campus__btn--outline:hover { background: rgba(9, 36, 52, .06); }
.ald-campus__btn:focus-visible { outline: 3px solid var(--ald-gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .ald-campus__grid { grid-template-columns: 1fr 1fr; }
  .ald-campus__slot.is-wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .ald-campus__cta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ald-campus__grid { grid-template-columns: 1fr; }
}