/* =========================
   FILE: style.css
========================= */
/*
Theme Name: Master Theme
Author: Venture Solutions
Version: 2.1 — School brand
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  Root Variables (brand palette lives here)
   2.  Reset & Base
   3.  Layout — Section & Row Containers
   4.  Responsive Hide Utilities
   5.  Tables (TablePress)
   6.  Banner / Hero
   7.  Breadcrumbs
   8.  Contact Page
   9.  Gravity Forms
  10.  Section Themes — Light & Dark
        11a. Typography (h2, h3, h4, text-area, lists, links)
        11b. Accordions
        11c. Link Buttons
        11d. Profile Cards (main)
        11e. Profile Cards (side)
        11f. Related Cards (main)
        11g. Related Cards (side)
  12.  Grid Wrappers
  13.  Gallery
  14.  Single post / Faculty & Staff templates
  15.  Scroll Animations
  16.  Global Focus States (accessibility)
  17.  Optional: alternating light sections (commented)
   ========================================================================== */

/* Fonts — enqueue Poppins (500/600/700) + Inter (400/500/600/700) in functions.php.
   If you cannot enqueue them, uncomment the line below.
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');
*/

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     SCHOOL BRAND PALETTE — change these four values to re-skin the site
     ------------------------------------------------------------------ */
  --brand-blue:          #21477D;   /* Primary blue — headings, nav, buttons, links */
  --brand-blue-dark:     #1E4681;   /* Secondary / darker blue */
  --brand-yellow:        #F9C947;   /* Accent yellow — CTAs, highlights, hovers */
  --brand-light:         #EFF1F7;   /* Light section / surface tint */

  /* Derived shades (generated from the brand colours — not new brand colours) */
  --brand-blue-deep:     #16305A;   /* Deep navy for dark sections & pressed states */
  --brand-yellow-dark:   #E3B02F;   /* Yellow hover / pressed state */

  /* Brand tints (used for soft backgrounds, borders, rings) */
  --blue-tint-04:  rgba(33, 71, 125, 0.04);
  --blue-tint-08:  rgba(33, 71, 125, 0.08);
  --blue-tint-12:  rgba(33, 71, 125, 0.12);
  --blue-tint-20:  rgba(33, 71, 125, 0.20);
  --blue-tint-35:  rgba(33, 71, 125, 0.35);
  --yellow-tint-12: rgba(249, 201, 71, 0.12);
  --yellow-tint-25: rgba(249, 201, 71, 0.25);
  --yellow-tint-45: rgba(249, 201, 71, 0.45);

  /* --- Brand Colours (legacy names kept so existing rules keep working) --- */
  --color-primary:          var(--brand-blue);        /* Primary heading / accent colour */
  --color-primary-alt:      var(--brand-blue-dark);   /* Secondary blue */
  --color-accent:           var(--brand-yellow);      /* Accent yellow — CTA / highlight */
  --color-accent-dark:      var(--brand-yellow-dark); /* Accent hover / emphasis */
  --color-success:          #4C9A5E;                  /* Functional green — form success only */
  --color-error:            #B3261E;                  /* Functional red — form errors only */
  --color-text-dark:        #111827;                  /* Neutral dark text */
  --color-white:            #ffffff;

  /* --- UI / Site Colours --- */
  --color-brand-dark:       var(--brand-blue);        /* Primary blue used across UI */
  --color-brand-navy:       var(--brand-blue-deep);   /* Table header, contact h3 */
  --color-brand-navy-alt:   var(--brand-blue-dark);   /* Light section h2 span text */
  --color-brand-hover:      var(--brand-blue-deep);   /* Deep hover state */
  --color-link-blue:        var(--brand-blue);        /* General link / highlight */
  --color-highlight-yellow: var(--brand-yellow);      /* H2 span highlight background */
  --color-overlay-dark:     rgba(22, 48, 90, 0.55);          /* Banner overlay */
  --color-overlay-blue:     rgba(22, 48, 90, 0.74);          /* Dark section image overlay */
  --color-overlay-white:    rgba(239, 241, 247, 0.72);       /* Light section image overlay */

  /* --- Section Background Colours --- */
  --bg-light:               #ffffff;                  /* Light sections & card surfaces */
  --bg-light-alt:           var(--brand-light);       /* Subtle alternate / tinted surface */
  --bg-dark:                var(--brand-blue-deep);   /* Dark sections */
  --bg-breadcrumb:          var(--brand-blue);
  --bg-form-input:          var(--brand-light);
  --bg-card-dark:           #1E4681;
  --bg-card-dark-alt:       #1B3E73;
  --bg-card-hover-dark:     #26559B;

  /* --- Greyscale Palette (neutral UI only) --- */
  --grey-900: #1e1e1e;
  --grey-800: #2b2b2b;
  --grey-700: #444444;
  --grey-600: #666666;
  --grey-500: #888888;
  --grey-400: #aaaaaa;
  --grey-300: #d4d8e4;
  --grey-200: #e2e6f0;
  --grey-100: var(--brand-light);
  --grey-50:  #f7f8fc;

  /* --- Text Colours (semantic shortcuts) --- */
  --text-body-light:        #2B3440;   /* Body copy on light backgrounds */
  --text-body-dark:         #ffffff;   /* Body copy on dark backgrounds */
  --text-secondary-light:   #5A6577;
  --text-secondary-dark:    rgba(255, 255, 255, 0.78);
  --text-muted-dark:        rgba(255, 255, 255, 0.72);

  /* --- Font Families --- */
  --font-primary:   'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading:   'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Font Weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 700;

  /* --- Line Heights --- */
  --leading-loose:    1.75;
  --leading-standard: 1.55;
  --leading-fine:     1.35;
  --leading-flat:     1.15;
  --leading-tight:    1.05;

  /* --- Letter Spacing --- */
  --tracking-heading: -0.015em;   /* Poppins reads better very slightly tightened */
  --tracking-body:     0;
  --tracking-label:    0.08em;    /* Small uppercase eyebrow labels */

  /* --- Fluid Font Sizes --- */
  --step--2: clamp(0.75rem,  0.72rem + 0.12vw, 0.8125rem);
  --step--1: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --step-0:  clamp(1rem,     0.96rem  + 0.18vw, 1.125rem);  /* Base body */
  --step-1:  clamp(1.25rem,  1.15rem  + 0.4vw,  1.5rem);    /* Subheading */
  --step-2:  clamp(1.5rem,   1.3rem   + 0.7vw,  2rem);      /* H2 small */
  --step-3:  clamp(1.75rem,  1.35rem  + 1.6vw,  2.75rem);   /* H2 / section headline */
  --step-4:  clamp(2.25rem,  1.7rem   + 2.2vw,  3.5rem);    /* Hero headline */

  /* --- Spacing --- */
  --space-xs:   8px;
  --space-s:    12px;
  --space-m:    15px;
  --space-l:    20px;
  --space-xl:   30px;
  --space-2xl:  40px;
  --space-3xl:  80px;

  /* --- Max Content Widths --- */
  --measure-xs: 35ch;
  --measure-s:  45ch;
  --measure-m:  60ch;
  --measure-l:  75ch;
  --measure-xl: 90ch;
  --row-max:    1080px;
  --row-wide:   1280px;
  --row-xwide:  1300px;
  --row-xxwide: 1400px;
  --row-width:  80%;

  /* --- Border Radius --- */
  --radius-s:   6px;
  --radius-m:   8px;
  --radius-l:   12px;
  --radius-xl:  16px;
  --radius-pill: 30px;
  --radius-circle: 50%;

  /* --- Borders / Dividers --- */
  --border-light:      1px solid var(--blue-tint-12);
  --border-light-soft: 1px solid var(--blue-tint-08);
  --border-dark:       1px solid rgba(255, 255, 255, 0.14);

  /* --- Shadows (brand-tinted, neutral depth) --- */
  --shadow-xs:  0 1px 3px rgba(22, 48, 90, 0.06);
  --shadow-s:   0 2px 8px rgba(22, 48, 90, 0.08);
  --shadow-m:   0 6px 18px rgba(22, 48, 90, 0.12);
  --shadow-l:   0 12px 28px rgba(22, 48, 90, 0.16);
  --shadow-xl:  0 18px 40px rgba(22, 48, 90, 0.20);
  --shadow-dark-s:  0 2px 8px rgba(9, 22, 43, 0.35);
  --shadow-dark-m:  0 6px 18px rgba(9, 22, 43, 0.40);
  --shadow-dark-l:  0 12px 28px rgba(9, 22, 43, 0.48);
  --shadow-dark-xl: 0 18px 40px rgba(9, 22, 43, 0.55);
  --shadow-yellow:  0 10px 24px rgba(249, 201, 71, 0.35);

  /* --- Transitions --- */
  --transition-fast:   0.2s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.3s ease;
  --transition-xslow:  0.5s ease;

  /* --- Grid Gaps --- */
  --gap-s:  10px;
  --gap-m:  15px;
  --gap-l:  20px;
  --gap-xl: 30px;
  --gap-2xl: 50px;

  /* --- Link Button Shared --- */
  --btn-padding:      0.95rem 1.9rem;
  --btn-font-size:    1.0625rem;
  --btn-radius:       var(--radius-m);
  --btn-bg:           var(--brand-blue);
  --btn-color:        var(--color-white);
  --btn-hover-bg:     var(--brand-yellow);
  --btn-hover-color:  var(--brand-blue-dark);

  /* --- Accordion Border Colours --- */
  --accordion-border-light: var(--brand-blue);
  --accordion-border-dark:  var(--brand-yellow);

  /* --- Focus Ring --- */
  --focus-ring-light: 0 0 0 3px var(--yellow-tint-45), 0 0 0 5px var(--brand-blue);
  --focus-ring-dark:  0 0 0 3px var(--brand-blue-deep), 0 0 0 5px var(--brand-yellow);

  /* --- Profile Card Image Height --- */
  --profile-img-height:         200px;
  --profile-img-height-mobile:  180px;
  --profile-img-height-small:   160px;
  --profile-side-img-size:      70px;
  --profile-side-img-mobile:    60px;

  /* --- Section Padding --- */
  --section-padding:            var(--space-3xl);

  /* --- Banner Padding --- */
  --banner-padding-desktop:     220px;
  --banner-padding-tablet:      160px;
  --banner-padding-mobile:      100px;
  --banner-padding-small:       70px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global: all headings use Poppins */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-flat);
  color: var(--brand-blue);
}

h1 { font-weight: var(--weight-bold); }
h2 { font-weight: var(--weight-bold); }
h3, h4 { font-weight: var(--weight-semibold); }
h5, h6 { font-weight: var(--weight-semibold); }

body {
  font-family: var(--font-primary);
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text-body-light);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All non-heading text elements use Inter */
p, span, li, label, input, textarea, select, button, a, td, th {
  font-family: var(--font-primary);
}

/* Default link colour */
a {
  color: var(--brand-blue);
}

a:hover {
  color: var(--brand-blue-dark);
}

/* Text selection */
::selection {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

/* Nested list spacing */
ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0.6rem;
  margin-bottom: 0.5rem;
}

/* Horizontal rules / dividers */
hr {
  border: none;
  border-top: 1px solid var(--blue-tint-12);
  margin: var(--space-xl) 0;
}

/* ==========================================================================
   3. LAYOUT — SECTION & ROW CONTAINERS
   ========================================================================== */
.section_container {
  overflow: hidden;                 /* contains the fade-slide-in animations */
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

.row_structure {
  width: var(--row-width);
  max-width: var(--row-max);
  margin: auto;
  z-index: 2;
  position: relative;
}

/* --- Sidebar Layout (main + 28% sidebar) --- */
.row_structure_side_bar {
  display: grid;
  grid-template-columns: 3fr 28%;
  grid-gap: var(--gap-xl);
  width: var(--row-width);
  margin: auto;
  max-width: var(--row-xwide);
  z-index: 2;
  position: relative;
}

@media only screen and (max-width: 980px) {
  .row_structure_side_bar {
    grid-template-columns: 100%;
  }
}

/* --- Dual Sidebar Layout (22% | content | 22%) --- */
.row_structure_duel-side_bar {
  display: grid;
  grid-template-columns: 22% 1fr 22%;
  grid-gap: var(--gap-xl);
  width: var(--row-width);
  margin: auto;
  max-width: var(--row-xxwide);
  z-index: 2;
  position: relative;
}

@media only screen and (max-width: 980px) {
  .row_structure_duel-side_bar {
    grid-template-columns: 100%;
  }
  .column_1-duel-side-bar { order: 2; }
  .column_2-duel-side-bar { order: 1; }
  .column_3-duel-side-bar { order: 3; }
}

/* --- Side Image Layout (50/50) --- */
.row_structure_side-img {
  display: grid;
  grid-gap: var(--gap-2xl);
  grid-template-columns: 1fr 1fr;
  z-index: 2;
  width: var(--row-width);
  margin: auto;
  max-width: var(--row-wide);
  position: relative;
}

@media only screen and (max-width: 980px) {
  .row_structure_side-img {
    grid-template-columns: 1fr;
  }
}

.column_1-side-img {
  margin: auto;
}

.column_2-side-img img {
  width: 100%;
  border-radius: 40px;
}

.column_2-side-img.left-border-img img {
  border-radius: 40px;
}

@media only screen and (max-width: 980px) {
  .column_2-side-img {
    display: none;
  }
}

/* --- Utilities --- */
.full_width-img img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  margin-bottom: -7px;
}

.verification-svg_container {
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--brand-blue);
}

/* Any inline SVG that inherits colour picks up the brand blue */
.verification-svg_container svg,
.contact-item .icon svg,
.staff-profile__contact-icon svg,
.staff-profile__section-icon svg,
.single-post__link-icon svg {
  fill: currentColor;
}

.margin_bottom {
  margin-bottom: var(--space-m);
}

.side-video-wrapper iframe {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  display: block;
  border: 0;
}

/* ==========================================================================
   4. RESPONSIVE HIDE UTILITIES
   ========================================================================== */
@media (max-width: 1024px) {
  .hide-on-tablet-mobile,
  .hide-left-on-tablet-mobile,
  .hide-right-on-tablet-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.4s ease;
  }
}

/* ==========================================================================
   5. TABLES (TABLEPRESS)
   ========================================================================== */
.tablepress colgroup col {
  width: 100% !important;
}

.tablepress {
  border-collapse: collapse;
  margin-top: var(--space-m);
  margin-bottom: var(--space-l);
  font-size: 0.9em;
  font-family: var(--font-primary);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-m);
}

.tablepress thead tr {
  background-color: var(--brand-blue);
  color: var(--color-white);
  text-align: left;
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

.tablepress th,
.tablepress td {
  padding: 12px 15px;
  font-family: var(--font-primary);
}

.tablepress tbody tr {
  border-bottom: 1px solid var(--blue-tint-12);
}

.tablepress tbody tr:nth-of-type(even) {
  background-color: var(--brand-light);
}

.tablepress tbody tr:last-of-type {
  border-bottom: 2px solid var(--brand-blue);
}

.tablepress tbody tr.active-row {
  font-weight: var(--weight-bold);
  color: var(--brand-blue-dark);
}

.tablepress > :where(thead, tfoot) > * > th {
  background-color: var(--brand-blue) !important;
  color: var(--color-white) !important;
}

td.column-1 {
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
}

.st-head-row.st-head-row-main {
  font-size: 1.5em;
  padding-top: 10px;
  color: var(--brand-blue);
}

/* --- Responsive Stack Table --- */
.table-responsive-stack tr {
  display: flex;
  flex-direction: row;
}

.table-responsive-stack td,
.table-responsive-stack th {
  display: block;
  flex: 1 1 auto;
}

.table-responsive-stack .table-responsive-stack-thead {
  font-weight: var(--weight-bold);
}

@media screen and (max-width: 768px) {
  .table-responsive-stack tr {
    flex-direction: column;
    border-bottom: 3px solid var(--blue-tint-20);
    display: block;
    margin-top: 10px;
  }
  .table-responsive-stack tr:first-child {
    margin-top: 0;
  }
  .table-responsive-stack td {
    float: left\9;
    width: auto;
  }
  .table-responsive-stack .table-responsive-stack-thead {
    display: grid !important;
  }
}

span.table-responsive-stack-thead {
  color: var(--brand-blue);
  font-size: 14px;
  font-weight: 700 !important;
  font-family: var(--font-primary);
}

.gfield--type-repeater_end {
  padding: 0px !important;
}

/* ==========================================================================
   6. BANNER / HERO
   ========================================================================== */
.banner-container {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-top: var(--banner-padding-desktop);
  padding-bottom: var(--banner-padding-desktop);
}

@media (max-width: 1024px) {
  .banner-container {
    padding-top: var(--banner-padding-tablet);
    padding-bottom: var(--banner-padding-tablet);
  }
}

@media (max-width: 768px) {
  .banner-container {
    padding-top: var(--banner-padding-mobile);
    padding-bottom: var(--banner-padding-mobile);
  }
}

@media (max-width: 480px) {
  .banner-container {
    padding-top: var(--banner-padding-small);
    padding-bottom: var(--banner-padding-small);
  }
}

/* Brand gradient base */
.banner-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(157.38deg, var(--brand-blue) 0%, var(--brand-blue-dark) 48%, var(--brand-blue-deep) 100%);
  opacity: 0.92;
  z-index: 1;
}

/* When a background image is present, overlay ensures text readability */
.banner-container[style*="background-image"]::before {
  background: linear-gradient(157.38deg, rgba(33, 71, 125, 0.86) 0%, rgba(30, 70, 129, 0.82) 48%, rgba(22, 48, 90, 0.90) 100%);
  opacity: 1;
}

/* Yellow accent rule anchoring the hero */
.banner-container::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--brand-yellow);
  z-index: 2;
}

.banner-container div {
  z-index: 2;
  position: relative;
}

.banner-container div h1 {
  color: var(--color-white);
  font-size: var(--step-4);
  font-weight: var(--weight-bold);
  font-family: var(--font-heading);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-heading);
  max-width: var(--measure-l);
}

.banner-container div h4 {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-standard);
  width: 50%;
  margin-top: var(--space-m);
  font-family: var(--font-primary);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 1024px) {
  .banner-container div h4 { width: 70%; }
}

@media (max-width: 768px) {
  .banner-container div h4 { width: 90%; }
}

@media (max-width: 480px) {
  .banner-container div h4 { width: 100%; }
}

/* ==========================================================================
   7. BREADCRUMBS
   ========================================================================== */
.breadcrumb_container {
  padding: 14px 0;
  background: var(--bg-breadcrumb);
}

.breadcrumb_row {
  width: var(--row-width);
  max-width: var(--row-max);
  margin: auto;
}

/* MAIN BREADCRUMB */
.breadcrumbs {
  font-size: 13px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  color: var(--color-white);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* glass effect */
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  word-spacing: 2px;
}

/* LINKS */
.breadcrumbs a {
  color: var(--color-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

/* HOVER */
.breadcrumbs a:hover {
  color: var(--brand-yellow);
  transform: translateY(-1px);
}

/* HOME ICON (FIRST LINK ONLY) */
.breadcrumbs a:first-of-type::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg fill=\"black\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z\"/></svg>') no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg fill=\"black\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z\"/></svg>') no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* LAST ITEM (CURRENT PAGE) — yellow accent chip */
.breadcrumbs > :last-child {
  background: var(--brand-yellow);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--brand-blue-dark);
  font-weight: var(--weight-semibold);
}

/* MOBILE */
@media (max-width: 768px) {
  .breadcrumb_row {
    overflow-x: auto;
  }
  .breadcrumbs {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }
  .breadcrumbs > :last-child {
    padding: 3px 8px;
    font-size: 12px;
  }
}

/* ==========================================================================
   8. CONTACT PAGE
   ========================================================================== */
.contact-page_row {
  width: var(--row-width);
  max-width: var(--row-max);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 980px) {
  .contact-page_row {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   CONTACT CARD
============================== */
.contact-card {
  background: var(--brand-light);
  padding: 30px;
  border-radius: var(--radius-xl);
  border: var(--border-light);
  box-shadow: var(--shadow-s);
}

.contact-card h2 {
  font-size: var(--step-3) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--brand-blue) !important;
  line-height: var(--leading-flat);
  margin-bottom: 10px;
}

.contact-card h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark) !important;
  margin-bottom: 10px;
}

/* ==============================
   CONTACT ITEMS
============================== */
.contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
}

.contact-item.full {
  flex-direction: row;
}

.contact-item .icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-m);
  background: var(--yellow-tint-25);
  color: var(--brand-blue);
  flex-shrink: 0;
}

.contact-item label {
  font-size: 11px;
  color: var(--text-secondary-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-semibold);
  display: block;
  margin-bottom: 8px;
}

.contact-item h3 {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
  margin: 0;
}

.info-text {
  font-size: var(--step--1);
  line-height: var(--leading-loose);
  color: var(--text-body-light);
}

.info-text p {
  margin-bottom: 1.2em;
}

.info-text a {
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--yellow-tint-45);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.info-text a:hover {
  color: var(--brand-blue-dark);
  border-bottom-color: var(--brand-yellow);
}

/* ==========================================================================
   9. GRAVITY FORMS
   ========================================================================== */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
  letter-spacing: 0.01em;
}

.gform_wrapper.gravity-theme .gfield_required {
  color: var(--brand-blue);
}

.gform_wrapper.gravity-theme input,
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme select {
  font-size: 15px;
  font-family: var(--font-primary);
  color: var(--text-body-light);
  padding: 12px 14px;
  background: var(--bg-form-input);
  border: 1px solid var(--blue-tint-12);
  border-radius: var(--radius-s);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
  color: var(--text-secondary-light);
  opacity: 0.85;
}

.gform_wrapper.gravity-theme input:hover,
.gform_wrapper.gravity-theme textarea:hover,
.gform_wrapper.gravity-theme select:hover {
  border-color: var(--blue-tint-35);
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper.gravity-theme select:focus {
  background: var(--color-white);
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--yellow-tint-45);
  outline: none;
}

/* Validation states — functional colours only */
.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error textarea,
.gform_wrapper.gravity-theme .gfield_error select {
  border-color: var(--color-error);
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--color-error);
  background: rgba(179, 38, 30, 0.06);
  border: none;
  border-left: 3px solid var(--color-error);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.gform_confirmation_message {
  font-family: var(--font-primary);
  color: var(--brand-blue-dark);
  background: var(--brand-light);
  border-left: 4px solid var(--color-success);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--space-l);
}

h2.gform_title {
  display: none !important;
}

.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
  width: 100%;
  padding: 1rem 2rem;
  font-size: var(--btn-font-size);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  background: var(--brand-blue);
  color: var(--color-white);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  box-shadow: var(--shadow-m);
  transition: background var(--transition-slow), color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}

.gform_wrapper.gravity-theme .gform_footer button:hover,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
  transform: translateY(-2px);
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  box-shadow: var(--shadow-yellow);
}

.gform_wrapper.gravity-theme .gform_footer button:active,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:active {
  transform: translateY(0);
  background: var(--brand-yellow-dark);
  color: var(--brand-blue-dark);
}

/* Forms sitting inside a dark section */
.section_container_dark .gform_wrapper.gravity-theme .gfield_label {
  color: var(--color-white);
}

.section_container_dark .gform_wrapper.gravity-theme input,
.section_container_dark .gform_wrapper.gravity-theme textarea,
.section_container_dark .gform_wrapper.gravity-theme select {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.25);
}

.section_container_dark .gform_wrapper.gravity-theme .gform_footer button,
.section_container_dark .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

.section_container_dark .gform_wrapper.gravity-theme .gform_footer button:hover,
.section_container_dark .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
  background: var(--color-white);
  color: var(--brand-blue);
}

/* ==========================================================================
   10. SECTION THEMES — LIGHT & DARK
   ========================================================================== */
/* --- Section Backgrounds & Image Overlays --- */
.section_container_light {
  background-color: var(--bg-light) !important;
}

/* Optional tinted variant — apply .section_container_light-alt in the builder
   if a soft #EFF1F7 section is wanted */
.section_container_light-alt {
  background-color: var(--bg-light-alt) !important;
}

.section_container_light-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-white);
  z-index: 1;
}

/* Dark section: deep brand navy */
.section_container_dark {
  background-color: var(--bg-dark) !important;
}

/* When dark section has a background image, overlay preserves readability */
.section_container_dark-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(157.38deg, rgba(33, 71, 125, 0.82) 0%, rgba(30, 70, 129, 0.80) 50%, rgba(22, 48, 90, 0.88) 100%);
  z-index: 1;
}

.side-video-wrapper {
  height: 100%;
  min-height: 250px;
}

.side-video-wrapper iframe {
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   11a. SECTION THEMES — TYPOGRAPHY
   ========================================================================== */
/* --- Light: H3 (eyebrow label) --- */
.section_container_light h3 {
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-standard);
  font-family: var(--font-primary) !important;
  text-transform: uppercase;
}

.section_container_light .row_structure_side-img div h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--brand-light);
  border: 1px solid var(--blue-tint-12);
  border-radius: var(--radius-pill);
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-family: var(--font-primary) !important;
  margin-bottom: 12px;
}

/* --- Light: H2 --- */
.section_container_light h2 {
  color: var(--brand-blue) !important;
  font-size: var(--step-3) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-flat) !important;
  letter-spacing: var(--tracking-heading) !important;
  padding: 0 !important;
  font-family: var(--font-heading) !important;
  padding-bottom: var(--space-m) !important;
  text-transform: none;
}

.section_container_light h2 span {
  background-color: var(--brand-yellow);
  color: var(--brand-blue-dark) !important;
  padding: 0 var(--space-xs) !important;
  border-radius: var(--radius-s);
  display: inline-block;
  max-width: 100%;
}

/* --- Light: H4 --- */
.section_container_light h4 {
  color: var(--brand-blue-dark);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  font-family: var(--font-heading) !important;
  text-transform: none;
}

/* --- Light: Body Text --- */
.section_container_light .text-area {
  color: var(--text-body-light);
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

.section_container_light .text-area p {
  margin-bottom: 1.1em;
}

.section_container_light .text-area p:last-child {
  margin-bottom: 0;
}

.section_container_light .text-area strong {
  color: var(--brand-blue-dark);
  font-weight: var(--weight-semibold);
}

/* --- Light: Unordered Lists --- */
.section_container_light ul {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.section_container_light ul li {
  margin-bottom: 0.5rem;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-light);
}

.section_container_light ul li::marker {
  color: var(--brand-yellow);
}

/* --- Light: Ordered Lists --- */
.section_container_light ol {
  margin-bottom: 10px;
  margin-top: 10px;
  list-style-type: decimal;
  padding: 0;
  padding-left: 1.5rem;
}

.section_container_light ol li {
  margin-bottom: 0.5rem;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-light);
}

.section_container_light ol li::marker {
  color: var(--brand-blue);
  font-weight: var(--weight-bold);
}

/* --- Light: Links --- */
.section_container_light .text-area a {
  color: var(--brand-blue);
  font-weight: var(--weight-medium);
  text-decoration: none !important;
  box-shadow: inset 0 -2px 0 var(--yellow-tint-45);
  transition: color var(--transition-base), box-shadow var(--transition-base);
}

.section_container_light .text-area a:hover {
  color: var(--brand-blue-dark);
  box-shadow: inset 0 -2px 0 var(--brand-yellow);
}

.section_container_light a {
  text-decoration: none !important;
  transition: color var(--transition-base), opacity var(--transition-base);
}

/* --- Dark: H3 (eyebrow label) --- */
.section_container_dark h3 {
  color: var(--brand-yellow);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-standard);
  font-family: var(--font-primary) !important;
  text-transform: uppercase;
}

.section_container_dark .row_structure_side-img div h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--yellow-tint-12);
  border: 1px solid var(--yellow-tint-45);
  border-radius: var(--radius-pill);
  color: var(--brand-yellow);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-family: var(--font-primary) !important;
  margin-bottom: 12px;
}

/* --- Dark: H2 --- */
.section_container_dark h2 {
  color: var(--color-white) !important;
  font-size: var(--step-3) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-flat) !important;
  letter-spacing: var(--tracking-heading) !important;
  padding: 0 !important;
  font-family: var(--font-heading) !important;
  padding-bottom: var(--space-m) !important;
  text-transform: none;
}

.section_container_dark h2 span {
  background-color: var(--brand-yellow);
  color: var(--brand-blue-dark) !important;
  padding: 0 var(--space-xs) !important;
  border-radius: var(--radius-s);
  display: inline-block;
  max-width: 100%;
}

/* --- Dark: H4 --- */
.section_container_dark h4 {
  color: var(--color-white);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  font-family: var(--font-heading) !important;
  text-transform: none;
}

/* --- Dark: Body Text --- */
.section_container_dark .text-area {
  color: var(--text-body-dark);
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

.section_container_dark .text-area p {
  margin-bottom: 1.1em;
}

.section_container_dark .text-area p:last-child {
  margin-bottom: 0;
}

.section_container_dark .text-area strong {
  color: var(--brand-yellow);
  font-weight: var(--weight-semibold);
}

/* --- Dark: Unordered Lists --- */
.section_container_dark ul {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.section_container_dark ul li {
  margin-bottom: 0.5rem;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-dark);
}

.section_container_dark ul li::marker {
  color: var(--brand-yellow);
}

/* --- Dark: Ordered Lists --- */
.section_container_dark ol {
  margin-bottom: 10px;
  margin-top: 10px;
  list-style-type: decimal;
  padding: 0;
  padding-left: 1.5rem;
}

.section_container_dark ol li {
  margin-bottom: 0.5rem;
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  font-weight: var(--weight-regular);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-dark);
}

.section_container_dark ol li::marker {
  color: var(--brand-yellow);
  font-weight: var(--weight-bold);
}

/* --- Dark: Links --- */
.section_container_dark .text-area a {
  color: var(--brand-yellow);
  font-weight: var(--weight-medium);
  text-decoration: none !important;
  box-shadow: inset 0 -2px 0 var(--yellow-tint-45);
  transition: color var(--transition-base), box-shadow var(--transition-base);
}

.section_container_dark .text-area a:hover {
  color: var(--color-white);
  box-shadow: inset 0 -2px 0 var(--color-white);
}

.section_container_dark a {
  text-decoration: none !important;
  transition: color var(--transition-base), opacity var(--transition-base);
}

/* ==========================================================================
   11b. SECTION THEMES — ACCORDIONS
   ========================================================================== */
/* --- Light: Accordion --- */
.section_container_light button.accordion {
  width: 100%;
  font-family: var(--font-heading);
  background-color: var(--brand-light);
  border: none;
  border-bottom: none;
  border-left: 4px solid transparent;
  outline: none;
  text-align: left;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-fine);
  color: var(--brand-blue-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border-radius: var(--radius-m);
  margin-bottom: 6px;
}

.section_container_light .accordion-item:first-child button.accordion {
  border-top: none;
}

.section_container_light button.accordion:after {
  font-family: "fontawesome";
  content: "\f0d7";
  font-size: 16px;
  float: right;
  color: var(--brand-blue);
  transition: transform var(--transition-base), color var(--transition-base);
}

.section_container_light button.accordion.is-open:after {
  content: "\f0d8";
  color: var(--brand-yellow);
}

.section_container_light button.accordion:hover {
  background-color: var(--blue-tint-08);
  border-left-color: var(--brand-yellow);
  color: var(--brand-blue);
}

.section_container_light button.accordion.is-open {
  background-color: var(--brand-blue);
  border-left-color: var(--brand-yellow);
  color: var(--color-white);
}

.section_container_light .accordion-content {
  background-color: var(--brand-light);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.section_container_light .accordion-text {
  padding: var(--space-l);
  color: var(--text-body-light);
}

/* --- Sidebar accordion overrides --- */
.column_2-side-bar button.accordion,
.column_1-duel-side-bar button.accordion,
.column_3-duel-side-bar button.accordion {
  padding: 11px 14px !important;
  font-size: 13px !important;
  font-weight: var(--weight-semibold) !important;
}

/* --- Dark: Accordion --- */
.section_container_dark button.accordion {
  width: 100%;
  font-family: var(--font-heading);
  background-color: rgba(255, 255, 255, 0.08);
  border: none;
  border-bottom: none;
  border-left: 4px solid transparent;
  outline: none;
  text-align: left;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-fine);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border-radius: var(--radius-m);
  margin-bottom: 6px;
}

.section_container_dark .accordion-item:first-child button.accordion {
  border-top: none;
}

.section_container_dark button.accordion:after {
  font-family: "fontawesome";
  content: "\f0d7";
  font-size: 16px;
  float: right;
  color: var(--brand-yellow);
  transition: transform var(--transition-base), color var(--transition-base);
}

.section_container_dark button.accordion.is-open:after {
  content: "\f0d8";
  color: var(--brand-blue-dark);
}

.section_container_dark button.accordion:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

.section_container_dark button.accordion.is-open {
  background-color: var(--brand-yellow);
  border-left-color: var(--color-white);
  color: var(--brand-blue-dark);
}

.section_container_dark .accordion-content {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

.section_container_dark .accordion-text {
  padding: var(--space-l);
  color: var(--text-body-dark);
}

/* ==========================================================================
   11c. SECTION THEMES — LINK BUTTONS / CTAs
   ========================================================================== */
/* Shared link button base — light sections: solid blue */
.section_container_light .links_container a,
.section_container_dark .links_container a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  transition: all var(--transition-slow);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  font-size: var(--btn-font-size);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.section_container_light .links_container a {
  background: var(--brand-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-m);
}

.section_container_dark .links_container a {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  box-shadow: var(--shadow-dark-m);
}

.section_container_light .links_container a::after,
.section_container_dark .links_container a::after {
  content: '→';
  margin-left: var(--space-xs);
  font-size: 1.1rem;
  transition: transform var(--transition-slow);
}

/* --- Light hover: switch to yellow --- */
.section_container_light .links_container a:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-yellow);
}

.section_container_light .links_container a:hover::after {
  transform: translateX(6px);
}

.section_container_light .links_container a:active {
  transform: translateY(0);
  background: var(--brand-yellow-dark);
}

/* --- Dark hover: switch to white --- */
.section_container_dark .links_container a:hover {
  background: var(--color-white);
  color: var(--brand-blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-dark-l);
}

.section_container_dark .links_container a:hover::after {
  transform: translateX(6px);
}

.section_container_dark .links_container a:active {
  transform: translateY(0);
  background: var(--brand-yellow-dark);
  color: var(--brand-blue-dark);
}

/* ==========================================================================
   11d. SECTION THEMES — PROFILE CARDS (MAIN)
   ========================================================================== */
/* --- Light --- */
.section_container_light .profile_wrapper a {
  background: var(--bg-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  border: var(--border-light-soft);
  box-shadow: var(--shadow-s);
  background-clip: padding-box;
  position: relative;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

/* Brand gradient border on hover */
.section_container_light .profile_wrapper a::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-yellow) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 0;
  pointer-events: none;
}

.section_container_light .profile_wrapper a:hover::before {
  opacity: 1;
}

.section_container_light .profile_wrapper a:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.section_container_light .profile_wrapper a img {
  height: var(--profile-img-height);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--brand-light);
  transition: transform 0.4s ease;
}

.section_container_light .profile_wrapper a:hover img {
  transform: scale(1.05);
}

.section_container_light .profile_content {
  padding: 20px 24px;
  text-align: center;
}

.section_container_light .title {
  font-size: 1.1875rem;
  color: var(--brand-blue);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-fine);
  font-family: var(--font-heading) !important;
  margin-bottom: 6px;
}

.section_container_light .position {
  color: var(--text-secondary-light);
  letter-spacing: 0.02em;
  font-family: var(--font-primary) !important;
  font-size: 13px;
  margin-bottom: 12px;
}

.section_container_light .view_profile {
  font-weight: var(--weight-semibold);
  font-size: 13px;
  font-family: var(--font-primary) !important;
  color: var(--brand-blue);
  display: inline-block;
  padding: 7px 16px;
  border: 1.5px solid var(--brand-blue);
  border-radius: var(--radius-pill);
  transition: all var(--transition-slow);
  background: transparent;
}

.section_container_light .view_profile:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-s);
}

@media (max-width: 1024px) {
  .section_container_light .profile_wrapper a img { height: var(--profile-img-height); }
  .section_container_light .title               { font-size: 1.0625rem; }
  .section_container_light .position            { font-size: 12px; }
  .section_container_light .view_profile        { font-size: 12px; padding: 6px 14px; }
}

@media (max-width: 768px) {
  .section_container_light .profile_wrapper a img { height: var(--profile-img-height-mobile); }
  .section_container_light .title               { font-size: 1rem; }
  .section_container_light .position            { font-size: 12px; }
  .section_container_light .view_profile        { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 480px) {
  .section_container_light .profile_wrapper a img { height: var(--profile-img-height-small); }
  .section_container_light .title               { font-size: 1rem; }
  .section_container_light .position            { font-size: 12px; }
  .section_container_light .view_profile        { font-size: 12px; padding: 6px 12px; }
}

/* --- Dark --- */
.section_container_dark .profile_wrapper a {
  background: var(--bg-card-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  border: var(--border-dark);
  box-shadow: var(--shadow-dark-m);
  position: relative;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

/* Gradient border effect — dark */
.section_container_dark .profile_wrapper a::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-yellow) 0%, var(--color-white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 0;
  pointer-events: none;
}

.section_container_dark .profile_wrapper a:hover::before {
  opacity: 1;
}

.section_container_dark .profile_wrapper a:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-dark-xl);
}

.section_container_dark .profile_wrapper a img {
  height: var(--profile-img-height);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--brand-blue-deep);
  transition: transform 0.4s ease;
}

.section_container_dark .profile_wrapper a:hover img {
  transform: scale(1.05);
}

.section_container_dark .profile_content {
  padding: 20px 24px;
  text-align: center;
  color: var(--text-body-dark);
}

.section_container_dark .title {
  font-size: 1.1875rem;
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-fine);
  font-family: var(--font-heading) !important;
  margin-bottom: 6px;
}

.section_container_dark .position {
  color: var(--text-secondary-dark);
  letter-spacing: 0.02em;
  font-family: var(--font-primary) !important;
  font-size: 13px;
  margin-bottom: 12px;
}

.section_container_dark .view_profile {
  font-weight: var(--weight-semibold);
  font-size: 13px;
  font-family: var(--font-primary) !important;
  color: var(--brand-yellow);
  display: inline-block;
  padding: 7px 16px;
  border: 1.5px solid var(--brand-yellow);
  border-radius: var(--radius-pill);
  transition: all var(--transition-slow);
  background: transparent;
}

.section_container_dark .view_profile:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
  box-shadow: var(--shadow-dark-m);
}

@media (max-width: 1024px) {
  .section_container_dark .profile_wrapper a img { height: var(--profile-img-height); }
  .section_container_dark .title               { font-size: 1.0625rem; }
  .section_container_dark .position            { font-size: 12px; }
  .section_container_dark .view_profile        { font-size: 12px; padding: 6px 14px; }
}

@media (max-width: 768px) {
  .section_container_dark .profile_wrapper a img { height: var(--profile-img-height-mobile); }
  .section_container_dark .title               { font-size: 1rem; }
  .section_container_dark .position            { font-size: 12px; }
  .section_container_dark .view_profile        { font-size: 12px; padding: 6px 12px; }
}

@media (max-width: 480px) {
  .section_container_dark .profile_wrapper a img { height: var(--profile-img-height-small); }
  .section_container_dark .title               { font-size: 1rem; }
  .section_container_dark .position            { font-size: 12px; }
  .section_container_dark .view_profile        { font-size: 12px; padding: 6px 12px; }
}

/* ==========================================================================
   11e. SECTION THEMES — PROFILE CARDS (SIDE)
   ========================================================================== */
/* --- Light --- */
.section_container_light .profile_wrapper-side a {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: 12px;
  background: var(--bg-light);
  padding: 12px 16px;
  border-radius: var(--radius-l);
  border: var(--border-light-soft);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow);
  text-decoration: none;
}

.section_container_light .profile_wrapper-side a:hover {
  transform: translateY(-3px);
  background: var(--brand-light);
  box-shadow: var(--shadow-m);
}

.section_container_light .profile_wrapper-side a img {
  width: var(--profile-side-img-size);
  height: var(--profile-side-img-size);
  object-fit: cover;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  /* Brand ring on avatar */
  box-shadow: 0 0 0 2.5px var(--brand-blue), 0 0 0 5px var(--yellow-tint-45);
}

.section_container_light .profile_wrapper-side a:hover img {
  transform: scale(1.08);
  box-shadow: 0 0 0 2.5px var(--brand-yellow), 0 0 0 5px var(--blue-tint-20);
}

.section_container_light .profile_content-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section_container_light .title-side {
  color: var(--brand-blue);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-fine);
  font-size: 1.0625rem;
  margin-bottom: 2px;
}

.section_container_light .position-side {
  color: var(--text-secondary-light);
  letter-spacing: 0.02em;
  font-family: var(--font-primary) !important;
  font-size: 13px;
  margin-bottom: 4px;
}

.section_container_light .view_profile-side {
  font-weight: var(--weight-semibold);
  font-size: 11px;
  font-family: var(--font-primary) !important;
  color: var(--brand-blue);
  display: inline-block;
  margin-top: 3px;
  padding: 3px 10px;
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-pill);
  transition: all var(--transition-slow);
}

.section_container_light .view_profile-side:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
}

@media (max-width: 1024px) {
  .section_container_light .title-side        { font-size: 1rem; }
  .section_container_light .position-side     { font-size: 12px; }
  .section_container_light .view_profile-side { font-size: 11px; padding: 3px 9px; }
}

@media (max-width: 768px) {
  .section_container_light .profile_wrapper-side a { padding: 10px 12px; gap: 12px; }
  .section_container_light .profile_wrapper-side a img { width: var(--profile-side-img-mobile); height: var(--profile-side-img-mobile); }
  .section_container_light .title-side        { font-size: 1rem; }
  .section_container_light .position-side     { font-size: 12px; }
  .section_container_light .view_profile-side { font-size: 11px; padding: 3px 9px; }
}

@media (max-width: 480px) {
  .section_container_light .profile_wrapper-side a { flex-direction: column; text-align: center; }
  .section_container_light .profile_wrapper-side a img { margin-bottom: var(--space-xs); }
}

/* --- Dark --- */
.section_container_dark .profile_wrapper-side a {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: 12px;
  background: var(--bg-card-dark);
  padding: 12px 16px;
  border-radius: var(--radius-l);
  border: var(--border-dark);
  box-shadow: var(--shadow-dark-s);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow);
  text-decoration: none;
}

.section_container_dark .profile_wrapper-side a:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover-dark);
  box-shadow: var(--shadow-dark-l);
}

.section_container_dark .profile_wrapper-side a img {
  width: var(--profile-side-img-size);
  height: var(--profile-side-img-size);
  object-fit: cover;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  box-shadow: 0 0 0 2.5px var(--brand-yellow), 0 0 0 5px rgba(255, 255, 255, 0.18);
}

.section_container_dark .profile_wrapper-side a:hover img {
  transform: scale(1.08);
}

.section_container_dark .profile_content-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section_container_dark .title-side {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-fine);
  font-size: 1.0625rem;
  margin-bottom: 2px;
}

.section_container_dark .position-side {
  color: var(--text-muted-dark);
  letter-spacing: 0.02em;
  font-family: var(--font-primary) !important;
  font-size: 13px;
  margin-bottom: 4px;
}

.section_container_dark .view_profile-side {
  font-weight: var(--weight-semibold);
  font-size: 11px;
  font-family: var(--font-primary) !important;
  color: var(--brand-yellow);
  display: inline-block;
  margin-top: 3px;
  padding: 3px 10px;
  border: 1px solid var(--brand-yellow);
  border-radius: var(--radius-pill);
  transition: all var(--transition-slow);
}

.section_container_dark .view_profile-side:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
}

@media (max-width: 1024px) {
  .section_container_dark .title-side        { font-size: 1rem; }
  .section_container_dark .position-side     { font-size: 12px; }
  .section_container_dark .view_profile-side { font-size: 11px; padding: 3px 9px; }
}

@media (max-width: 768px) {
  .section_container_dark .profile_wrapper-side a { padding: 10px 12px; gap: 12px; }
  .section_container_dark .profile_wrapper-side a img { width: var(--profile-side-img-mobile); height: var(--profile-side-img-mobile); }
  .section_container_dark .title-side        { font-size: 1rem; }
  .section_container_dark .position-side     { font-size: 12px; }
  .section_container_dark .view_profile-side { font-size: 11px; padding: 3px 9px; }
}

@media (max-width: 480px) {
  .section_container_dark .profile_wrapper-side a { flex-direction: column; text-align: center; }
  .section_container_dark .profile_wrapper-side a img { margin-bottom: var(--space-xs); }
}

/* ==========================================================================
   11f. SECTION THEMES — RELATED CARDS (MAIN)
   ========================================================================== */
/* --- Light --- */
.section_container_light .related_wrapper a {
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  border: var(--border-light-soft);
  box-shadow: var(--shadow-s);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.section_container_light .related_wrapper a::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-yellow) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 0;
  pointer-events: none;
}

.section_container_light .related_wrapper a:hover::before {
  opacity: 1;
}

.section_container_light .related_wrapper a:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-l);
}

.section_container_light .related_wrapper a img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  background: var(--brand-light);
  transition: transform 0.35s ease;
}

.section_container_light .related_wrapper a:hover img {
  transform: scale(1.05);
}

.section_container_light .related_content {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.section_container_light .related_title {
  font-size: 1.0625rem;
  color: var(--brand-blue);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading) !important;
  margin-bottom: var(--space-xs);
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  transition: color var(--transition-base);
}

.section_container_light .related_wrapper a:hover .related_title {
  color: var(--brand-blue-dark);
}

.section_container_light .related_read-more {
  margin-top: auto;
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  font-family: var(--font-primary) !important;
  color: var(--brand-blue);
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--brand-yellow);
  align-self: flex-start;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.section_container_light .related_read-more:hover {
  color: var(--brand-blue-dark);
  border-bottom-color: var(--brand-blue-dark);
}

/* --- Dark --- */
.section_container_dark .related_wrapper a {
  display: flex;
  flex-direction: column;
  background: var(--bg-card-dark-alt);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  border: var(--border-dark);
  box-shadow: var(--shadow-dark-s);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.section_container_dark .related_wrapper a::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--brand-yellow) 0%, var(--color-white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-slow);
  z-index: 0;
  pointer-events: none;
}

.section_container_dark .related_wrapper a:hover::before {
  opacity: 1;
}

.section_container_dark .related_wrapper a:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-dark-l);
}

.section_container_dark .related_wrapper a img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  background: var(--brand-blue-deep);
  transition: transform 0.35s ease;
}

.section_container_dark .related_wrapper a:hover img {
  transform: scale(1.05);
}

.section_container_dark .related_content {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.section_container_dark .related_title {
  font-size: 1.0625rem;
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading) !important;
  margin-bottom: var(--space-xs);
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  transition: color var(--transition-base);
}

.section_container_dark .related_wrapper a:hover .related_title {
  color: var(--brand-yellow);
}

.section_container_dark .related_read-more {
  margin-top: auto;
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  font-family: var(--font-primary) !important;
  color: var(--brand-yellow);
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--yellow-tint-45);
  align-self: flex-start;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.section_container_dark .related_read-more:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* ==========================================================================
   11g. SECTION THEMES — RELATED CARDS (SIDE)
   ========================================================================== */
/* --- Light --- */
.section_container_light .related_wrapper-side a {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: 14px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: var(--bg-light);
  border: var(--border-light-soft);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}

.section_container_light .related_wrapper-side a:hover {
  background: var(--brand-light);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

.section_container_light .related_wrapper-side a img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--brand-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  box-shadow: 0 0 0 2px var(--brand-blue);
}

.section_container_light .related_wrapper-side a:hover img {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--brand-yellow);
}

.section_container_light h4.related_title-side {
  font-size: 0.95rem;
  color: var(--brand-blue);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading) !important;
  margin: 0;
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  text-transform: none;
  transition: color var(--transition-base);
}

.section_container_light .related_wrapper-side a:hover h4.related_title-side {
  color: var(--brand-blue-dark);
}

.section_container_light p.related_read-more-side {
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  font-family: var(--font-primary) !important;
  color: var(--brand-blue);
  margin: 4px 0 0 0;
  transition: color var(--transition-base);
}

.section_container_light .related_wrapper-side a:hover p.related_read-more-side {
  color: var(--brand-blue-dark);
}

@media (max-width: 480px) {
  .section_container_light .related_wrapper-side a {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .section_container_light .related_wrapper-side a img {
    width: 100%;
    height: auto;
    max-height: 180px;
    border-radius: var(--radius-xl);
  }
}

/* --- Dark --- */
.section_container_dark .related_wrapper-side a {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-bottom: 14px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: var(--bg-card-dark-alt);
  border: var(--border-dark);
  text-decoration: none;
  box-shadow: var(--shadow-dark-s);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}

.section_container_dark .related_wrapper-side a:hover {
  background: var(--bg-card-hover-dark);
  box-shadow: var(--shadow-dark-l);
  transform: translateY(-2px);
}

.section_container_dark .related_wrapper-side a img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  background: var(--brand-blue-deep);
  transition: transform var(--transition-slow);
  box-shadow: 0 0 0 2px var(--brand-yellow);
}

.section_container_dark .related_wrapper-side a:hover img {
  transform: scale(1.08);
}

.section_container_dark h4.related_title-side {
  font-size: 0.95rem;
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading) !important;
  margin: 0;
  line-height: var(--leading-fine);
  letter-spacing: var(--tracking-heading);
  text-transform: none;
  transition: color var(--transition-base);
}

.section_container_dark .related_wrapper-side a:hover h4.related_title-side {
  color: var(--brand-yellow);
}

.section_container_dark p.related_read-more-side {
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  font-family: var(--font-primary) !important;
  color: var(--brand-yellow);
  margin: 4px 0 0 0;
  transition: color var(--transition-base);
}

.section_container_dark .related_wrapper-side a:hover p.related_read-more-side {
  color: var(--color-white);
}

@media (max-width: 480px) {
  .section_container_dark .related_wrapper-side a {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .section_container_dark .related_wrapper-side a img {
    width: 100%;
    height: auto;
    max-height: 180px;
    border-radius: var(--radius-xl);
  }
}

/* ==========================================================================
   12a. GRID WRAPPERS — PROFILE
   ========================================================================== */
.profile_wrapper-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

@media only screen and (max-width: 980px) {
  .profile_wrapper-main { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 480px) {
  .profile_wrapper-main { grid-template-columns: 1fr; }
}

.profile_wrapper-center {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

@media only screen and (max-width: 980px) {
  .profile_wrapper-center { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 480px) {
  .profile_wrapper-center { grid-template-columns: 1fr; }
}

.profile_wrapper-main-side-img {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

@media only screen and (max-width: 980px) {
  .profile_wrapper-main-side-img { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 480px) {
  .profile_wrapper-main-side-img { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12b. GRID WRAPPERS — RELATED
   ========================================================================== */
.related_wrapper-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
}

.related_wrapper-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
}

.related_wrapper-main-side-img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
}

@media (min-width: 1400px) {
  .related_wrapper-main            { grid-template-columns: repeat(4, 1fr); }
  .related_wrapper-center          { grid-template-columns: repeat(3, 1fr); }
  .related_wrapper-main-side-img   { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   12c. GRID WRAPPERS — LINKS CONTAINERS
   ========================================================================== */
.links_container-main,
.links_container_center,
.links_container-main-side-img {
  display: inline-block;
}

.links_container_side {
  display: grid;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
}

.links_container-main            { grid-template-columns: repeat(4, 1fr); }
.links_container_center,
.links_container-main-side-img   { grid-template-columns: repeat(3, 1fr); }
.links_container_side            { grid-template-columns: 1fr; }

@media (max-width: 980px) {
  .links_container-main,
  .links_container_center,
  .links_container-main-side-img { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .links_container-main,
  .links_container_center,
  .links_container-main-side-img { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. GALLERY
   ========================================================================== */
/* --- Image Container --- */
.image-container-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-gallery img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.shelf {
  width: 12%;
  height: 55vh;
  transition: all var(--transition-xslow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.large-width {
  width: 100%;
  object-fit: fill;
  transition: all var(--transition-xslow);
}

.small-width {
  width: 10%;
  transition: all var(--transition-xslow);
}

@media only screen and (max-width: 600px) {
  .image-container-gallery  { display: block; }
  .book-gallery             { height: auto; display: block; }
  .shelf                    { width: 100%; height: 3vh; }
  .large-width              { width: 100%; height: 271px; object-fit: fill; transition: all var(--transition-xslow); }
}

/* --- Slick Dots --- */
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 16px !important;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .3;
  color: var(--brand-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
  color: var(--brand-yellow);
}

.section_container_dark .slick-dots li button:before {
  color: var(--color-white);
}

.section_container_dark .slick-dots li.slick-active button:before {
  color: var(--brand-yellow);
}

/* --- Gallery Grid: Center (4-col) --- */
.gallery-page-container-center ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: var(--gap-m);
  list-style-type: none;
  padding: 0;
}

@media only screen and (max-width: 980px) {
  .gallery-page-container-center ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.gallery-page-container-center ul li a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
  background: var(--brand-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.gallery-page-container-center ul li img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-m);
}

/* --- Gallery Grid: Right (3-col) --- */
.gallery-page-container-right ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--gap-s);
  list-style-type: none;
  padding: 0;
}

.gallery-page-container-right ul li img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
  background: var(--brand-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.gallery-page-container-right ul li img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-m);
}

.gallery-page-container-right ul li a img {
  width: 100%;
}

/* --- Gallery Carousel --- */
.gallery-page-container-right-carousel {
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.gallery-page-container-right-carousel ul {
  display: flex;
  justify-content: center;
  gap: var(--gap-m);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery-page-container-right-carousel ul li {
  box-sizing: border-box;
  position: relative;
}

.gallery-page-container-right-carousel ul li a img {
  width: 100%;
}

.gallery-page-container-right-carousel ul li img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
  background: var(--brand-light);
  transition: transform var(--transition-slow);
}

.gallery-page-container-right-carousel ul li img:hover {
  transform: scale(1.05);
}

.gallery-page-container-right-carousel .slick-slide {
  margin-left: 5px;
  margin-right: 5px;
}

/* --- Masonry Gallery --- */
.gallery-page-container ul {
  column-count: 4;
  column-gap: var(--gap-m);
  list-style: none;
  padding: 0;
}

@media only screen and (max-width: 980px) {
  .gallery-page-container ul {
    column-count: 3;
  }
}

.gallery-page-container ul li {
  break-inside: avoid;
  margin-bottom: var(--gap-m);
}

.gallery-page-container ul li a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
  background: var(--brand-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.gallery-page-container ul li img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-m);
}

/* ==========================================================================
   14. SINGLE POST & FACULTY / STAFF TEMPLATES
   ========================================================================== */

/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */
.single-post__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.single-post__cat-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.single-post__cat-tag:hover {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

.single-post__byline {
  font-family: var(--font-primary);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   BLOG SINGLE — LAYOUT
   ========================================================================== */
.single-post__layout {
  align-items: start;
}

.single-post__article {
  margin-bottom: 48px;
}

.single-post__content {
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text-body-light);
}

.single-post__content h2,
.single-post__content h3,
.single-post__content h4 {
  color: var(--brand-blue);
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  line-height: var(--leading-fine);
}

.single-post__content p {
  margin-bottom: 1.2em;
}

.single-post__content a {
  color: var(--brand-blue);
  font-weight: var(--weight-medium);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--yellow-tint-45);
  transition: color var(--transition-fast), box-shadow var(--transition-fast);
}

.single-post__content a:hover {
  color: var(--brand-blue-dark);
  box-shadow: inset 0 -2px 0 var(--brand-yellow);
}

.single-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  margin: var(--space-l) 0;
}

/* Blockquotes */
.single-post__content blockquote {
  border-left: 4px solid var(--brand-yellow);
  margin: var(--space-xl) 0;
  padding: var(--space-l) var(--space-xl);
  background: var(--brand-light);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-standard);
  color: var(--brand-blue-dark);
}

/* ==========================================================================
   BLOG SINGLE — GALLERY SECTION
   ========================================================================== */
.single-post__gallery-section {
  margin-bottom: 48px;
}

.single-post__gallery-section h2 {
  margin-bottom: var(--space-xl) !important;
}

.single-post__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-m);
}

.single-post__gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  aspect-ratio: 4 / 3;
  background: var(--brand-light);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.single-post__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.single-post__gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-l);
}

.single-post__gallery-item:hover img {
  transform: scale(1.07);
}

.single-post__gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 71, 125, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-slow);
  color: var(--brand-yellow);
}

.single-post__gallery-item:hover .single-post__gallery-overlay {
  opacity: 1;
}

@media (max-width: 600px) {
  .single-post__gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 360px) {
  .single-post__gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BLOG SINGLE — POST LINKS / RESOURCES
   ========================================================================== */
.single-post__links-section {
  margin-bottom: 48px;
  padding: var(--space-xl);
  background: var(--brand-light);
  border-radius: var(--radius-xl);
  border: var(--border-light);
}

.single-post__links-heading {
  margin-bottom: var(--space-l) !important;
}

.single-post__links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Shared button base */
.single-post__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-m);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow), color var(--transition-slow);
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FILE download — filled blue */
.single-post__link-btn--file {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: var(--shadow-s);
}

.single-post__link-btn--file:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow);
}

/* EXTERNAL link — outlined blue */
.single-post__link-btn--url {
  background: transparent;
  color: var(--brand-blue);
  border: 1.5px solid var(--brand-blue);
}

.single-post__link-btn--url:hover {
  background: var(--brand-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.single-post__link-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.single-post__link-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-post__link-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  flex-shrink: 0;
}

.single-post__link-btn--file:hover .single-post__link-badge {
  background: rgba(30, 70, 129, 0.18);
  color: var(--brand-blue-dark);
}

.single-post__link-arrow {
  margin-left: auto;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-slow);
}

.single-post__link-btn--url:hover .single-post__link-arrow {
  transform: translateX(4px) translateY(-4px);
}

/* ==========================================================================
   BLOG SINGLE — TAGS
   ========================================================================== */
.single-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.single-post__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--blue-tint-08);
  border: 1px solid var(--blue-tint-20);
  color: var(--brand-blue);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.single-post__tag:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
}

/* ==========================================================================
   BLOG SINGLE — AUTHOR CARD
   ========================================================================== */
.single-post__author-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
  padding: var(--space-xl);
  background: var(--brand-light);
  border-radius: var(--radius-xl);
  border: var(--border-light);
  margin-bottom: 40px;
  box-shadow: var(--shadow-xs);
}

.single-post__author-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--brand-blue), 0 0 0 6px var(--yellow-tint-45);
}

.single-post__author-info {
  flex: 1;
}

.single-post__author-label {
  font-size: 11px;
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary-light);
  margin-bottom: 4px;
}

.single-post__author-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--brand-blue);
  margin-bottom: 6px;
}

.single-post__author-bio {
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--text-secondary-light);
  line-height: var(--leading-standard);
}

@media (max-width: 480px) {
  .single-post__author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   BLOG SINGLE — POST NAVIGATION
   ========================================================================== */
.single-post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  margin-top: 8px;
}

.single-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  background: var(--brand-light);
  border: var(--border-light);
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow), background var(--transition-slow);
  min-width: 0;
}

.single-post__nav-link--next {
  text-align: right;
}

.single-post__nav-link:hover {
  transform: translateY(-3px);
  background: var(--color-white);
  box-shadow: var(--shadow-m);
  border-color: var(--brand-yellow);
}

.single-post__nav-dir {
  font-size: 11px;
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--brand-blue);
}

.single-post__nav-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .single-post__nav {
    grid-template-columns: 1fr;
  }
  .single-post__nav-link--next {
    text-align: left;
  }
}

/* ==========================================================================
   BLOG SINGLE — SIDEBAR
   ========================================================================== */
.single-post__sidebar-inner {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

.single-post__sidebar-widget {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

.single-post__sidebar-title {
  font-family: var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--brand-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-label) !important;
  margin-bottom: var(--space-l) !important;
  padding-bottom: var(--space-s) !important;
  border-bottom: 2px solid var(--brand-yellow) !important;
}

/* Recent posts card */
.sidebar-post-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--blue-tint-12);
  text-decoration: none !important;
  transition: opacity var(--transition-fast);
}

.sidebar-post-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-post-card:hover {
  opacity: 0.85;
}

.sidebar-post-card__thumb {
  width: 68px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--brand-light);
}

.sidebar-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sidebar-post-card:hover .sidebar-post-card__thumb img {
  transform: scale(1.08);
}

.sidebar-post-card__body {
  flex: 1;
  min-width: 0;
}

.sidebar-post-card__date {
  font-size: 11px;
  font-family: var(--font-primary);
  color: var(--text-secondary-light);
  margin-bottom: 3px;
}

.sidebar-post-card__title {
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--brand-blue) !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-post-card__cta {
  font-size: 11px;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
  transition: letter-spacing 0.2s ease, color var(--transition-fast);
}

.sidebar-post-card:hover .sidebar-post-card__cta {
  letter-spacing: 0.5px;
  color: var(--brand-blue);
}

.single-post__no-posts {
  font-size: 13px;
  color: var(--text-secondary-light);
  font-family: var(--font-primary);
}

/* Categories list */
.single-post__sidebar-cats {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.single-post__sidebar-cats li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  color: var(--text-body-light);
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.single-post__sidebar-cats li a:hover {
  background: var(--brand-light);
  color: var(--brand-blue);
}

.single-post__sidebar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

@media (max-width: 980px) {
  .single-post__sidebar-inner {
    position: static;
  }
}

/* ==========================================================================
   FACULTY & STAFF — LAYOUT
   ========================================================================== */
.staff-profile__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2xl);
  align-items: start;
  width: var(--row-width);
  max-width: var(--row-wide);
  margin: auto;
}

@media (max-width: 980px) {
  .staff-profile__layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FACULTY & STAFF — SIDEBAR (photo + contact)
   ========================================================================== */
.staff-profile__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  position: sticky;
  top: 30px;
}

@media (max-width: 980px) {
  .staff-profile__sidebar {
    position: static;
  }
}

/* Photo */
.staff-profile__photo-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--brand-light);
  aspect-ratio: 3 / 4;
}

.staff-profile__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
  transition: transform 0.45s ease;
}

.staff-profile__photo-wrap:hover .staff-profile__photo {
  transform: scale(1.03);
}

/* Placeholder when no featured image */
.staff-profile__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-tint-12) 0%, var(--yellow-tint-25) 100%);
  color: var(--brand-blue);
  border-radius: var(--radius-xl);
  aspect-ratio: 3 / 4;
}

/* Position badge overlaid on photo bottom */
.staff-profile__position-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(22, 48, 90, 0.92) 0%, rgba(22, 48, 90, 0) 100%);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Contact card */
.staff-profile__contact-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

.staff-profile__contact-heading {
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--brand-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-label) !important;
  margin-bottom: var(--space-l) !important;
  padding-bottom: var(--space-s) !important;
  border-bottom: 2px solid var(--brand-yellow) !important;
}

.staff-profile__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--blue-tint-08);
}

.staff-profile__contact-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.staff-profile__contact-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-m);
  background: var(--yellow-tint-25);
  color: var(--brand-blue);
  margin-top: 2px;
}

.staff-profile__contact-label {
  font-size: 11px !important;
  font-family: var(--font-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-label) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--text-secondary-light) !important;
  margin-bottom: 3px !important;
}

.staff-profile__contact-value {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--brand-blue-dark);
  text-decoration: none !important;
  word-break: break-word;
  transition: color var(--transition-fast);
}

.staff-profile__contact-value:hover {
  color: var(--brand-blue);
}

/* Department tags */
.staff-profile__team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.staff-profile__team-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-tint-08);
  border: 1px solid var(--blue-tint-20);
  color: var(--brand-blue);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.staff-profile__team-tag:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
}

/* Back link */
.staff-profile__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue);
  text-decoration: none !important;
  padding: 8px 0;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.staff-profile__back-link:hover {
  color: var(--brand-blue-dark);
  gap: 2px;
}

/* ==========================================================================
   FACULTY & STAFF — MAIN CONTENT
   ========================================================================== */
.staff-profile__main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

/* Name + role strip */
.staff-profile__name-strip {
  gap: 14px;
  padding-bottom: var(--space-l);
  border-bottom: 2px solid var(--blue-tint-12);
}

.staff-profile__name {
  font-family: var(--font-heading) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--brand-blue) !important;
  text-transform: none !important;
  letter-spacing: var(--tracking-heading) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.staff-profile__role-chip {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--shadow-s);
  margin-top: 13px;
}

/* Biography section */
.staff-profile__bio-wrap {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

/* Section label shared pattern */
.staff-profile__section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-label) !important;
  color: var(--brand-blue) !important;
  margin-bottom: var(--space-l) !important;
  padding: 6px 14px !important;
  background: var(--brand-light) !important;
  border: 1px solid var(--blue-tint-12) !important;
  border-radius: 999px !important;
}

.staff-profile__section-icon {
  display: flex;
  align-items: center;
}

/* Biography prose */
.staff-profile__bio {
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text-body-light);
}

.staff-profile__bio p {
  margin-bottom: 1.2em;
}

.staff-profile__bio p:last-child {
  margin-bottom: 0;
}

.staff-profile__bio a,
.staff-profile__extra-content a {
  color: var(--brand-blue);
  font-weight: var(--weight-medium);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--yellow-tint-45);
  transition: color var(--transition-fast), box-shadow var(--transition-fast);
}

.staff-profile__bio a:hover,
.staff-profile__extra-content a:hover {
  color: var(--brand-blue-dark);
  box-shadow: inset 0 -2px 0 var(--brand-yellow);
}

.staff-profile__bio img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

/* Extra WP content */
.staff-profile__extra-content {
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--text-body-light);
}

/* Info chips — compact repeat of email / phone for mobile */
.staff-profile__info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.staff-profile__info-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow), color var(--transition-slow);
}

.staff-profile__info-chip--email {
  background: var(--blue-tint-08);
  border: 1.5px solid var(--blue-tint-20);
  color: var(--brand-blue);
}

.staff-profile__info-chip--email:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.staff-profile__info-chip--phone {
  background: var(--yellow-tint-25);
  border: 1.5px solid var(--yellow-tint-45);
  color: var(--brand-blue-dark);
}

.staff-profile__info-chip--phone:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS — FACULTY & STAFF
   ========================================================================== */
@media (max-width: 980px) {
  .staff-profile__photo-wrap {
    max-width: 340px;
    margin: 0 auto;
  }
  .staff-profile__name-strip {
    justify-content: center;
    text-align: center;
  }
  .staff-profile__name {
    text-align: center !important;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .staff-profile__bio-wrap {
    padding: var(--space-l);
  }
  .staff-profile__info-strip {
    flex-direction: column;
  }
  .staff-profile__info-chip {
    width: 100%;
    justify-content: center;
  }
}

.staff-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.staff-related-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--blue-tint-08);
}

.staff-related-list li:last-child {
  border-bottom: none;
}

.staff-related-list li a {
  text-decoration: none;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue);
  transition: color 0.2s ease;
}

.staff-related-list li a:hover {
  color: var(--brand-blue-dark);
}

/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .category-grid { grid-template-columns: 1fr; }
}

.category-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  border: var(--border-light-soft);
  box-shadow: var(--shadow-s);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-l);
  border-color: var(--brand-yellow);
}

.category-card__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--brand-light);
}

.category-card__content {
  padding: 18px;
}

.category-card__content h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-fine);
  text-transform: none;
}

.category-card__content p {
  font-size: 14px;
  color: var(--text-secondary-light);
  line-height: var(--leading-standard);
}

/* ==========================================================================
   POST DATE / HERO META
   ========================================================================== */
.single-post__date {
  margin-top: 10px;
  font-size: 15px;
  color: var(--brand-yellow);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   GALLERY FIX
   ========================================================================== */
.single-post__gallery-section .gallery ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none;
  padding: 0;
}

.single-post__gallery-section .gallery ul li img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--brand-light);
}

@media (max-width: 600px) {
  .single-post__gallery-section .gallery ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   DOWNLOAD BUTTONS
   ========================================================================== */
.download-btn {
  display: block;
  padding: 12px 14px;
  background: var(--brand-blue);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-m);
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--transition-slow), color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}

.download-btn:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow);
}

.download-btn--external {
  background: var(--brand-blue-dark);
}

.download-btn--external:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

/* ==========================================================================
   SIDEBAR POSTS (compact variant)
   ========================================================================== */
.sidebar-post-thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--brand-light);
}

.sidebar-date {
  font-size: 12px;
  color: var(--text-secondary-light);
  margin-bottom: 5px;
  display: block;
}

.sidebar-post-content {
  color: var(--brand-blue);
}

.sidebar-post-content strong {
  display: block;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-fine);
}

span.sidebar-read {
  margin-top: 5px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--brand-blue-dark);
}

/* ==========================================================================
   NEWSLETTERS
   ========================================================================== */
.newsletters-main-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

@media only screen and (max-width: 850px) {
  .newsletters-main-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 450px) {
  .newsletters-main-container {
    grid-template-columns: 1fr;
  }
}

.newsletters-main-container a {
  border-radius: var(--btn-radius);
  padding: 0.95rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: all var(--transition-slow);
  background: var(--brand-blue);
  color: #fff !important;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.newsletters-main-container a:hover {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-yellow);
}

.single-post__gallery-heading {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--brand-blue) !important;
  text-transform: none !important;
  letter-spacing: var(--tracking-heading) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-post__content {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

.single-post__gallery-section {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-s);
  border: var(--border-light);
}

img.attachment-full.size-full.wp-post-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
}

section.tribe-common-l-container.tribe-events-l-container {
  padding: 0px !important;
}

/* ==========================================================================
   15. SCROLL ANIMATIONS
   ========================================================================== */
.fade-slide-right {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.fade-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-slide-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.fade-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-slide-right,
  .fade-slide-left,
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   16. GLOBAL FOCUS STATES (accessibility)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.section_container_dark a:focus-visible,
.section_container_dark button:focus-visible,
.banner-container a:focus-visible,
.breadcrumbs a:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 3px;
}

/* Skip link, if the theme outputs one */
.skip-link:focus {
  background: var(--brand-yellow);
  color: var(--brand-blue-dark);
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-m) 0;
  z-index: 999;
}

/* ==========================================================================
   17. OPTIONAL — ALTERNATING LIGHT SECTIONS
   --------------------------------------------------------------------------
   The tinted background (#EFF1F7) is applied via .section_container_light-alt.
   If you would rather have every second light section tint automatically and
   your sections are direct siblings, uncomment the block below.
   ==========================================================================
.section_container_light:nth-of-type(even) {
  background-color: var(--bg-light-alt) !important;
}
   ========================================================================== */

/* ==========================================================================
   18. VERTICAL RHYTHM, CAPTIONS & DIAGONAL BANNER CUT
   --------------------------------------------------------------------------
   Spacing pass over the section builder output. Heading rules are scoped with
   :not([class]) so they only hit builder-output headings (which carry no
   class) and never card titles like .related_title / .related_title-side.
   ========================================================================== */

/* --- Fluid section padding + comfortable gutters on small screens --- */
@media (max-width: 980px) {
  :root { --section-padding: 60px; }
}

@media (max-width: 600px) {
  :root {
    --section-padding: 48px;
    --row-width: 88%;
  }
}

@media (max-width: 400px) {
  :root { --row-width: 90%; }
}

/* --- Heading rhythm (builder headings only) --- */
.section_container h3:not([class]) {
  margin-bottom: 10px;
}

.section_container h2:not([class]) {
  margin-bottom: 6px !important;
}

.section_container h4:not([class]) {
  margin-top: var(--space-s);
  margin-bottom: 10px;
}

/* --- H5 "caption" — quiet supporting line with a yellow accent bar --- */
.section_container h5:not([class]) {
  font-family: var(--font-primary);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-standard);
  letter-spacing: 0;
  text-transform: none;
  border-left: 3px solid var(--brand-yellow);
  padding: 2px 0 2px 14px;
  margin-bottom: var(--space-l);
  max-width: var(--measure-m);
}

.section_container_light h5:not([class]) {
  color: var(--text-secondary-light);
}

.section_container_dark h5:not([class]) {
  color: var(--text-secondary-dark);
}

@media (max-width: 600px) {
  .section_container h5:not([class]) {
    padding-left: 12px;
  }
}

/* --- Block-level component rhythm ---
   One consistent gap between every builder block. .margin_bottom (15px) is
   deliberately overridden here so blocks breathe evenly. */
.row_structure > .text-area,
.row_structure > .accordion-container,
.row_structure > .gallery,
.row_structure > .links_container,
.row_structure > .profile_wrapper,
.row_structure > .related_wrapper,
.column_1-side-img > .text-area,
.column_1-side-img > .accordion-container,
.column_1-side-img > .links_container,
.column_1-duel-side-bar > *,
.column_2-duel-side-bar > *,
.column_3-duel-side-bar > *,
.column_1-side-bar > *,
.column_2-side-bar > * {
  margin-bottom: var(--space-2xl);
}

.row_structure > *:last-child,
.column_1-side-img > *:last-child,
.column_1-duel-side-bar > *:last-child,
.column_2-duel-side-bar > *:last-child,
.column_3-duel-side-bar > *:last-child,
.column_1-side-bar > *:last-child,
.column_2-side-bar > *:last-child {
  margin-bottom: 0;
}

/* Sidebar columns are narrower — a slightly tighter gap reads better */
.column_1-duel-side-bar > *,
.column_3-duel-side-bar > *,
.column_1-side-bar > *,
.column_2-side-bar > * {
  margin-bottom: var(--space-xl);
}

/* Grid wrappers already carry their own bottom gap — normalise it */
.profile_wrapper-main,
.profile_wrapper-center,
.profile_wrapper-main-side-img,
.related_wrapper-main,
.related_wrapper-center,
.related_wrapper-main-side-img {
  margin-bottom: var(--space-2xl);
}

.profile_wrapper-side a:last-child,
.related_wrapper-side a:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .row_structure > .text-area,
  .row_structure > .accordion-container,
  .row_structure > .gallery,
  .row_structure > .links_container,
  .row_structure > .profile_wrapper,
  .row_structure > .related_wrapper,
  .column_1-side-img > .text-area,
  .column_1-side-img > .accordion-container,
  .column_1-side-img > .links_container,
  .profile_wrapper-main,
  .profile_wrapper-center,
  .profile_wrapper-main-side-img,
  .related_wrapper-main,
  .related_wrapper-center,
  .related_wrapper-main-side-img {
    margin-bottom: var(--space-xl);
  }
}

/* --- Links / downloads containers ---
   These were display:inline-block with grid-template-columns that never
   applied, so the buttons sat flush against each other. Flex + gap gives
   them real spacing without changing the markup. */
.links_container-main,
.links_container_center,
.links_container-main-side-img {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gap-m);
}

.links_container_side {
  gap: var(--gap-s);
}

/* Full-width, evenly stacked buttons once space gets tight */
@media (max-width: 600px) {
  .links_container-main,
  .links_container_center,
  .links_container-main-side-img {
    gap: var(--gap-s);
  }
  .section_container_light .links_container a,
  .section_container_dark .links_container a {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
  }
}

/* Sidebar link buttons are narrower — scale the padding down */
.column_1-duel-side-bar .links_container a,
.column_3-duel-side-bar .links_container a,
.column_2-side-bar .links_container a,
.links_container_side a {
  padding: 0.8rem 1.15rem;
  font-size: 0.9375rem;
}

/* --- Accordion group spacing --- */
.accordion-container .accordion-item:last-child button.accordion {
  margin-bottom: 0;
}

.accordion-item {
  margin-bottom: 6px;
}

.accordion-item:last-child {
  margin-bottom: 0;
}

/* --- Masonry gallery: one more step down on phones --- */
@media only screen and (max-width: 600px) {
  .gallery-page-container ul {
    column-count: 2;
  }
  .gallery-page-container-center ul {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-page-container-right ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 380px) {
  .gallery-page-container ul {
    column-count: 1;
  }
}

/* --- Side-image column: keep text and image visually aligned --- */
.column_1-side-img {
  padding-right: var(--space-s);
}

@media only screen and (max-width: 980px) {
  .column_1-side-img {
    padding-right: 0;
  }
  .row_structure_side-img {
    grid-gap: var(--space-xl);
  }
}

/* ==========================================================================
   "VIEW PROFILE" BUTTONS — ONE FIXED SIZE EVERYWHERE
   These are divs sized by their own text/padding, and other stylesheets in
   the theme also touch them, so they were rendering at slightly different
   sizes card to card. Locking height, min-width, font-size and line-height
   makes every instance identical in both light and dark sections.
   ========================================================================== */
.section_container_light .view_profile,
.section_container_dark .view_profile,
.section_container_light .view_profile-side,
.section_container_dark .view_profile-side {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  height: 40px !important;
  min-width: 136px !important;
  padding: 0 20px !important;
  margin-top: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: nowrap;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: var(--radius-pill) !important;
  vertical-align: middle;
}

/* Side cards sit in a narrower column — one step down, still uniform */
.section_container_light .view_profile-side,
.section_container_dark .view_profile-side {
  height: 34px !important;
  min-width: 118px !important;
  padding: 0 16px !important;
  font-size: 0.75rem !important;
  margin-top: 4px !important;
}

@media (max-width: 480px) {
  .section_container_light .view_profile,
  .section_container_dark .view_profile {
    height: 38px !important;
    min-width: 128px !important;
    font-size: 0.8125rem !important;
  }
}

/* --- overflow:hidden on .section_container stops the slide-in animations
   causing horizontal scroll, but it also breaks position:sticky for any
   sidebar inside. These two templates get their overflow back. --- */
.section_container:has(.single-post__sidebar-inner),
.section_container:has(.staff-profile__sidebar) {
  overflow: visible;
}

/* ==========================================================================
   FULL-WIDTH IMAGE — DIAGONAL CUT
   The image is clipped on its lower edge and the following section is pulled
   up by the same amount, so the section's own background fills the notch and
   the diagonal reads as a clean edge rather than a gap.
   ========================================================================== */
.full_width-img {
  line-height: 0;
}

.full_width-img img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  margin-bottom: 0;
  /* clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 87%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 87%); */
}

.full_width-img {
    line-height: 0;
    background: white;
}

@media (max-width: 1024px) {
  .full_width-img img { height: 400px; }
}

@media (max-width: 768px) {
  .full_width-img img { height: 300px; }
}

@media (max-width: 480px) {
  .full_width-img img { height: 250px; }
}