/* Team cards, organisation overview, office gallery + lightbox. */

/* ---------- Team ---------- */
.hrp-team { display: grid; gap: 32px; }
.hrp-org { padding: 20px 22px; border: 1px solid var(--hr-line, #E6DECF); border-radius: var(--hr-r-lg, 8px); background: var(--hr-card, #FFFEFB); }
.hrp-org ul { list-style: none; margin: 0; padding: 0; }
.hrp-org ul ul { margin-left: 18px; padding-left: 16px; border-left: 2px solid var(--hr-line, #E6DECF); }
.hrp-org li { margin: 8px 0; }
.hrp-org a { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; text-decoration: none; color: var(--hr-ink, #1B2638); }
.hrp-org a span { color: var(--hr-muted, #736D63); font-size: .88rem; }
.hrp-org a:hover strong { color: var(--hr-crimson, #C8102E); }
/* Editorial team grid: big square portraits, name, small-caps title (3 across). */
.hrp-org { display: none; }
.hrp-team .hrp-cards, .hrp-team .hrp-cards:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 60px) clamp(20px, 3vw, 36px); }
@media (max-width: 1024px) { .hrp-team .hrp-cards, .hrp-team .hrp-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hrp-team .hrp-cards, .hrp-team .hrp-cards:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.hrp-card { overflow: visible; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; scroll-margin-top: calc(var(--hr-header-h, 76px) + 16px); }
.hrp-card:target .hrp-photo { outline: 2px solid var(--hr-crimson, #C8102E); outline-offset: 4px; }
.hrp-photo { position: relative; aspect-ratio: 1 / 1.14; display: block; overflow: visible; background: none; isolation: isolate; }
/* Coloured block sits in the lower part; a transparent cut-out portrait rises above it. */
.hrp-photo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; z-index: -1; background: linear-gradient(160deg, #EBD9B5, #D9B98A); }
.hrp-card:nth-child(6n+2) .hrp-photo::before { background: linear-gradient(160deg, #EBCFC8, #D8A8A0); }
.hrp-card:nth-child(6n+3) .hrp-photo::before { background: linear-gradient(160deg, #CFDCCB, #A9BEA4); }
.hrp-card:nth-child(6n+4) .hrp-photo::before { background: linear-gradient(160deg, #D3DCE8, #A9BBD2); }
.hrp-card:nth-child(6n+5) .hrp-photo::before { background: linear-gradient(160deg, #F2DABF, #E3AF84); }
.hrp-card:nth-child(6n+6) .hrp-photo::before { background: linear-gradient(160deg, #DDD6E8, #B9ABD0); }
.hrp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform .9s var(--hr-ease-out, ease); transform-origin: 50% 100%; }
.hrp-card:hover .hrp-photo img { transform: scale(1.025); }
/* Photos that are not cut-outs (no transparency) fill the block instead. */
.hrp-photo img.hrp-flat { top: 20%; height: 80%; object-fit: cover; object-position: 50% 22%; }
.hrp-photo span { position: absolute; inset: 20% 0 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 600; color: var(--hr-navy, #0A1F44); }
.hrp-body { display: grid; gap: 6px; padding: 18px 0 0; }
.hrp-body h3 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; color: var(--hr-navy, #0A1F44); line-height: 1.2; }
.hrp-role { margin: 0; color: var(--hr-muted, #736D63); font-weight: 500; font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.5; }
.hrp-role span { color: inherit; font-weight: inherit; }
.hrp-body > p { margin: 4px 0 0; color: var(--hr-text, #4E5563); font-size: .95rem; }
.hrp-meta { margin: 4px 0 0; display: grid; gap: 6px; font-size: .88rem; }
.hrp-meta div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.hrp-meta dt { color: var(--hr-muted, #736D63); }
.hrp-meta dd { margin: 0; color: var(--hr-ink, #1B2638); }
.hrp-more summary { cursor: pointer; font-weight: 600; color: var(--hr-blue, #003893); font-size: .92rem; }
.hrp-more p { margin: 8px 0 0; font-size: .92rem; color: var(--hr-text, #4E5563); }

/* ---------- Gallery: editorial mosaic ---------- */
.hrp-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 14px; }
.hrp-tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--hr-r-lg, 8px); background: var(--hr-paper-2, #F4EEE3); isolation: isolate; }
.hrp-feature { grid-column: span 2; grid-row: span 2; }
.hrp-n1 .hrp-feature { grid-column: 1 / -1; }
.hrp-n2 .hrp-tile, .hrp-n3 .hrp-tile { grid-column: span 2; }
.hrp-zoom { display: block; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; cursor: zoom-in; }
.hrp-zoom img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.1s var(--hr-ease-out, cubic-bezier(.2, .7, .2, 1)); }
.hrp-tile:hover .hrp-zoom img, .hrp-zoom:focus-visible img { transform: scale(1.045); }
.hrp-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10, 31, 68, .62), rgba(10, 31, 68, 0) 46%); opacity: .9; transition: opacity .5s ease; }
.hrp-tile:hover::after { opacity: 1; }
.hrp-tile figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; pointer-events: none; color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.hrp-feature figcaption { font-size: .8rem; left: 22px; bottom: 20px; }
@media (max-width: 900px) {
  .hrp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 34vw, 240px); gap: 10px; }
  .hrp-feature { grid-column: 1 / -1; grid-row: span 2; }
  .hrp-n2 .hrp-tile, .hrp-n3 .hrp-tile { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .hrp-tile figcaption { left: 10px; right: 10px; bottom: 9px; font-size: .64rem; letter-spacing: .1em; } .hrp-feature figcaption { left: 14px; bottom: 13px; font-size: .7rem; } }

.hrp-lightbox { width: min(1100px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 10px; background: #0b1220; color: #fff; overflow: hidden; }
.hrp-lightbox::backdrop { background: rgba(8, 12, 22, .86); }
.hrp-lb-img { display: block; width: 100%; max-height: 82vh; object-fit: contain; background: #0b1220; }
.hrp-lb-cap { margin: 0; padding: 10px 16px; font-size: .9rem; color: #C4CDDD; }
.hrp-lb-close, .hrp-lb-prev, .hrp-lb-next { position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .92) !important; color: #0A1F44; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.hrp-lb-close { top: 10px; right: 10px; }
.hrp-lb-prev { left: 10px; top: 45%; } .hrp-lb-next { right: 10px; top: 45%; }

@media (prefers-reduced-motion: reduce) { .hrp-zoom img, .hrp-photo img, .hrp-tile::after { transition: none; } .hrp-tile:hover .hrp-zoom img { transform: none; } }