/* ==========================================================================
   Themes: each block overrides the tokens defined in style.css.
   "classic" uses the defaults from style.css unchanged.
   ========================================================================== */

/* --- Soft Sand: warm paper, muted terracotta, soft navy ------------------ */
html[data-theme="sand"] {
    --bg: #F7F3EC;
    --bg-alt: #F0E9DE;
    --surface: #FFFDF9;
    --field: #FBF8F2;
    --ink: #2B2A33;
    --text: #5B5966;
    --text-strong: #45434F;
    --muted: #8E8A94;
    --line: #E8E1D5;
    --tint: #F2E9DD;

    --primary: #2F3A56;
    --primary-hover: #3A4768;
    --primary-ink: #ffffff;
    --accent: #C8693A;
    --accent-2: #D4825A;
    --accent-ink: #ffffff;
    --accent-text: #B35A2E;

    --header-bg: rgba(255, 253, 249, .86);
    --header-line: #E8E1D5;
    --nav-hover: #F2E9DD;

    --panel-bg: #EFE5D6;
    --panel-bg-alt: #E8DAC6;
    --panel-text: #5B5966;
    --panel-heading: #2B2A33;
    --panel-card: rgba(255, 255, 255, .55);
    --panel-card-line: rgba(43, 42, 51, .06);
    --panel-glow-1: rgba(255, 255, 255, .7);
    --panel-glow-2: rgba(200, 105, 58, .12);
    --panel-accent: #B35A2E;

    --involve-bg: linear-gradient(135deg, #F5E8DA, #F0DDCA);
    --involve-text: #5B5966;
    --involve-heading: #2B2A33;
    --involve-em: #B35A2E;
    --involve-chip: rgba(255, 255, 255, .7);

    --footer-bg: #2A3349;
    --footer-text: #B7BDCB;
    --footer-heading: #ffffff;
    --footer-line: rgba(255, 255, 255, .09);
    --footer-accent: #E4A27E;

    --hero-overlay: linear-gradient(100deg, rgba(42, 51, 73, .9) 0%, rgba(42, 51, 73, .65) 55%, rgba(42, 51, 73, .2) 100%);
    --blob-1: rgba(200, 105, 58, .10);
    --blob-2: rgba(47, 58, 86, .06);

    --ic-orange-bg: #F6E6DA; --ic-orange: #B35A2E;
    --ic-blue-bg: #E3E9F3;   --ic-blue: #3D5A8A;
    --ic-rose-bg: #F6E3E3;   --ic-rose: #B04A55;
    --ic-amber-bg: #F5ECD6;  --ic-amber: #9C7420;
    --ic-violet-bg: #ECE6F2; --ic-violet: #6B5491;
    --ic-green-bg: #E4EDE3;  --ic-green: #4F7A55;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --shadow: 0 2px 4px rgba(43, 42, 51, .03), 0 10px 28px rgba(43, 42, 51, .06);
    --shadow-lg: 0 24px 50px -28px rgba(43, 42, 51, .28);

    --font: 'Nunito Sans', system-ui, sans-serif;
    --serif: 'Lora', Georgia, serif;
    --heading-weight: 800;
    --heading-tracking: -.015em;
}

/* --- Sage Garden: calm greens with warm amber --------------------------- */
html[data-theme="sage"] {
    --bg: #F4F6F1;
    --bg-alt: #EBF0E7;
    --surface: #FFFFFF;
    --field: #FAFBF8;
    --ink: #1F2D27;
    --text: #4F5D56;
    --text-strong: #3A4842;
    --muted: #8A968F;
    --line: #DFE5DC;
    --tint: #E8EFE5;

    --primary: #2F5D4E;
    --primary-hover: #3A6E5D;
    --primary-ink: #ffffff;
    --accent: #D9822B;
    --accent-2: #E39A4E;
    --accent-ink: #ffffff;
    --accent-text: #A9601A;

    --header-bg: rgba(255, 255, 255, .86);
    --header-line: #DFE5DC;
    --nav-hover: #E8EFE5;

    --panel-bg: #2F5D4E;
    --panel-text: #D3E2DA;
    --panel-heading: #ffffff;
    --panel-card: rgba(255, 255, 255, .07);
    --panel-card-line: rgba(255, 255, 255, .1);
    --panel-glow-1: rgba(168, 214, 180, .18);
    --panel-glow-2: rgba(217, 130, 43, .16);
    --panel-accent: #F0B271;

    --involve-bg: linear-gradient(135deg, #E2EBDD, #D5E3CF);
    --involve-text: #4F5D56;
    --involve-heading: #1F2D27;
    --involve-em: #2F5D4E;
    --involve-chip: rgba(255, 255, 255, .7);

    --footer-bg: #213F35;
    --footer-text: #B5C7BE;
    --footer-heading: #ffffff;
    --footer-line: rgba(255, 255, 255, .09);
    --footer-accent: #F0B271;

    --hero-overlay: linear-gradient(100deg, rgba(33, 63, 53, .9) 0%, rgba(33, 63, 53, .65) 55%, rgba(33, 63, 53, .2) 100%);
    --blob-1: rgba(47, 93, 78, .10);
    --blob-2: rgba(217, 130, 43, .08);

    --ic-orange-bg: #FBEBD9; --ic-orange: #B5671A;
    --ic-blue-bg: #E2EEF0;   --ic-blue: #2F6F7E;
    --ic-rose-bg: #F6E5E2;   --ic-rose: #B2574B;
    --ic-amber-bg: #F7F0D9;  --ic-amber: #93741A;
    --ic-violet-bg: #ECEAF3; --ic-violet: #5F5A8C;
    --ic-green-bg: #E1EDE4;  --ic-green: #2F7A55;

    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    --shadow: 0 2px 4px rgba(31, 45, 39, .03), 0 10px 28px rgba(31, 45, 39, .06);
    --shadow-lg: 0 24px 50px -28px rgba(31, 45, 39, .28);

    --font: 'DM Sans', system-ui, sans-serif;
    --serif: 'DM Serif Display', Georgia, serif;
    --heading-weight: 700;
    --heading-tracking: -.025em;
}
html[data-theme="sage"] h1 em, html[data-theme="sage"] h2 em { font-weight: 400; }

/* --- Ocean Calm: cool blue-grey, steady blue ---------------------------- */
html[data-theme="ocean"] {
    --bg: #F3F6F9;
    --bg-alt: #EAF0F5;
    --surface: #FFFFFF;
    --field: #F8FAFC;
    --ink: #16233B;
    --text: #4A5568;
    --text-strong: #374151;
    --muted: #8C97A8;
    --line: #E1E7EE;
    --tint: #E8F0F8;

    --primary: #1E3A5F;
    --primary-hover: #284B78;
    --primary-ink: #ffffff;
    --accent: #2E86C1;
    --accent-2: #4AA0D8;
    --accent-ink: #ffffff;
    --accent-text: #1F6FA6;

    --header-bg: rgba(255, 255, 255, .86);
    --header-line: #E1E7EE;
    --nav-hover: #EDF2F7;

    --panel-bg: #1E3A5F;
    --panel-text: #C9D6E6;
    --panel-heading: #ffffff;
    --panel-card: rgba(255, 255, 255, .06);
    --panel-card-line: rgba(255, 255, 255, .1);
    --panel-glow-1: rgba(74, 160, 216, .25);
    --panel-glow-2: rgba(255, 255, 255, .06);
    --panel-accent: #7CC0EC;

    --involve-bg: linear-gradient(135deg, #E3EEF8, #D6E6F4);
    --involve-text: #4A5568;
    --involve-heading: #16233B;
    --involve-em: #1F6FA6;
    --involve-chip: rgba(255, 255, 255, .75);

    --footer-bg: #152B47;
    --footer-text: #AFBFD3;
    --footer-heading: #ffffff;
    --footer-line: rgba(255, 255, 255, .09);
    --footer-accent: #7CC0EC;

    --hero-overlay: linear-gradient(100deg, rgba(21, 43, 71, .9) 0%, rgba(21, 43, 71, .65) 55%, rgba(21, 43, 71, .2) 100%);
    --blob-1: rgba(46, 134, 193, .10);
    --blob-2: rgba(30, 58, 95, .06);

    --ic-orange-bg: #FCEBDD; --ic-orange: #C2622A;
    --ic-blue-bg: #E3EFF8;   --ic-blue: #1F6FA6;
    --ic-rose-bg: #F8E6EA;   --ic-rose: #B5475D;
    --ic-amber-bg: #FBF1DA;  --ic-amber: #97701A;
    --ic-violet-bg: #EDEBF8; --ic-violet: #5B57A6;
    --ic-green-bg: #E2F2EA;  --ic-green: #2B7D58;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --shadow: 0 1px 3px rgba(22, 35, 59, .04), 0 8px 24px rgba(22, 35, 59, .06);
    --shadow-lg: 0 20px 44px -24px rgba(22, 35, 59, .3);

    --font: 'Inter', system-ui, sans-serif;
    --serif: 'Source Serif 4', Georgia, serif;
    --heading-weight: 700;
    --heading-tracking: -.025em;
}

/* --- Dusk: soft dark mode with warm amber ------------------------------- */
html[data-theme="dusk"] {
    color-scheme: dark;
    --bg: #12161F;
    --bg-alt: #161B26;
    --surface: #1A202C;
    --field: #151A24;
    --ink: #E8EAF0;
    --text: #AEB6C4;
    --text-strong: #C5CCD8;
    --muted: #7D8698;
    --line: #2A3242;
    --tint: #1E2533;

    --primary: #E8EAF0;
    --primary-hover: #FFFFFF;
    --primary-ink: #12161F;
    --accent: #F0A35E;
    --accent-2: #F4B67A;
    --accent-ink: #1B1206;
    --accent-text: #F0A35E;

    --header-bg: rgba(26, 32, 44, .84);
    --header-line: #2A3242;
    --nav-hover: #242B39;

    --panel-bg: #1A202C;
    --panel-text: #AEB6C4;
    --panel-heading: #ffffff;
    --panel-card: rgba(255, 255, 255, .03);
    --panel-card-line: #2A3242;
    --panel-glow-1: rgba(96, 165, 250, .10);
    --panel-glow-2: rgba(240, 163, 94, .12);
    --panel-accent: #F0A35E;

    --involve-bg: linear-gradient(135deg, #2A2219, #1F1B17);
    --involve-text: #C9B9A6;
    --involve-heading: #ffffff;
    --involve-em: #F0A35E;
    --involve-chip: rgba(240, 163, 94, .14);

    --footer-bg: #0D1118;
    --footer-text: #8F98A8;
    --footer-heading: #E8EAF0;
    --footer-line: rgba(255, 255, 255, .06);
    --footer-accent: #F0A35E;

    --hero-overlay: linear-gradient(100deg, rgba(10, 13, 20, .92) 0%, rgba(10, 13, 20, .7) 55%, rgba(10, 13, 20, .3) 100%);
    --blob-1: rgba(240, 163, 94, .07);
    --blob-2: rgba(96, 165, 250, .05);

    --ic-orange-bg: rgba(240, 163, 94, .14);  --ic-orange: #F0A35E;
    --ic-blue-bg: rgba(96, 165, 250, .14);    --ic-blue: #7FB5F5;
    --ic-rose-bg: rgba(244, 114, 182, .12);   --ic-rose: #F08BB4;
    --ic-amber-bg: rgba(250, 204, 21, .12);   --ic-amber: #E9C25A;
    --ic-violet-bg: rgba(167, 139, 250, .14); --ic-violet: #B3A0F7;
    --ic-green-bg: rgba(74, 222, 128, .12);   --ic-green: #74D69A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 50px -20px rgba(0, 0, 0, .6);

    --font: 'Manrope', system-ui, sans-serif;
    --serif: 'Fraunces', Georgia, serif;
    --heading-weight: 700;
    --heading-tracking: -.02em;
}
html[data-theme="dusk"] .logo img { background: #fff; padding: 4px 10px; border-radius: 12px; }
html[data-theme="dusk"] main img { filter: brightness(.9); }
html[data-theme="dusk"] .map-card iframe { filter: grayscale(.4) brightness(.8); }
html[data-theme="dusk"] .tone-2, html[data-theme="dusk"] .tone-3 { color: #12161F; }
html[data-theme="dusk"] .alert-success { background: rgba(74, 222, 128, .1); color: #86efac; border-color: rgba(74, 222, 128, .25); }
html[data-theme="dusk"] .alert-error { background: rgba(248, 113, 113, .1); color: #fca5a5; border-color: rgba(248, 113, 113, .25); }

/* ==========================================================================
   Visitor colour switcher: the logo's orange or the logo's blue.
   The palette sits on top of the admin-chosen theme. On light themes it
   recolours accents and (for Soft Sand) the backgrounds; Dusk keeps its dark
   surfaces and only swaps the accent.
   ========================================================================== */

/* --- Orange (logo orange #FF7600) ---------------------------------------- */
html[data-palette="orange"] {
    --accent: #F07410;
    --accent-2: #FF9440;
    --accent-ink: #ffffff;
    --blob-1: rgba(255, 118, 0, .10);
}
html[data-palette="orange"]:not([data-theme="dusk"]) {
    --accent-text: #BF5A08;
    --ic-orange-bg: #FCE9D9; --ic-orange: #BF5A08;
}
html[data-palette="orange"][data-theme="sand"] {
    --tint: #FBEBDC;
    --panel-accent: #BF5A08;
    --panel-glow-2: rgba(255, 118, 0, .14);
    --involve-bg: linear-gradient(135deg, #FCEBDA, #F8DDC3);
    --involve-em: #BF5A08;
    --footer-accent: #FFA65C;
}
html[data-palette="orange"][data-theme="dusk"] { --accent-text: #FF9A4A; --panel-accent: #FF9A4A; --involve-em: #FF9A4A; --footer-accent: #FF9A4A; }

/* --- Blue (logo blue #00A5FF) -------------------------------------------- */
html[data-palette="blue"] {
    --accent: #0A97DC;
    --accent-2: #36B4F2;
    --accent-ink: #ffffff;
    --blob-1: rgba(0, 165, 255, .10);
}
html[data-palette="blue"]:not([data-theme="dusk"]) {
    --accent-text: #0074B3;
    --ic-orange-bg: #E1F1FB; --ic-orange: #0074B3;
}
html[data-palette="blue"][data-theme="sand"],
html[data-palette="blue"][data-theme="classic"] {
    --bg: #F3F7FA;
    --bg-alt: #E8F0F6;
    --surface: #FFFFFF;
    --field: #F8FBFD;
    --line: #DCE6ED;
    --tint: #E3F1FA;
    --primary: #17395A;
    --primary-hover: #21496F;
    --header-bg: rgba(250, 252, 254, .86);
    --header-line: #DCE6ED;
    --nav-hover: #E7EFF5;
    --panel-bg: #E3EEF6;
    --panel-bg-alt: #D6E7F2;
    --panel-text: #4E5D6B;
    --panel-heading: #1D2A38;
    --panel-card: rgba(255, 255, 255, .6);
    --panel-card-line: rgba(23, 57, 90, .07);
    --panel-glow-1: rgba(255, 255, 255, .7);
    --panel-glow-2: rgba(0, 165, 255, .14);
    --panel-accent: #0074B3;
    --involve-bg: linear-gradient(135deg, #E1F1FB, #D0E8F6);
    --involve-text: #4E5D6B;
    --involve-heading: #1D2A38;
    --involve-em: #0074B3;
    --involve-chip: rgba(255, 255, 255, .75);
    --footer-bg: #15324D;
    --footer-text: #AFC2D4;
    --footer-accent: #6CC9FF;
    --hero-overlay: linear-gradient(100deg, rgba(21, 50, 77, .9) 0%, rgba(21, 50, 77, .65) 55%, rgba(21, 50, 77, .2) 100%);
    --blob-2: rgba(23, 57, 90, .06);
}
html[data-palette="blue"][data-theme="dusk"] { --accent-text: #5CC4FF; --panel-accent: #5CC4FF; --involve-em: #5CC4FF; --footer-accent: #5CC4FF; --accent-ink: #06131D; }
/* ==========================================================================
   Amber: warm amber orange, plus full-width photo headers that start at the
   very top of the page with the menu floating inside them.
   ========================================================================== */
html[data-palette="amber"] {
    --accent: #F2A20C;
    --accent-2: #FFC24A;
    --accent-ink: #2B1B00;
    --blob-1: rgba(242, 162, 12, .12);
    --full-overlay: linear-gradient(90deg, rgba(24, 17, 6, .86) 0%, rgba(24, 17, 6, .6) 48%, rgba(24, 17, 6, .18) 100%);
}
html[data-palette="amber"]:not([data-theme="dusk"]) {
    --accent-text: #9A5B00;
    --ic-orange-bg: #FDF0D2; --ic-orange: #9A5B00;
}
html[data-palette="amber"][data-theme="sand"],
html[data-palette="amber"][data-theme="classic"] {
    --bg: #FBF7EE;
    --bg-alt: #F6EEDC;
    --tint: #FCF1D9;
    --line: #EDE3CC;
    --primary: #2E2414;
    --primary-hover: #45361E;
    --header-bg: rgba(255, 252, 245, .9);
    --header-line: #EDE3CC;
    --nav-hover: #F6EEDC;
    --panel-bg: #F4E8CC;
    --panel-bg-alt: #EEDDB6;
    --panel-accent: #9A5B00;
    --panel-glow-2: rgba(242, 162, 12, .18);
    --involve-bg: linear-gradient(135deg, #FDF0D2, #F9E2AC);
    --involve-em: #9A5B00;
    --footer-bg: #2A2114;
    --footer-text: #CBBFA6;
    --footer-accent: #FFC24A;
}
html[data-palette="amber"][data-theme="dusk"] { --accent-text: #FFC24A; --panel-accent: #FFC24A; --involve-em: #FFC24A; --footer-accent: #FFC24A; }

/* ==========================================================================
   Full-width layout (Orange Full and Blue Full):
   photo headers start at the very top of the page and the menu floats inside
   them. Colours come from the palette.
   ========================================================================== */
/* Photo overlay for full-width themes other than Amber */
html[data-layout="full"]:not([data-palette="amber"]) {
    --full-overlay: linear-gradient(90deg, rgba(30, 37, 56, .88) 0%, rgba(30, 37, 56, .6) 48%, rgba(30, 37, 56, .18) 100%);
}
/* Blue Full: deep blue overlay matching the Blue theme */
html[data-layout="full"][data-palette="blue"] {
    --full-overlay: linear-gradient(90deg, rgba(14, 42, 68, .88) 0%, rgba(14, 42, 68, .6) 48%, rgba(14, 42, 68, .18) 100%);
}
/* The menu stays where it is, but floats over the photo at the top of the page */
html[data-layout="full"] .site-header { position: fixed; top: 0; left: 0; right: 0; }
html[data-layout="full"] main > :first-child:not(.hero):not(.page-hero) { padding-top: calc(110px + 2cm); }

/* Over a photo (page top, not scrolled, menu closed): frosted glass with light text */
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) .main-nav ul a { color: #fff; }
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) .main-nav ul a:hover { background: rgba(255, 255, 255, .14); }
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) .main-nav ul a.active { background: #fff; color: var(--primary); }
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) :is(.nav-user, .palette-toggle) {
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff;
}
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .header-bar:not(:has(.main-nav.open)) .palette-hole { fill: rgba(80, 60, 30, .55); }
html[data-layout="full"] body:has(main > :is(.hero, .page-hero):first-child) .site-header:not(.scrolled) .logo img { background: #fff; padding: 4px 10px; border-radius: 12px; }

/* Home: full-width photo slider behind the text */
html[data-layout="full"] .hero {
    /* 1.5cm shorter than full screen; the padding is trimmed by the same 1.5cm */
    min-height: calc(min(100vh, 880px) - 1.5cm); padding: calc(160px - 1cm) 0 calc(96px - .5cm);
    display: flex; align-items: center; color: #fff;
}
html[data-layout="full"] .hero::before, html[data-layout="full"] .hero::after { display: none; }
html[data-layout="full"] .hero-grid { grid-template-columns: minmax(0, 720px); }
html[data-layout="full"] .hero-text { position: relative; z-index: 1; }
html[data-layout="full"] .hero-media { position: absolute; inset: 0; height: auto; display: block; z-index: -1; }
html[data-layout="full"] .hero-media::after { content: ''; position: absolute; inset: 0; background: var(--full-overlay), linear-gradient(0deg, rgba(24, 17, 6, .45), transparent 45%); }
html[data-layout="full"] .hero-img-main { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
html[data-layout="full"] .hero-img-main img { object-position: center 35%; }
html[data-layout="full"] :is(.hero-img-top, .hero-img-bottom, .float-card) { display: none; }
html[data-layout="full"] .hero :is(h1, .h1) { color: #fff; }
html[data-layout="full"] .hero :is(h1, .h1) em { color: var(--accent-2); }
html[data-layout="full"] .hero .lead { color: rgba(255, 255, 255, .9); }
html[data-layout="full"] .hero .chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
html[data-layout="full"] .hero .chip .icon { color: var(--accent-2); }
html[data-layout="full"] .hero .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
html[data-layout="full"] .hero .btn-ghost:hover { background: #fff; color: var(--primary); }
html[data-layout="full"] .hero-stats { border-top-color: rgba(255, 255, 255, .22); }
html[data-layout="full"] .hero-stats dt { color: #fff; }
html[data-layout="full"] .hero-stats dd { color: rgba(255, 255, 255, .72); }
html[data-layout="full"] .slide-dots button { background: rgba(255, 255, 255, .45); }
html[data-layout="full"] .slide-dots button.active { background: var(--accent); }

/* Inner pages: the banner becomes a full-width photo from the top of the page */
html[data-layout="full"] .page-hero { padding: 0; }
html[data-layout="full"] .page-hero .container { max-width: none; padding: 0; }
html[data-layout="full"] .page-hero-card {
    border-radius: 0; min-height: min(72vh, 620px);
    padding: 170px max(24px, calc((100% - 1172px) / 2)) 80px;
}
html[data-layout="full"] .page-hero-card::before { background: var(--full-overlay); }
html[data-layout="full"] .page-hero-card .ph-img { object-position: center 35%; }

@media (max-width: 920px) {
    html[data-layout="full"] .hero { padding: calc(130px - 1cm) 0 calc(70px - .5cm); min-height: 0; }
    html[data-layout="full"] .page-hero-card { padding: 140px 24px 64px; min-height: 0; }
}
@media (max-width: 600px) {
    html[data-layout="full"] .page-hero-card { padding: 120px 16px 56px; }
}
/* ==========================================================================
   Banner photo options (Admin > Hero Slides > Photo display / Photo focus)
   ========================================================================== */
html body .page-hero-card .ph-img.focus-top { object-position: center 15%; }
html body .page-hero-card .ph-img.focus-bottom { object-position: center 85%; }
/* Whole photo: the complete image sits on the right, a blurred copy fills the rest */
html body .page-hero-card .ph-img.fit-whole { object-fit: contain; object-position: right center; }
html body .page-hero-card .ph-img.ph-blur { z-index: -3; filter: blur(26px) brightness(.62) saturate(1.1); transform: scale(1.15); }
@media (max-width: 600px) {
    /* On phones the banner is nearly square, so filling it already shows almost the whole photo */
    html body .page-hero-card .ph-img.fit-whole { object-fit: cover; object-position: center 30%; }
    html body .page-hero-card .ph-img.ph-blur { display: none; }
}/* Full-width themes: the menu floats over the top of the banner, so start the whole photo below it */
html[data-layout="full"] body .page-hero-card .ph-img.fit-whole { top: 92px; height: calc(100% - 92px); }
@media (max-width: 920px) {
    html[data-layout="full"] body .page-hero-card .ph-img.fit-whole { top: 84px; height: calc(100% - 84px); }
}/* Phones: text at the top, the complete photo underneath it (no faces behind the words) */
@media (max-width: 600px) {
    html[data-layout] body .page-hero-card:has(.ph-img.fit-whole) { justify-content: flex-start; padding-bottom: calc(93% + 20px); }
    html[data-layout] body .page-hero-card .ph-img.fit-whole { object-fit: contain; object-position: center bottom; top: auto; bottom: 0; height: auto; }
    html[data-layout] body .page-hero-card .ph-img.ph-blur { display: block; }
    html[data-layout] body .page-hero-card:has(.ph-img.fit-whole)::before {
        background: linear-gradient(180deg, rgba(18, 22, 34, .92) 0%, rgba(18, 22, 34, .82) 38%, rgba(18, 22, 34, .15) 58%, rgba(18, 22, 34, 0) 100%);
    }
}html body .page-hero-card .ph-img.focus-left { object-position: left center; }
html body .page-hero-card .ph-img.focus-right { object-position: right center; }/* "Right side" focus keeps the bottom too, so people at the bottom of a photo are never cut */
html body .page-hero-card .ph-img.focus-right { object-position: right 80%; }/* Very wide screens: full-width banners grow with the screen so wide photos are not trimmed top and bottom */
@media (min-width: 1700px) {
    html[data-layout="full"] .page-hero-card { min-height: max(min(72vh, 620px), calc(100vw / 3.1)); }
}
/* Phones: with "Right side" focus, the text sits above and the people fill the lower part of the banner */
@media (max-width: 600px) {
    html[data-layout] body .page-hero-card:has(.ph-img.focus-right) { justify-content: flex-start; padding-bottom: calc(108% + 12px); }
    html[data-layout] body .page-hero-card .ph-img.focus-right { top: auto; bottom: 0; height: auto; aspect-ratio: 9 / 10; object-fit: cover; object-position: right bottom; }
    html[data-layout] body .page-hero-card:has(.ph-img.focus-right)::before {
        background: linear-gradient(180deg, rgba(18, 22, 34, .94) 0%, rgba(18, 22, 34, .85) 36%, rgba(18, 22, 34, .2) 52%, rgba(18, 22, 34, 0) 70%);
    }
}