/* ICTP / HECAP additions for Rafid H. Dejrah, September 2026.
   Kept separate from the original HTML5 UP theme so the existing design remains intact. */

:root {
  --ictp-blue: #0077a8;
  --ictp-deep: #113247;
  --ictp-ink: #17242d;
  --ictp-soft: #edf6f9;
  --ictp-line: rgba(0, 119, 168, 0.22);
}

.ictp-home-role {
  font-size: 1.03em;
  letter-spacing: .055em;
  line-height: 1.9;
  margin-bottom: .8em;
}

.ictp-home-role strong { color: #fff; }
.ictp-home-role a { border-bottom: 0; color: inherit; }
.ictp-home-focus {
  font-size: .78em;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
  margin: 0 auto 1.7em;
}

.ictp-current-home { position: relative; overflow: hidden; }
.ictp-current-home .inner { max-width: 72em; }
.ictp-current-home .ictp-kicker,
.ictp-page .ictp-kicker {
  color: var(--ictp-blue);
  font-size: .76em;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .9em;
}

.ictp-home-grid,
.ictp-profile-grid,
.ictp-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 2.5em;
  align-items: center;
}

.ictp-brand-card {
  border: 1px solid var(--ictp-line);
  padding: 2em;
  background: linear-gradient(145deg, rgba(0,119,168,.06), rgba(17,50,71,.02));
  border-radius: 4px;
}

.ictp-brand-card img.ictp-logo {
  display: block;
  width: min(210px, 70%);
  max-height: 135px;
  object-fit: contain;
  margin: 0 auto 1.45em;
  background: #fff;
  padding: .65em;
  border-radius: 3px;
}

.ictp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1em;
  margin: 2.2em 0 0;
}
.ictp-fact {
  border-top: 2px solid var(--ictp-blue);
  padding: 1em 0 0;
}
.ictp-fact strong {
  display: block;
  color: var(--ictp-deep);
  font-size: .95em;
  margin-bottom: .4em;
}
.ictp-fact span { font-size: .9em; line-height: 1.55; }

.ictp-campus-panel {
  margin-top: 2.8em;
  min-height: 390px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 60px rgba(0,0,0,.15);
}
.ictp-campus-panel:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,19,28,.9), rgba(5,19,28,.08) 70%);
}
.ictp-campus-caption {
  position: relative;
  z-index: 1;
  color: #fff;
  width: 100%;
  padding: 2em 2.2em;
}
.ictp-campus-caption h3 { color: #fff; margin: 0 0 .35em; }
.ictp-campus-caption p { margin: 0; max-width: 52em; }

.ictp-inline-link { font-weight: 700; border-bottom-color: rgba(0,119,168,.4); }
.ictp-inline-link:hover { color: var(--ictp-blue) !important; }

.ictp-status-card {
  border-left: 4px solid var(--ictp-blue);
  background: var(--ictp-soft);
  padding: 1.5em 1.7em;
  margin: 0 0 3em;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 1.4em;
  align-items: center;
}
.ictp-status-card img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: #fff;
  padding: .35em;
}
.ictp-status-card h3 { margin: 0 0 .35em; }
.ictp-status-card p { margin: 0; }

.ictp-research-note {
  border: 1px solid var(--ictp-line);
  background: linear-gradient(120deg, rgba(0,119,168,.07), rgba(255,255,255,0));
  padding: 1.6em 1.8em;
  margin: 1.5em 0 2.2em;
}
.ictp-research-note h3 { margin: 0 0 .55em; }
.ictp-research-note p { margin: 0; }

.ictp-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 42%;
  color: #fff;
  overflow: hidden;
}
.ictp-hero:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,22,31,.92), rgba(6,22,31,.60) 56%, rgba(6,22,31,.22));
}
.ictp-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72em;
  margin: 0 auto;
  padding: 5.5em 3em 3.5em;
}
.ictp-hero .ictp-logo {
  width: 170px;
  max-height: 105px;
  object-fit: contain;
  background: rgba(255,255,255,.96);
  padding: .55em;
  border-radius: 3px;
  margin-bottom: 1.5em;
}
.ictp-hero h2 { color: #fff; font-size: 2.45em; margin-bottom: .35em; }
.ictp-hero p { max-width: 48em; font-size: 1.05em; margin: 0; }
.ictp-hero .ictp-kicker { color: #a9e6ff; }

.ictp-page .inner { max-width: 72em; }
.ictp-page h2.section-title { margin-top: 0; }
.ictp-page .lead { font-size: 1.08em; line-height: 1.85; }

.ictp-phase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.2em;
  margin: 2em 0 3.2em;
}
.ictp-phase {
  padding: 1.7em;
  border: 1px solid rgba(0,0,0,.11);
  background: #fff;
}
.ictp-phase .number {
  width: 2.3em;
  height: 2.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ictp-blue);
  color: #fff;
  font-weight: 700;
  margin-bottom: 1em;
}
.ictp-phase h3 { margin-bottom: .55em; }
.ictp-phase p { margin: 0; }

.ictp-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.25em;
  margin: 2em 0 3em;
}
.ictp-focus-card {
  position: relative;
  padding: 1.7em 1.7em 1.55em;
  border-left: 3px solid var(--ictp-blue);
  background: rgba(0,119,168,.045);
}
.ictp-focus-card h3 { margin: 0 0 .55em; }
.ictp-focus-card p { margin: 0; }

.ictp-photo-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.25em;
  margin: 2em 0 1em;
}
.ictp-photo {
  margin: 0;
  background: #0d1d27;
  color: #fff;
  overflow: hidden;
  border-radius: 3px;
}
.ictp-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.ictp-photo figcaption {
  padding: 1em 1.2em 1.2em;
  font-size: .82em;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.ictp-photo figcaption strong { color: #fff; }

.ictp-salam {
  display: grid;
  grid-template-columns: minmax(240px,.58fr) minmax(0,1.42fr);
  gap: 2.2em;
  align-items: center;
  margin: 3em 0;
  padding: 2em;
  background: #101b22;
  color: rgba(255,255,255,.84);
}
.ictp-salam img { width: 100%; max-height: 340px; object-fit: cover; object-position: center top; }
.ictp-salam h2, .ictp-salam h3 { color: #fff; }
.ictp-salam p:last-child { margin-bottom: 0; }

.ictp-official-links {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  margin-top: 1.3em;
}
.ictp-official-links a {
  display: inline-block;
  padding: .65em .9em;
  border: 1px solid rgba(0,119,168,.35);
  border-radius: 2px;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .05em;
}

.ictp-source-note {
  font-size: .74em;
  opacity: .7;
  line-height: 1.6;
  margin-top: 2em;
}

@media screen and (max-width: 736px) {
  .ictp-home-grid, .ictp-profile-grid, .ictp-two-col, .ictp-salam { grid-template-columns: 1fr; }
  .ictp-facts, .ictp-phase-grid, .ictp-focus-grid, .ictp-photo-grid { grid-template-columns: 1fr; }
  .ictp-status-card { grid-template-columns: 70px 1fr; padding: 1.2em; }
  .ictp-status-card img { width:70px; height:70px; }
  .ictp-campus-panel { min-height: 330px; }
  .ictp-hero { min-height: 400px; }
  .ictp-hero-inner { padding: 5.5em 1.5em 2.6em; }
  .ictp-hero h2 { font-size: 1.8em; }
  .ictp-photo img { height: 230px; }
}