/* Director's greeting (/directors-greeting/). Loaded only by page-directors-greeting.php, on top of main.css. */

.dg-hero,
.dg {
	--dg-aside: clamp(248px, 21vw, 288px);
	--dg-gap: clamp(56px, 7vw, 104px);
	--dg-pad: clamp(56px, 6vw, 88px);
	--dg-overlap: clamp(120px, 11vw, 168px);
}

/* Hero: title and breadcrumb line up with the letter column; the portrait card rises into the band. */
.dg-hero h1 { max-width: 760px; }

.dg { position: relative; padding-block: var(--dg-pad) var(--section); }
.dg__grid { display: grid; grid-template-columns: var(--dg-aside) minmax(0, 1fr); gap: var(--dg-gap); align-items: start; }

/* Portrait card */
.dg__aside { position: relative; z-index: 2; margin-top: calc(-1 * (var(--dg-pad) + var(--dg-overlap))); }
.dg-portrait { margin: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.dg-portrait__media { aspect-ratio: 4 / 5; background: var(--paper); border-bottom: 3px solid var(--gold-300); }
.dg-portrait__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dg-portrait__caption { padding: 20px 22px 22px; }
.dg-portrait__caption strong { display: block; color: var(--ink); font-size: 1.0625rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.dg-portrait__caption span { display: block; margin-top: 6px; color: var(--muted); font-size: .8125rem; line-height: 1.5; }

/* Letter */
.dg-letter { max-width: 720px; }
.dg-letter p { margin: 0 0 1.35em; color: var(--text); font-size: 1.0625rem; line-height: 1.85; text-wrap: pretty; }
.dg-letter .dg-letter__salutation { margin-bottom: .85em; color: var(--ink); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.dg-letter .dg-letter__lead { margin-bottom: 1.4em; color: var(--ink); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); font-weight: 450; line-height: 1.6; letter-spacing: -.012em; }
.dg-letter .dg-letter__pull { margin: 2.1em 0; padding: 2px 0 2px 26px; border-left: 2px solid var(--gold); color: var(--ink); font-size: 1.125rem; font-weight: 450; line-height: 1.75; }
.dg-letter .dg-letter__close { margin-bottom: 0; color: var(--ink); font-weight: 500; }

/* Partner organisations named in the text: a ruled row of logos. */
.dg-partners { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 2.25em 0 2.5em; border-block: 1px solid var(--line); text-decoration: none; }
.dg-partners__logo { display: flex; align-items: center; justify-content: center; height: 124px; padding: 22px 18px; }
.dg-partners__logo + .dg-partners__logo { border-left: 1px solid var(--line); }
.dg-partners img { width: auto; max-width: 100%; max-height: 72px; filter: grayscale(1) contrast(1.15); opacity: .88; transition: filter .35s var(--ease), opacity .35s var(--ease); }
.dg-partners:hover img, .dg-partners:focus-visible img { filter: none; opacity: 1; }

/* Facilities named in the text: two black-and-white photographs. */
.dg-labs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; height: clamp(200px, 22vw, 290px); margin: 2.25em 0 2.5em; }
.dg-labs__item { overflow: hidden; border-radius: var(--radius); background: var(--paper); }
.dg-labs__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dg-labs:hover img { transform: scale(1.03); }

/* Signature */
.dg-sign { display: flex; align-items: center; gap: 20px; margin-top: 2.75em; padding-top: 32px; border-top: 1px solid var(--line); }
.dg-sign__seal { flex: none; width: 56px; height: 56px; }
.dg-sign__role { display: block; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.dg-sign__name { display: block; margin-top: 4px; color: var(--ink); font-size: 1.25rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }

@media (min-width: 1024px) {
	.dg-hero .page-hero__inner { padding-left: calc(var(--gutter) + var(--dg-aside) + var(--dg-gap)); }
}
@media (min-width: 1024px) and (min-height: 720px) {
	.dg__aside { position: sticky; top: calc(var(--admin-bar) + var(--nav-h) + 32px); }
}

/* Below desktop the card becomes a byline above the letter. */
@media (max-width: 1023px) {
	.dg__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.dg__aside { margin: 0 0 36px; }
	.dg-letter { max-width: 720px; }
	.dg-portrait { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 720px; padding-bottom: 28px; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
	.dg-portrait__media { width: 76px; height: 76px; aspect-ratio: auto; border: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--gold-300); }
	.dg-portrait__media img { object-position: 50% 22%; }
	.dg-portrait__caption { padding: 0; }
}
@media (max-width: 599px) {
	.dg-letter p { font-size: 1rem; line-height: 1.8; }
	.dg-letter .dg-letter__pull { padding-left: 18px; font-size: 1.0625rem; }
	.dg-partners__logo { height: 96px; padding: 16px 12px; }
	.dg-partners img { max-height: 56px; }
	/* Four logos (English text names ICAEW too) go two by two. */
	.dg-partners:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dg-partners:has(> :nth-child(4)) .dg-partners__logo:nth-child(odd) { border-left: 0; }
	.dg-partners:has(> :nth-child(4)) .dg-partners__logo:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.dg-labs { height: 180px; gap: 8px; }
}