/*
Theme Name: Divi Child Theme
Version: 2.0
Description: Basic Child Theme by JoshHall.co
Author: Josh Hall
Template: Divi
Author URL: https://joshhall.co
*/
 
/*------- Theme Customizations------- */

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

:root {

  /* --- Brand Colours --- */
  --color-primary:          #7d3aed;   /* Main purple */
  --color-primary-alt:      #6b2dcf;   /* Deeper purple */
  --color-accent:           #7d3aed;   /* CTA aligned to brand */
  --color-accent-dark:      #6b2dcf;   /* Hover state */
  --color-success:          #6b2dcf;   /* Optional reuse */
  --color-text-dark:        #0b1621;   /* Deep navy text */
  --color-white:            #ffffff;

  /* --- UI / Site Colours --- */
  --color-brand-dark:       #7d3aed;
  --color-brand-navy:       #0b1621;
  --color-brand-navy-alt:   #302e3c;
  --color-brand-hover:      #6b2dcf;
  --color-link-blue:        #7d3aed;
  --color-highlight-yellow: #f9f7ff;
  --color-overlay-dark:     rgba(11, 22, 33, 0.6);
  --color-overlay-blue:     rgba(11, 22, 33, 0.75);
  --color-overlay-white:    rgba(255, 255, 255, 0.6);

  /* --- Section Background Colours --- */
  --bg-light:               #ffffff;
  --bg-dark:                #0b1621;
  --bg-breadcrumb:          #7d3aed;
  --bg-form-input:          #f9f7ff;
  --bg-card-dark:           #302e3c;
  --bg-card-dark-alt:       #262330;
  --bg-card-hover-dark:     #3a3748;

  /* --- Greyscale Palette --- */
  --grey-900: #0b1621;
  --grey-800: #1a2430;
  --grey-700: #302e3c;
  --grey-600: #4a4a5a;
  --grey-500: #6b6b7a;
  --grey-400: #9aa0aa;
  --grey-300: #c7ccd6;
  --grey-200: #dfeeff;
  --grey-100: #f9f7ff;
  --grey-50:  #ffffff;

  /* --- Text Colours --- */
  --text-body-light:        #0b1621;
  --text-body-dark:         #ffffff;
  --text-secondary-light:   #302e3c;
  --text-secondary-dark:    #dfeeff;
  --text-muted-dark:        #c7ccd6;

  /* --- Font Families --- */
  --font-primary:   'cabin', sans-serif; /* Body */
  --font-heading:   'Poppins', sans-serif;  /* Headings */

  /* --- 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);
  --step-1:  clamp(1.25rem,  1rem      + 0.5vw,      1.5rem);
  --step-2:  clamp(1.5rem,   1.2rem    + 0.75vw,     2rem);
  --step-3:  clamp(1.875rem, 1.5rem    + 3vw,        4rem);
  --step-4:  clamp(2.25rem,  1.8rem    + 1.5vw,      4.25rem);

  /* --- 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(125, 58, 237, 0.15);
  --shadow-l:   0 8px 24px rgba(125, 58, 237, 0.22);
  --shadow-xl:  0 12px 32px rgba(125, 58, 237, 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;

  /* --- Buttons --- */
  --btn-padding:      1rem 2rem;
  --btn-font-size:    1.25rem;
  --btn-radius:       0.5rem;
  --btn-bg:           #ffffff;
  --btn-color:        #7d3aed;
  --btn-hover-bg:     #f9f7ff;

  /* --- 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%;
  max-height: 600px;
  object-fit: cover;
  margin-bottom: -7px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%);
}

.links_container-main a {
	margin-bottom: 5px !important;
}

.links_container_center a {
	margin-bottom: 5px !important;
}

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

  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;
  
  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-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-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-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-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;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary-light);
  margin-bottom: 4px;
}

.single-post__author-name {
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.single-post__author-bio {
  font-size: 13px;
  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-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
}

.single-post__nav-title {
  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-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;
  color: var(--text-secondary-light);
  margin-bottom: 3px;
}

.sidebar-post-card__title {
  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-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);
}

/* 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-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-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-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;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-secondary-light) !important;
  margin-bottom: 3px !important;
}

.staff-profile__contact-value {
  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-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-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-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-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-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-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-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-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;
}