/*
 * Office / service pages (Library, ICT) and About the Directorate. Builds on research.css (.rs-*) and
 * unit-leadership.css (.ul-*). Static CSS, CSP-safe (no inline styles). Prefix .of-.
 * Rows alternate between full-width blocks and two-column blocks (text + photograph).
 */
.of { --of-gap: 1.6rem; }
.of-sample { margin-top: 1rem; }
.of-office { scroll-margin-top: 4.6rem; }
.of-h3 { margin: 2.2rem 0 0; font-size: 1.15rem; font-weight: 800; color: var(--rs-navy); }

/* ---------- full-width rows ---------- */
.of-row { position: relative; }
.of-prose { margin-top: .2rem; }
.of-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .45rem; }
.of-prose li::marker { color: var(--rs-magenta); }

/* ---------- two-column rows ---------- */
.of-row--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.of-row__media { margin: 0; position: relative; }
.of-row__media::before { content: ""; position: absolute; inset: 1rem -.6rem -.6rem 1rem; z-index: 0; border-radius: 1.4rem; background: linear-gradient(135deg, var(--rs-magenta), var(--rs-ocean) 60%, var(--rs-cyan)); opacity: .9; }
.of-row__media img, .of-row__media .of-ph { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.2rem; border: 4px solid #fff; box-shadow: 0 24px 40px -22px rgba(0, 24, 50, .55); }
.of-row__media figcaption { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(0, 24, 50, .78); }

/* photograph placeholder (until a photo is uploaded in the CMS) */
.of-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--rs-ocean); text-align: center; background:
    repeating-linear-gradient(45deg, rgba(11, 99, 153, .06) 0 14px, transparent 14px 28px), linear-gradient(135deg, #eef5fb, #fbeef7); }
.of-ph small { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-muted); }
.of-ph--tall { min-height: 15rem; border: 3px dashed rgba(11, 99, 153, .35); }

/* ---------- cards and gallery ---------- */
.of-cards { margin-top: 1.4rem; }
.of-card { text-decoration: none; }
.of-card .rs-card__go { margin-top: auto; }
.of-cards--gallery .of-card { padding: 0 0 1.2rem; }
.of-cards--gallery .of-card h3, .of-cards--gallery .of-card p, .of-cards--gallery .rs-card__go { margin-inline: 1.2rem; }
.of-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.of-card__img.of-ph { display: flex; border-radius: 0; }

/* ---------- opening hours ---------- */
.of-hours { margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.of-hours > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.2rem; padding: 1rem 1.2rem; border-radius: 1rem; color: #fff; background: linear-gradient(120deg, var(--rs-navy), var(--rs-deep)); border-left: 5px solid var(--rs-yellow); }
.of-hours dt { font-weight: 800; letter-spacing: .02em; }
.of-hours dd { margin: 0; color: rgba(255, 255, 255, .88); }

/* ---------- link tiles ---------- */
.of-links { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.of-links a { position: relative; display: grid; gap: .15rem; height: 100%; padding: 1rem 3rem 1rem 1.2rem; border: 1px solid var(--rs-line); border-radius: 1rem; background: #fff; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.of-links a:hover, .of-links a:focus-visible { transform: translateY(-3px); border-color: rgba(11, 99, 153, .45); box-shadow: 0 14px 26px -16px rgba(0, 24, 50, .45); }
.of-links strong { color: var(--rs-navy); font-size: 1rem; }
.of-links span { font-size: .85rem; color: var(--rs-muted); }
.of-links em { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--rs-ocean); }

/* ---------- statement band ---------- */
.of-band { position: relative; overflow: hidden; margin-top: 3.4rem; padding: 2.2rem 1.5rem; border-radius: 1.5rem; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(195, 0, 128, .5), transparent 45%), linear-gradient(130deg, var(--rs-navy), var(--rs-deep) 60%, #12305f); }
.of-band .rs-kicker { color: var(--rs-yellow); }
.of-band h2 { margin: .3rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: #fff; }
.of-band p { margin: 1rem 0 0; max-width: 46rem; font-size: 1.08rem; line-height: 1.75; color: rgba(255, 255, 255, .9); }
.of-band ul { margin: 1rem 0 0; padding-left: 1.2rem; color: rgba(255, 255, 255, .9); line-height: 1.7; }

/* ---------- About the Directorate ---------- */
.of-statement { margin-top: 2.6rem; padding-left: 1.4rem; border-left: 5px solid var(--rs-magenta); }
.of-statement p { margin: 0 0 1rem; max-width: 52rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.6; font-weight: 600; color: var(--rs-navy); }
.of-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; counter-reset: p; }
.of-pillar { position: relative; overflow: hidden; padding: 1.8rem 1.5rem 1.5rem; border-radius: 1.4rem; color: #fff; background: linear-gradient(140deg, var(--rs-navy), var(--rs-deep)); }
.of-pillar--2 { background: linear-gradient(140deg, #4a0d5e, #7a1c78 60%, #a4157f); }
.of-pillar--3 { background: linear-gradient(140deg, #04507d, var(--rs-ocean) 60%, #1b8fc4); }
.of-pillar__no { position: absolute; right: 1rem; top: -.4rem; font-size: 5.2rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .1); }
.of-pillar h3 { position: relative; margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--rs-yellow); }
.of-pillar p { position: relative; margin: .7rem 0 0; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.of-pillar__links { position: relative; list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.of-pillar__links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.of-pillar__links a:hover, .of-pillar__links a:focus-visible { color: var(--rs-cyan); border-color: var(--rs-cyan); }

@media (min-width: 48rem) {
  .of-row--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; }
  .of-row--rev .of-row__media { order: -1; }
  .of-row--rev .of-row__media::before { inset: 1rem 1rem -.6rem -.6rem; }
  .of-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-band { padding: 2.8rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { .of-links a { transition: none; } .of-links a:hover { transform: none; } }
@media print { .of-row__media::before { display: none; } .of-band, .of-pillar, .of-hours > div { color: #000; background: #fff; border: 1px solid #999; } .of-band *, .of-pillar *, .of-hours * { color: #000 !important; } }

/* ---------- announcements / notices list ---------- */
.nt-item { display: block; margin-bottom: 1rem; }
.nt-meta { margin: .1rem 0 .7rem; font-size: .85rem; color: var(--rs-muted); }
.nt-alert { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--rs-magenta); vertical-align: middle; }
.nt-pager { margin-top: 1.2rem; }

/* ---------- portrait photo cards (people): tall frame, face kept in view ---------- */
.of-cards--portrait .of-card__img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 15%; background: #eef3f8; }
.of-cards--portrait .of-ph { aspect-ratio: 4 / 5; }