/* =========================
   FILE: style.css
========================= */

/*
Theme Name: School of Rock and Media Ltd
Author: Venture Solutions
Version: 2.0
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  Root Variables
   2.  Reset & Base
   3.  Layout — Section & Row Containers
   4.  Responsive Hide Utilities
   5.  Full Width Image
   6.  Tables (TablePress)
   7.  Banner / Hero
   8.  Breadcrumbs
   9.  Contact Page
  10.  Gravity Forms
  11.  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
        12a. Profile Wrappers
        12b. Related Wrappers
        12c. Links Containers
  13.  Gallery
  14.  Scroll Animations
   ========================================================================== */


/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */

:root {

  /* --- Brand Colours --- */
  --color-primary:          #797ADF;   /* Primary heading / accent colour */
  --color-primary-alt:      #A756F7;   /* Secondary accent / highlights */
  --color-accent:           #ef4135;   /* Bright red — CTA / Accordion */
  --color-accent-dark:      #ad171a;   /* Dark red — hover / emphasis */
  --color-success:          #9dd070;   /* Green — confirmation / success */
  --color-text-dark:        #111827;   /* Dark text / dark mode base */
  --color-white:            #ffffff;

  /* --- UI / Site Colours --- */
  --color-brand-dark:       #797ADF;   /* Primary dark blue used across UI */
  --color-brand-navy:       #111827;   /* Table header, contact h3 */
  --color-brand-navy-alt:   #273aa0;   /* Light section h2 */
  --color-brand-hover:      #5b5cc4;   /* Deep hover state */
  --color-link-blue:        #A756F7;   /* General link / highlight */
  --color-highlight-yellow: #F5DC07;   /* H2 span highlight background */
  --color-overlay-dark:     rgba(0, 0, 0, 0.5);              /* Banner overlay */
  --color-overlay-blue:     rgba(17, 24, 39, 0.72);          /* Dark section image overlay */
  --color-overlay-white:    rgba(255, 255, 255, 0.5);        /* Light section image overlay */

  /* --- Section Background Colours --- */
  --bg-light:               #ffffff;
  --bg-dark:                #111827;
  --bg-breadcrumb:          #797ADF;
  --bg-form-input:          #f4f4f4;
  --bg-card-dark:           #1a1d2e;
  --bg-card-dark-alt:       #161929;
  --bg-card-hover-dark:     #1f2340;

  /* --- Greyscale Palette --- */
  --grey-900: #1e1e1e;
  --grey-800: #2b2b2b;
  --grey-700: #444444;
  --grey-600: #666666;
  --grey-500: #888888;
  --grey-400: #aaaaaa;
  --grey-300: #cccccc;
  --grey-200: #e0e0e0;
  --grey-100: #f4f4f4;
  --grey-50:  #fafafa;

  /* --- Text Colours (semantic shortcuts) --- */
  --text-body-light:        #111827;
  --text-body-dark:         #ffffff;
  --text-secondary-light:   #515151;
  --text-secondary-dark:    #aaaaaa;
  --text-muted-dark:        #cccccc;

  /* --- Font Families --- */
  --font-primary:   'Epilogue', sans-serif;
  --font-heading:   'Anton', sans-serif;

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

  /* --- Line Heights --- */
  --leading-loose:    1.7;
  --leading-standard: 1.5;
  --leading-fine:     1.3;
  --leading-flat:     1.1;
  --leading-tight:    1;

  /* --- Fluid Font Sizes --- */
  --step--2: clamp(0.72rem,  0.8369rem + -0.0974vw, 0.7901rem);
  --step--1: clamp(0.875rem, 0.85rem   + 0.05vw,    0.95rem);
  --step-0:  clamp(1rem,     0.9rem    + 0.2vw,      1.125rem); /* Base */
  --step-1:  clamp(1.25rem,  1rem      + 0.5vw,      1.5rem);   /* Subheading */
  --step-2:  clamp(1.5rem,   1.2rem    + 0.75vw,     2rem);     /* H2 */
  --step-3:  clamp(1.875rem, 1.5rem    + 3vw,        9rem);   /* H1 */
  --step-4:  clamp(2.25rem,  1.8rem    + 1.5vw,      4.25rem);  /* 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:   4px;
  --radius-m:   8px;
  --radius-l:   10px;
  --radius-xl:  14px;
  --radius-pill: 30px;
  --radius-circle: 50%;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-s:   0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-m:   0 4px 16px rgba(121, 122, 223, 0.15);
  --shadow-l:   0 8px 24px rgba(121, 122, 223, 0.22);
  --shadow-xl:  0 12px 32px rgba(121, 122, 223, 0.28);
  --shadow-dark-s:  0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-dark-m:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-dark-l:  0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-dark-xl: 0 12px 32px rgba(0, 0, 0, 0.7);

  /* --- 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:      1rem 2rem;
  --btn-font-size:    1.25rem;
  --btn-radius:       0.5rem;
  --btn-bg:           var(--color-white);
  --btn-color:        #797ADF;
  --btn-hover-bg:     var(--color-white);

  /* --- Accordion Border Colours (kept for reference, no longer used for borders) --- */
  --accordion-border-light: var(--color-brand-dark);
  --accordion-border-dark:  var(--color-link-blue);

  /* --- 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 Anton */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', sans-serif;
}

body {
  font-family: 'Epilogue', sans-serif;
  background: var(--grey-50);
  -webkit-font-smoothing: antialiased;
}

/* All non-heading text elements use Epilogue */
p, span, li, label, input, textarea, select, button, a, td, th {
  font-family: 'Epilogue', sans-serif;
}

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


/* ==========================================================================
   3. LAYOUT — SECTION & ROW CONTAINERS
   ========================================================================== */

.section_container {
  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%;
  margin-bottom: -7px;
}

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


.side-video-wrapper iframe {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  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: 'Epilogue', sans-serif;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tablepress thead tr {
  background-color: var(--color-brand-navy);
  color: var(--color-white);
  text-align: left;
  font-weight: var(--weight-bold);
  font-family: 'Anton', sans-serif;
}

.tablepress th,
.tablepress td {
  padding: 12px 15px;
  font-family: 'Epilogue', sans-serif;
}

.tablepress tbody tr {
  border-bottom: 1px solid var(--grey-300);
}

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

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

.tablepress tbody tr.active-row {
  font-weight: var(--weight-bold);
  color: #009879;
}

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

td.column-1 {
  font-weight: var(--weight-bold);
}

.st-head-row.st-head-row-main {
  font-size: 1.5em;
  padding-top: 10px;
}

/* --- 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(--grey-300);
    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(--color-brand-navy);
  font-size: 14px;
  font-weight: 800 !important;
  font-family: 'Epilogue', sans-serif;
}

.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);
  }
}

/* Dark mode base: gradient from brand palette */
.banner-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(157.38deg, #797ADF 0%, #A756F7 50%, #111827 100%);
  opacity: 0.85;
  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(121, 122, 223, 0.8) 0%, rgba(167, 86, 247, 0.75) 50%, rgba(17, 24, 39, 0.82) 100%);
  opacity: 1;
}

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

.banner-container div h1 {
  color: var(--color-white);
  font-size: 80px;
  font-weight: var(--weight-extrabold);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
}

.banner-container div h4 {
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.4em;
  width: 50%;
  font-family: 'Epilogue', sans-serif;
}

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

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

@media (max-width: 480px) {
  .banner-container div h1 { font-size: 26px; }
  .banner-container div h4 { font-size: 10px; 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: 'Epilogue', sans-serif;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;

  /* glass effect */
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* 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 {
  opacity: 0.85;
  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;
}

/* REPLACE DEFAULT ">" SPACING */
.breadcrumbs {
  /* remove awkward spacing from text separators */
  line-height: 1;
}

/* STYLE THE TEXT SEPARATORS */
.breadcrumbs {
  /* we can't remove > from HTML, but we soften it */
}

.breadcrumbs {
  word-spacing: 2px;
}

/* LAST ITEM (CURRENT PAGE) */
.breadcrumbs > :last-child {
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--color-white);
  font-weight: var(--weight-medium);
}

/* MOBILE */
@media (max-width: 768px) {
  .breadcrumbs {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
  }
}

/* MOBILE IMPROVEMENTS */
@media (max-width: 768px) {

  .breadcrumb_row {
    overflow-x: auto;
  }

  .breadcrumbs {
    flex-wrap: nowrap; /* keep in one line */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide scrollbar (optional, cleaner UI) */
  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  /* Make last item less bulky on mobile */
  .breadcrumbs > :last-child {
    padding: 3px 8px;
    font-size: 12px;
  }
}

/* ==============================
   GRID LAYOUT
============================== */
.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: rgba(255,255,255,0.02);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

.contact-card h2 {
  font-size: 40px !important;
  font-family: 'Anton', sans-serif !important;
  color: var(--text-secondary-light) !important;
  margin-bottom: 10px;
}

.contact-card h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1a1a1a !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: 10px;
  background: rgba(121,122,223,0.12);
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-item label {
  font-size: 12px;
  color: #6b7a90;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 8px;
}

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

.info-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-brand-navy);
}

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

/* ==============================
   FORM OVERRIDES (UNCHANGED BASE)
============================== */
.gform_wrapper.gravity-theme input,
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme select {
  font-size: 15px;
  font-family: 'Epilogue', sans-serif;
  padding: 11px;
  background: var(--bg-form-input);
  border: none;
  border-radius: var(--radius-s);
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme textarea:focus,
.gform_wrapper.gravity-theme select:focus {
  box-shadow: 0 0 0 2px rgba(121,122,223,0.35);
  outline: none;
}

h2.gform_title {
    display: none !important;
}

.gform_wrapper.gravity-theme .gform_footer button {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  font-family: 'Anton', sans-serif;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: 0.3s;
}

.gform_wrapper.gravity-theme .gform_footer button:hover {
  transform: translateY(-2px);
  background: var(--color-primary-alt);
}


/* ==========================================================================
   10. SECTION THEMES — LIGHT & DARK
   ========================================================================== */

/* --- Section Backgrounds & Image Overlays --- */

.section_container_light {
  background-color: var(--bg-light) !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: use banner gradient as base, extended to fill sections */
.section_container_dark {
  background-color: var(--bg-dark) !important;
/*   background-image: linear-gradient(135deg, #111827 0%, #1a1533 60%, #0d1020 100%) !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(121, 122, 223, 0.7) 0%, rgba(167, 86, 247, 0.65) 50%, rgba(17, 24, 39, 0.8) 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 --- */
.section_container_light h3 {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  font-family: 'Epilogue', sans-serif !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: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
  font-family: 'Anton', sans-serif !important;
  margin-bottom: 10px;
}

/* --- Light: H2 --- */
.section_container_light h2 {
  color: var(--color-primary) !important;
  font-size: var(--step-3) !important;
  font-weight: var(--weight-bold) !important;
  padding: 0 !important;
  font-family: 'Anton', sans-serif !important;
  padding-bottom: var(--space-m) !important;
  text-transform: uppercase;
}

.section_container_light h2 span {
  background-color: var(--color-highlight-yellow);
  color: var(--color-brand-navy-alt) !important;
  padding: var(--space-xs) !important;
  display: inline-block;
  max-width: 100%;
}

/* --- Light: H4 --- */
.section_container_light h4 {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase;
}

/* --- Light: Body Text --- */
.section_container_light .text-area {
  color: var(--text-body-light);
  font-size: var(--step--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- 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--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-light);
}

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

.section_container_light ol li {
  margin-bottom: 0.5rem;
  font-size: var(--step--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-light);
}

/* --- Light: Links --- */
.section_container_light .text-area a {
  color: var(--color-primary);
  text-decoration: none !important;
  transition: color var(--transition-base);
}

.section_container_light .text-area a:hover {
  color: var(--color-primary-alt);
}

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

/* --- Dark: H3 --- */
.section_container_dark h3 {
  color: var(--color-primary-alt);
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  font-family: 'Epilogue', sans-serif !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: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: white;
    font-size: 14px;
    font-weight: 500;
  font-family: 'Anton', sans-serif !important;
  margin-bottom: 10px;
}

/* --- Dark: H2 --- */
.section_container_dark h2 {
  color: var(--color-white) !important;
  font-size: var(--step-3) !important;
  font-weight: var(--weight-bold) !important;
  padding: 0 !important;
  font-family: 'Anton', sans-serif !important;
  padding-bottom: var(--space-m) !important;
  text-transform: uppercase;
}

.section_container_dark h2 span {
  background-color: var(--color-highlight-yellow);
  color: var(--color-brand-navy-alt) !important;
  padding: var(--space-xs) !important;
  display: inline-block;
  max-width: 100%;
}

/* --- Dark: H4 --- */
.section_container_dark h4 {
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase;
}

/* --- Dark: Body Text --- */
.section_container_dark .text-area {
  color: var(--text-body-dark);
  font-size: var(--step--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- 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--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-dark);
}

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

.section_container_dark ol li {
  margin-bottom: 0.5rem;
  font-size: var(--step--1);
  line-height: var(--leading-loose);
  font-weight: var(--weight-medium);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-body-dark);
}

/* --- Dark: Links --- */
.section_container_dark .text-area a {
  color: var(--color-primary-alt);
  text-decoration: none !important;
  transition: color var(--transition-base);
}

.section_container_dark .text-area a:hover {
  color: 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: 'Anton', sans-serif;
  background-color: #F9F9F9;
  border: none;
  border-bottom: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--text-secondary-light);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-m);
  margin-bottom: 4px;
}

/* Remove border-top on first item — now handled by background system */
.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: 18px;
  float: right;
  transition: transform var(--transition-base);
}

.section_container_light button.accordion.is-open:after {
  content: "\f0d8";
}

.section_container_light button.accordion:hover,
.section_container_light button.accordion.is-open {
  background-color: rgba(121, 122, 223, 0.1);
  color: var(--color-primary);
}

.section_container_light .accordion-content {
  background-color: #F9F9F9;
  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);
}

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

/* --- Dark: Accordion --- */
.section_container_dark button.accordion {
  width: 100%;
  font-family: 'Anton', sans-serif;
  background-color: rgba(255, 255, 255, 0.06);
  border: none;
  border-bottom: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-m);
  margin-bottom: 4px;
}

/* Remove border-top on first item — now handled by background system */
.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: 18px;
  float: right;
  transition: transform var(--transition-base);
}

.section_container_dark button.accordion.is-open:after {
  content: "\f0d8";
}

.section_container_dark button.accordion:hover,
.section_container_dark button.accordion.is-open {
  background-color: rgba(167, 86, 247, 0.18);
  color: var(--color-primary-alt);
}

.section_container_dark .accordion-content {
  background-color: rgba(255, 255, 255, 0.04);
  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);
}


/* ==========================================================================
   11c. SECTION THEMES — LINK BUTTONS
   ========================================================================== */

/* Shared link button base */
.section_container_light .links_container a,
.section_container_dark .links_container a {
  background: var(--color-white);
  color: #797ADF;
  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: 'Anton', sans-serif;
  text-align: center;
  text-decoration: none;
  font-size: var(--btn-font-size);
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.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 --- */
.section_container_light .links_container a:hover {
  background: var(--color-white);
  color: var(--color-primary-alt);
  transform: translateY(-3px);
  box-shadow: 0 18px 28px -4px rgba(121, 122, 223, 0.28);
}

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

/* --- Dark hover --- */
.section_container_dark .links_container a:hover {
  background: var(--color-white);
  color: var(--color-primary-alt);
  transform: translateY(-3px);
  box-shadow: 0 18px 28px -4px rgba(0, 0, 0, 0.45);
}

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


/* ==========================================================================
   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;
  /* Gradient border via box-shadow technique */
  box-shadow: 0 0 0 1.5px transparent,
              var(--shadow-m);
  outline: 1.5px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

/* Gradient border effect using pseudo-element on the wrapper link */
.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, #797ADF, #A756F7);
  -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;
  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: 19px;
  color: var(--color-primary);
  font-weight: var(--weight-extrabold);
  font-family: 'Anton', sans-serif !important;
  margin-bottom: 6px;
}

.section_container_light .position {
  color: var(--text-secondary-light);
  letter-spacing: 0.5px;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px;
  margin-bottom: 12px;
}

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

.section_container_light .view_profile:hover {
  background: linear-gradient(135deg, #797ADF, #A756F7);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-m);
}

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

@media (max-width: 768px) {
  .section_container_light .profile_wrapper a img { height: var(--profile-img-height-mobile); }
  .section_container_light .title               { font-size: 16px; }
  .section_container_light .position            { font-size: 11px; }
  .section_container_light .view_profile        { font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 480px) {
  .section_container_light .profile_wrapper a img { height: var(--profile-img-height-small); }
  .section_container_light .title               { font-size: 15px; }
  .section_container_light .position            { font-size: 10px; }
  .section_container_light .view_profile        { font-size: 10px; padding: 3px 8px; }
}

/* --- Dark --- */
.section_container_dark .profile_wrapper a {
  background: var(--bg-card-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: block;
  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, #797ADF, #A756F7);
  -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;
  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: #f0f0f0;
}

.section_container_dark .title {
  font-size: 19px;
  color: var(--color-white);
  font-weight: var(--weight-extrabold);
  font-family: 'Anton', sans-serif !important;
  margin-bottom: 6px;
}

.section_container_dark .position {
  color: var(--text-secondary-dark);
  letter-spacing: 0.5px;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px;
  margin-bottom: 12px;
}

.section_container_dark .view_profile {
  font-weight: var(--weight-bold);
  font-size: 13px;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary-alt);
  display: inline-block;
  padding: 7px 16px;
  border: 1.5px solid var(--color-primary-alt);
  border-radius: var(--radius-pill);
  transition: all var(--transition-slow);
  background: transparent;
}

.section_container_dark .view_profile:hover {
  background: linear-gradient(135deg, #797ADF, #A756F7);
  color: var(--color-white);
  border-color: transparent;
  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: 17px; }
  .section_container_dark .position            { font-size: 12px; }
  .section_container_dark .view_profile        { font-size: 12px; padding: 5px 12px; }
}

@media (max-width: 768px) {
  .section_container_dark .profile_wrapper a img { height: var(--profile-img-height-mobile); }
  .section_container_dark .title               { font-size: 16px; }
  .section_container_dark .position            { font-size: 11px; }
  .section_container_dark .view_profile        { font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 480px) {
  .section_container_dark .profile_wrapper a img { height: var(--profile-img-height-small); }
  .section_container_dark .title               { font-size: 15px; }
  .section_container_dark .position            { font-size: 10px; }
  .section_container_dark .view_profile        { font-size: 10px; padding: 3px 8px; }
}


/* ==========================================================================
   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);
  box-shadow: var(--shadow-s);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  text-decoration: none;
}

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

.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);
  /* Gradient ring on avatar */
  box-shadow: 0 0 0 2.5px var(--color-primary), 0 0 0 5px rgba(167, 86, 247, 0.25);
}

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

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

.section_container_light .title-side {
  color: var(--color-primary);
  font-family: 'Anton', sans-serif;
  font-weight: var(--weight-bold);
  font-size: 18px;
  margin-bottom: 2px;
}

.section_container_light .position-side {
  color: var(--text-secondary-light);
  letter-spacing: 0.5px;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px;
  margin-bottom: 4px;
}

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

.section_container_light .view_profile-side:hover {
  background: linear-gradient(135deg, #797ADF, #A756F7);
  color: var(--color-white);
  border-color: transparent;
}

@media (max-width: 1024px) {
  .section_container_light .title-side       { font-size: 16px; }
  .section_container_light .position-side    { font-size: 12px; }
  .section_container_light .view_profile-side { font-size: 10px; padding: 2px 8px; }
}

@media (max-width: 768px) {
  .section_container_light .profile_wrapper-side a { padding: 8px 10px; gap: 10px; }
  .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: 15px; }
  .section_container_light .position-side    { font-size: 11px; }
  .section_container_light .view_profile-side { font-size: 9px; padding: 2px 6px; }
}

@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);
  box-shadow: var(--shadow-dark-s);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  text-decoration: none;
}

.section_container_dark .profile_wrapper-side a:hover {
  transform: translateY(-3px);
  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: 0 0 0 2.5px var(--color-primary-alt), 0 0 0 5px rgba(121, 122, 223, 0.25);
}

.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: 'Anton', sans-serif;
  font-weight: var(--weight-bold);
  font-size: 18px;
  margin-bottom: 2px;
}

.section_container_dark .position-side {
  color: var(--text-muted-dark);
  letter-spacing: 0.5px;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px;
  margin-bottom: 4px;
}

.section_container_dark .view_profile-side {
  font-weight: var(--weight-semibold);
  font-size: 11px;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary-alt);
  display: inline-block;
  margin-top: 3px;
  padding: 3px 10px;
  border: 1px solid var(--color-primary-alt);
  border-radius: 20px;
  transition: all var(--transition-slow);
}

.section_container_dark .view_profile-side:hover {
  background: linear-gradient(135deg, #797ADF, #A756F7);
  color: var(--color-white);
  border-color: transparent;
}

@media (max-width: 1024px) {
  .section_container_dark .title-side        { font-size: 16px; }
  .section_container_dark .position-side     { font-size: 12px; }
  .section_container_dark .view_profile-side { font-size: 10px; padding: 2px 8px; }
}

@media (max-width: 768px) {
  .section_container_dark .profile_wrapper-side a { padding: 8px 10px; gap: 10px; }
  .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: 15px; }
  .section_container_dark .position-side     { font-size: 11px; }
  .section_container_dark .view_profile-side { font-size: 9px; padding: 2px 6px; }
}

@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;
  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, #797ADF, #A756F7);
  -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;
  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: 1rem;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  font-family: 'Anton', sans-serif !important;
  margin-bottom: var(--space-xs);
  line-height: var(--leading-fine);
  transition: color var(--transition-base);
}

.section_container_light .related_wrapper a:hover .related_title {
  color: var(--color-primary-alt);
}

.section_container_light .related_read-more {
  margin-top: auto;
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary);
  display: inline-block;
  transition: color var(--transition-base);
}

.section_container_light .related_read-more:hover {
  color: var(--color-primary-alt);
}

/* --- 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;
  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, #797ADF, #A756F7);
  -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;
  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: 1rem;
  color: var(--color-white);
  font-weight: var(--weight-bold);
  font-family: 'Anton', sans-serif !important;
  margin-bottom: var(--space-xs);
  line-height: var(--leading-fine);
  transition: color var(--transition-base);
}

.section_container_dark .related_wrapper a:hover .related_title {
  color: var(--color-primary-alt);
}

.section_container_dark .related_read-more {
  margin-top: auto;
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary-alt);
  display: inline-block;
  transition: color var(--transition-base);
}

.section_container_dark .related_read-more:hover {
  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);
  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: #f5f3ff;
  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;
  transition: transform var(--transition-slow);
  box-shadow: 0 0 0 2px var(--color-primary);
}

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

.section_container_light h4.related_title-side {
  font-size: 0.95rem;
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  font-family: 'Anton', sans-serif !important;
  margin: 0;
  line-height: var(--leading-fine);
  transition: color var(--transition-base);
}

.section_container_light .related_wrapper-side a:hover h4.related_title-side {
  color: var(--color-primary-alt);
}

.section_container_light p.related_read-more-side {
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary);
  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(--color-primary-alt);
}

@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);
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  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: 0 6px 16px rgba(167, 86, 247, 0.25);
  transform: translateY(-2px);
}

.section_container_dark .related_wrapper-side a img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  transition: transform var(--transition-slow);
  box-shadow: 0 0 0 2px var(--color-primary-alt);
}

.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-bold);
  font-family: 'Anton', sans-serif !important;
  margin: 0;
  line-height: var(--leading-fine);
  transition: color var(--transition-base);
}

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

.section_container_dark p.related_read-more-side {
  font-weight: var(--weight-semibold);
  font-size: 0.8rem;
  font-family: 'Epilogue', sans-serif !important;
  color: var(--color-primary-alt);
  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: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 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);
  transition: transform var(--transition-slow);
}

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

/* --- 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);
  transition: transform var(--transition-slow);
}

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

.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);
  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;
}

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

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

/* Image styling (keep yours mostly) */
.gallery-page-container ul li a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
  transition: transform var(--transition-slow);
}

/* Hover effect */
.gallery-page-container ul li img:hover {
  transform: scale(1.05);
}

/* ==========================================================================
   ADDITIVE STYLES — single.php & single-faculty_and_staff.php
   Theme: School of Rock and Media Ltd
   These rules are purely additive and do not override any existing styles.
   ========================================================================== */


/* ==========================================================================
   SHARED UTILITIES
   ========================================================================== */

/* Hero meta / category chips shared between both templates */
.single-post__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.single-post__cat-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 12px;
  font-family: 'Epilogue', sans-serif;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.single-post__cat-tag:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.5);
}

.single-post__byline {
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  opacity: 0.85;
}


/* ==========================================================================
   BLOG SINGLE — LAYOUT
   ========================================================================== */

/* Override the sidebar grid for the blog post so the row has adequate gap */
.single-post__layout {
  align-items: start;
}

/* Article prose area */
.single-post__article {
  margin-bottom: 48px;
}

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

/* Ensure images inside content are responsive */
.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(--color-primary);
  margin: var(--space-xl) 0;
  padding: var(--space-l) var(--space-xl);
  background: rgba(121,122,223,0.06);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-style: italic;
  color: var(--text-secondary-light);
}


/* ==========================================================================
   BLOG SINGLE — GALLERY SECTION
   ========================================================================== */

.single-post__gallery-section {
  margin-bottom: 48px;
}

.single-post__gallery-section h2 {
  /* Uses existing .section_container_light h2 — no override needed */
  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(--grey-200);
  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(121,122,223,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-slow);
  color: #fff;
}

.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: rgba(121,122,223,0.04);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(121,122,223,0.12);
}

.single-post__links-heading {
  /* Inherits from .section_container_light h3 */
  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-l);
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow);
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.single-post__link-btn--file:hover {
  background: var(--color-primary-alt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
  color: #fff;
}

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

.single-post__link-btn--url:hover {
  background: var(--color-primary);
  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: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  flex-shrink: 0;
}

.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: rgba(121,122,223,0.08);
  border: 1px solid rgba(121,122,223,0.2);
  color: var(--color-primary);
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.single-post__tag:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}


/* ==========================================================================
   BLOG SINGLE — AUTHOR CARD
   ========================================================================== */

.single-post__author-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-l);
  padding: var(--space-xl);
  background: var(--grey-50);
  border-radius: var(--radius-xl);
  border: 1px solid var(--grey-200);
  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(--color-primary), 0 0 0 5px rgba(121,122,223,0.2);
}

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

.single-post__author-label {
  font-size: 11px;
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary-light);
  margin-bottom: 4px;
}

.single-post__author-name {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.single-post__author-bio {
  font-size: 13px;
  font-family: 'Epilogue', sans-serif;
  color: var(--text-secondary-light);
  line-height: var(--leading-loose);
}

@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(--grey-50);
  border: 1px solid var(--grey-200);
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
  min-width: 0;
}

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

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

.single-post__nav-dir {
  font-size: 11px;
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
}

.single-post__nav-title {
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body-light);
  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
   ========================================================================== */

/* Sticky behaviour — sits inside the CSS Grid column */
.single-post__sidebar-inner {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}

/* Widget card shell */
.single-post__sidebar-widget {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-m);
  border: 1px solid rgba(121,122,223,0.08);
}

.single-post__sidebar-title {
  font-family: 'Anton', sans-serif !important;
  font-size: 16px !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: var(--space-l) !important;
  padding-bottom: var(--space-s) !important;
  border-bottom: 2px solid rgba(121,122,223,0.15) !important;
}

/* Recent posts card */
.sidebar-post-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-200);
  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.8;
}

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

.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: 'Epilogue', sans-serif;
  color: var(--text-secondary-light);
  margin-bottom: 3px;
}

.sidebar-post-card__title {
  font-family: 'Anton', sans-serif !important;
  font-size: 14px !important;
  color: var(--color-primary) !important;
  line-height: 1.3 !important;
  margin-bottom: 5px !important;
  /* Clamp to 2 lines */
  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: 'Epilogue', sans-serif;
  font-weight: 600;
  color: var(--color-primary-alt);
  transition: letter-spacing 0.2s ease;
}

.sidebar-post-card:hover .sidebar-post-card__cta {
  letter-spacing: 0.5px;
}

.single-post__no-posts {
  font-size: 13px;
  color: var(--text-secondary-light);
  font-family: 'Epilogue', sans-serif;
}

/* 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: 8px 12px;
  border-radius: var(--radius-m);
  font-size: 14px;
  font-family: 'Epilogue', sans-serif;
  font-weight: 500;
  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: rgba(121,122,223,0.08);
  color: var(--color-primary);
}

.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: rgba(121,122,223,0.12);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
}

/* Sidebar mobile collapse — below 980px the sidebar moves below content
   (already handled by row_structure_side_bar grid breakpoint) */
@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);
  /* Sticky on desktop */
  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(--grey-200);
  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, rgba(121,122,223,0.15), rgba(167,86,247,0.1));
  color: var(--color-primary);
  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: 14px 16px;
  background: linear-gradient(0deg, rgba(17,24,39,0.88) 0%, transparent 100%);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

/* Contact card */
.staff-profile__contact-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-m);
  border: 1px solid rgba(121,122,223,0.1);
}

.staff-profile__contact-heading {
  font-family: 'Anton', sans-serif !important;
  font-size: 15px !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: var(--space-l) !important;
  padding-bottom: var(--space-s) !important;
  border-bottom: 2px solid rgba(121,122,223,0.15) !important;
}

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

.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: 8px;
  background: rgba(121,122,223,0.1);
  color: var(--color-primary);
  margin-top: 2px;
}

.staff-profile__contact-label {
  font-size: 11px !important;
  font-family: 'Epilogue', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-secondary-light) !important;
  margin-bottom: 3px !important;
}

.staff-profile__contact-value {
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body-light);
  text-decoration: none !important;
  word-break: break-all;
  transition: color var(--transition-fast);
}

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

/* 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: rgba(121,122,223,0.1);
  border: 1px solid rgba(121,122,223,0.2);
  color: var(--color-primary);
  font-family: 'Epilogue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.staff-profile__team-tag:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}

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

.staff-profile__back-link:hover {
  color: var(--color-primary-alt);
  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 {
  /*display: flex;
  align-items: center;
  flex-wrap: wrap;*/
  gap: 14px;
  padding-bottom: var(--space-l);
  border-bottom: 2px solid rgba(121,122,223,0.12);
}

.staff-profile__name {
  font-family: 'Anton', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !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: linear-gradient(135deg, #797ADF, #A756F7);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-shadow: var(--shadow-m);
  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: 1px solid rgba(121,122,223,0.08);
}

/* Section label shared pattern */
.staff-profile__section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Epilogue', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--space-l) !important;
  padding: 6px 14px !important;
  background: rgba(121,122,223,0.08) !important;
  border: 1px solid rgba(121,122,223,0.15) !important;
  border-radius: 20px !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 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: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), background var(--transition-slow);
}

.staff-profile__info-chip--email {
  background: rgba(121,122,223,0.1);
  border: 1.5px solid rgba(121,122,223,0.25);
  color: var(--color-primary);
}

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

.staff-profile__info-chip--phone {
  background: rgba(167,86,247,0.08);
  border: 1.5px solid rgba(167,86,247,0.2);
  color: var(--color-primary-alt);
}

.staff-profile__info-chip--phone:hover {
  background: var(--color-primary-alt);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}


/* ==========================================================================
   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(--grey-100);
}

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

.staff-related-list li a:hover {
  color: var(--color-primary-alt);
}

.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: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.category-card:hover {
  transform: translateY(-6px);
}

.category-card__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.category-card__content {
  padding: 16px;
}

.category-card__content h3 {
  margin: 0 0 8px;
}

.single-post__date {
  margin-top: 10px;
  opacity: 0.85;
  font-size: 14px;
}

/* 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: 10px;
}

/* DOWNLOAD BUTTONS */
.newsletters-main-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.download-btn {
  display: block;
  padding: 12px 14px;
  background: #00BDB9;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.download-btn:hover {
  background: #3C5EA6;
}

.download-btn--external {
  background: #3C5EA6;
}

/* SIDEBAR POSTS */
.sidebar-post-card {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

.sidebar-post-thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.sidebar-date {
  font-size: 12px;
  opacity: 0.7;
}

.sidebar-post-content strong {
  display: block;
  font-size: 14px;
}

.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-m);
    border: 1px solid rgba(121, 122, 223, 0.08);
}
@media only screen and (max-width: 850px) {
  .newsletters-main-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}
@media only screen and (max-width: 450px) {
  .newsletters-main-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
}
.newsletters-main-container a {
  border-radius: 0.5rem;
    padding: 1rem 2rem;
    font-family: 'Anton', sans-serif;
    font-size: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s;
  background: #7a7bda;
  font-weight: 700;
    color: white !important;
    border: none;
  text-decoration: none;
    display: inline-flex;
    align-items: center;
  justify-content: center;
}
.newsletters-main-container a:hover {
  background: #6a6bca;
    color: white !important;
}

.single-post__gallery-heading {
  font-family: 'Anton', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    line-height: 1.1 !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-m);
    border: 1px solid rgba(121, 122, 223, 0.08);
}

.single-post__gallery-section {
  background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-m);
    border: 1px solid rgba(121, 122, 223, 0.08);
}

.sidebar-post-content {
    color: #797ae1;
}

.sidebar-date {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 5px;
    display: block;
}

span.sidebar-read {
    margin-top: 5px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.single-post__date {
    margin-top: 10px;
    opacity: 0.85;
    font-size: 16px;
    color: white;
    font-weight: 800;
}

img.attachment-full.size-full.wp-post-image {
    width: 100%;
    height: auto;
}

section.tribe-common-l-container.tribe-events-l-container {
    padding: 0px !important;
}
/* ==========================================================================
   14. 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;
}