/**
Theme Name: PEC-child
Author: Veerendra Tikhe
Author URI: https://v-render.com/
Description: Childtheme for PEC made over Astra
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: PEC-child
Template: astra
*/

/* ========================================
   COLOR REFERENCE GUIDE
   ======================================== */
/* 
   PRIMARY COLORS (CSS Variables):
   --black:             #333 (Dark gray/black for text & backgrounds)
   --white:             #fafafa (Off-white for light backgrounds)
   --blue:              #009ddd (Sky blue - accent color)
   --primary-color:     #013768 (Navy blue - primary brand color, used for hover states)
   --input-bg-color:    #EFEFEF (Light gray for input fields)
   
   PRIMARY BUTTON COLORS:
   #ffd700 (Gold - btn-primary background)
   #002e6e (Dark blue - btn-primary hover)
   #002542 (Darker blue - btn-primary hover border)
   
   SECONDARY BUTTON COLORS:
   #dcfff4 (Light mint - btn-secondary background)
   #b2ded3 (Mint green - btn-secondary border)
   #a7c4ff (Light blue - btn-secondary hover)
   #569bfc (Bright blue - btn-secondary hover border)
   
   STAFF/CARD COLORS:
   #777 (Medium gray - text, designations, contact info)
   #d9d9d9 (Light gray - card borders)
   #0066ff (Bright blue - staff contact buttons)
   #aeca36 (Yellow-green - icon accents in staff buttons)
   #33333330 (Dark gray with 19% opacity - card shadows)
   
   INTERACTIVE/FOCUS:
   #e6e6e6 (Very light gray - btn-primary-dark hover)
   #fff (White - text on dark backgrounds, btn-outline hover)
   
   OPACITY/GLASS EFFECTS:
   rgba(255, 255, 255, 0.5) - Glass card 50%
   rgba(255, 255, 255, 0.6) - Glass card 60%
   rgba(255, 255, 255, 0.7) - Glass card 70%
   rgba(255, 255, 255, 0.8) - Glass card 80%
   rgba(255, 255, 255, 0.18) - Glass card borders
   rgba(255, 255, 255, 0.4) - Glass card inset highlights
   rgba(0, 0, 0, 0.1) - Light shadows
*/


:root {
  --black: #333;
  --white: #fafafa;
  --blue: #009ddd;
  --primary-color: #013768;
  --input-bg-color: #EFEFEF;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.pec-motion .pec-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  will-change: opacity, transform;
}

.pec-motion .pec-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.pec-motion .pec-reveal:nth-child(2) { transition-delay: 40ms; }
.pec-motion .pec-reveal:nth-child(3) { transition-delay: 80ms; }
.pec-motion .pec-reveal:nth-child(4) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .pec-motion .pec-reveal,
  .pec-motion .pec-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 120ms ease;
    will-change: auto;
  }
}
/* =========================
  2. LAYOUT: GRID, ROW, COLS
  ========================= */
ol, ul { margin: 0 0 .5em 1em!important;}
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.row::after { content: ""; display: table; clear: both; }
[class*="col-"] { flex: 1 1 100%; max-width: 100%; }
.d-flex { display: flex; }
.d-flex-row { display: flex; flex-direction: row; }
.d-flex-column { display: flex; flex-direction: column; }

.card { display:flex; flex-direction:column; padding:10px; border:#d9d9d9 solid 1px; border-radius:10px; box-shadow:#33333330 2px 2px 4px; }
.white .black { background-color:#fff!important; color:#333!important; padding:10px; }
.white .black a { color:#333!important; text-decoration:none; }
.black { background-color:#333; color:#fff!important; padding:10px; }
.black a { color:#fff!important; text-decoration:none; }
.black h6 { color:#fff!important; font-size:18px; margin:0; letter-spacing:0; }
/* =========================
  6. BUTTONS
  ========================= */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font:500 16px/1.4 system-ui,sans-serif;border:2px solid currentColor;border-radius:8px;text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-sizing:border-box;min-height:48px;margin:0 .2vw;}
.btn:focus-visible{outline:2px solid #333;outline-offset:2px;}
.btn-outline{color:white;background:transparent;border-color:white;}
.btn-outline:hover{background:white;color:#333;}
.btn-primary{color:#333;background:#ffd700;border-color:#ffd700;}
.btn-primary:hover{background:#002e6e;border-color:#002542; color:#fff}
.btn-secondary{color:#333;background:#dcfff4;border-color:#b2ded3;}
.btn-secondary:hover{background:#a7c4ff;border-color:#569bfc; color:#333}
.btn-primary-dark{color:var(--black);background:var(--white);font-size:18px;border-color:var(--black);}
.btn-primary-dark:hover{background:#e6e6e6;border-color:var(--black);}
.btn-sm{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;font:500 14px/1.2 system-ui,sans-serif;border:2px solid currentColor;border-radius:6px;text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1); box-sizing:border-box; min-height:32px;margin:0 .1vw;}
.btn.btn-xs {padding:10px;line-height:0; margin:0 5px; font-size:12px; min-height:auto; border-radius:30px;}
.staff-buttons-group { display: flex;  margin-top: 10px; justify-content: center; }
/* --- MOBILE: max-width 340px --- */
@media only screen and (max-width: 340px) {
  .btn-sm{padding:4px 8px;font-size:12px;min-height:32px;}
  .btn.btn-xs {padding:10px;line-height:0; margin:0 5px; font-size:12px; min-height:auto; border-radius:30px;}
}

/* =========================
  3. LAYOUT: GRID SYSTEM (DESKTOP/TABLET)
  ========================= */
/* Tablet: 481px - 960px */
@media screen and (min-width: 481px) and (max-width: 960px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { flex: 1 1 50%; max-width: 50%; }
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex: 1 1 100%; max-width: 100%; }
}
/* Desktop: 961px+ */
@media only screen and (min-width: 961px) {
  .col-1 { flex: 1 1 8.33%; max-width: 8.33%; }
  .col-2 { flex: 1 1 16.66%; max-width: 16.66%; }
  .col-3 { flex: 1 1 25%; max-width: 25%; }
  .col-4 { flex: 1 1 33.33%; max-width: 33.33%; }
  .col-5 { flex: 1 1 41.66%; max-width: 41.66%; }
  .col-6 { flex: 1 1 50%; max-width: 50%; }
  .col-7 { flex: 1 1 58.33%; max-width: 58.33%; }
  .col-8 { flex: 1 1 66.66%; max-width: 66.66%; }
  .col-9 { flex: 1 1 75%; max-width: 75%; }
  .col-10 { flex: 1 1 83.33%; max-width: 83.33%; }
  .col-11 { flex: 1 1 91.66%; max-width: 91.66%; }
  .col-12 { flex: 1 1 100%; max-width: 100%; }
}

/* =========================
  4. LAYOUT: FLEX HELPERS
  ========================= */
.f-flex { display: flex; }
.f-flex-row { flex-direction: row; }
.f-justify-between { justify-content: space-between; }
.f-justify-center { justify-content: center; }
.f-justify-start { justify-content: flex-start; }
.f-justify-end { justify-content: flex-end; }
.f-align-items-center { align-items: center; }
.f-align-items-start { align-items: flex-start; }


/* =========================
  5. LAYOUT: MARGIN & PADDING
  ========================= */
.m-0 { margin:0 !important; } .m-10 { margin:10px !important; } .m-20 { margin:20px !important; }
.mb-0 { margin-bottom:0 !important; } .mt-10 { margin-top:10px !important; } .mb-10 { margin-bottom:10px !important; }
.ml-10 { margin-left:10px !important; } .mr-10 { margin-right:10px !important; }
.mt-20 { margin-top:20px !important; } .mb-20 { margin-bottom:20px !important; }
.ml-20 { margin-left:20px !important; } .mr-20 { margin-right:20px !important; }
.ml-0 { margin-left:0 !important; } .mr-0 { margin-right:0 !important; }
.mh-0 { margin-left:0 !important; margin-right:0 !important; }
.mh-10 { margin-left:10px !important; margin-right:10px !important; }
.mh-20 { margin-left:20px !important; margin-right:20px !important; }
.mv-0 { margin-top:0 !important; margin-bottom:0 !important; }
.mv-10 { margin-top:10px !important; margin-bottom:10px !important; }
.mv-20 { margin-top:20px !important; margin-bottom:20px !important; }
.p-0 { padding:0 !important; } .pl-0 { padding-left:0; } .pr-0 { padding-right:0; }
.pr-10 { padding-right:10px; } .pt-10 { padding-top:10px; }
.p-10 { padding:10px !important; } .p-20 { padding:20px !important; } .p-40 { padding:40px !important; }

/* =========================
  11. ITEM & STAFF GRIDS
  ========================= */
.item-grid { display:flex; flex-wrap:wrap; padding:0; }
.item-grid .item-info { width:100%; height:auto; }
.item-grid .item-info img { width:100%; height:auto; margin:0 auto; display:block; }
.item-grid .item-info h4 { line-height:24px; font-size:22px; margin:15px 0; letter-spacing:0; }
.item-grid .item-info h5 { line-height:24px; font-size:18px; margin:5px 0; letter-spacing:0; }
.item-grid .item-info p { margin-bottom:.1em; }
.item-grid .item-info .black .item-sold-price { color:white; }
.item-grid.single-artist-items .item-info {width: 100%;}

.pages-grid {
  --pages-grid-speed: 400ms;
  --pages-grid-ease: cubic-bezier(.4, 0, .2, 1);   /* smooth ease-in-out */
  --pages-grid-shade: rgba(0, 0, 0, .6);           /* black at 60% opacity */
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px;
}
.pages-grid__card,
.pages-grid__card:hover,
.pages-grid__card:focus { position:relative; display:block; color:#fff; text-decoration:none; }
.pages-grid__tile { position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden; isolation:isolate; border-radius:14px; background:var(--primary-color); box-shadow:0 2px 6px rgba(17, 24, 39, .08); transition:transform var(--pages-grid-speed) var(--pages-grid-ease), box-shadow var(--pages-grid-speed) var(--pages-grid-ease), filter var(--pages-grid-speed) var(--pages-grid-ease), opacity var(--pages-grid-speed) var(--pages-grid-ease); }
/* Scoped selector outranks theme/Elementor img rules (e.g. .elementor img { height:auto }). */
.pages-grid .pages-grid__tile .pages-grid__image { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; border-radius:0; object-fit:cover; object-position:center; transform:scale(1.1); transition:transform var(--pages-grid-speed) var(--pages-grid-ease); }
.pages-grid__shade { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, var(--pages-grid-shade) 100%); mix-blend-mode:multiply; pointer-events:none; }
.pages-grid__title { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px 18px; font-size:22px; font-weight:700; line-height:1.5rem; letter-spacing:-.5px; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0, 0, 0, .45); transition:transform var(--pages-grid-speed) var(--pages-grid-ease); }
@media (min-width: 576px) {
  .pages-grid__title { font-size:26px; }
}
@media (hover: hover) and (pointer: fine) {
  .pages-grid__card:hover { z-index:2; }
  .pages-grid__card:hover .pages-grid__tile { transform:scale(1.1); box-shadow:0 10px 20px rgba(17, 24, 39, .14), 0 28px 56px rgba(17, 24, 39, .22); }
  /* Mute the other tiles while one is hovered; :has() avoids dimming when the pointer is only over a gap. */
  .pages-grid:has(.pages-grid__card:hover) .pages-grid__card:not(:hover) .pages-grid__tile { filter:grayscale(1); opacity:.5; }
  .pages-grid .pages-grid__card:hover .pages-grid__image { transform:scale(1); }
  .pages-grid__card:hover .pages-grid__title { transform:translateY(-20px); }
}
.pages-grid__card:focus-visible { outline:none; }
.pages-grid__card:focus-visible .pages-grid__tile { outline:3px solid rgba(1, 55, 104, .45); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .pages-grid__tile,
  .pages-grid .pages-grid__tile .pages-grid__image,
  .pages-grid__title { transition:none; }
}
/* Entrance: cards fade/lift in, titles follow slightly later. Keyframes use
   `backwards` fill so they release transform and hover transitions still work. */
@keyframes pec-card-in {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:none; }
}
@keyframes pec-title-in {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:none; }
}
.pec-motion .pages-grid__card.is-visible .pages-grid__title { animation:pec-title-in 360ms var(--ease-out) 140ms backwards; }
.pec-motion .pages-grid--carousel .pages-grid__card { opacity:0; }
.pec-motion .pages-grid--carousel.is-ready.is-visible .pages-grid__card { opacity:1; animation:pec-card-in 420ms var(--ease-out) var(--pec-delay, 0ms) backwards; }
.pec-motion .pages-grid--carousel.is-ready.is-visible .pages-grid__title { animation:pec-title-in 360ms var(--ease-out) calc(var(--pec-delay, 0ms) + 140ms) backwards; }
@media (prefers-reduced-motion: reduce) {
  .pec-motion .pages-grid__card.is-visible .pages-grid__title,
  .pec-motion .pages-grid--carousel.is-ready.is-visible .pages-grid__card,
  .pec-motion .pages-grid--carousel.is-ready.is-visible .pages-grid__title { animation:none; }
}
/* Hovered edge tiles must not be cropped. At rest the stage is left unclipped and
   off-screen slides are hidden instead; while Owl moves (.is-moving, script.js) its
   normal clipping returns so slides glide in/out. The wrapper's side padding is the
   room a scaled edge tile + shadow may use, and clips there to avoid page scroll. */
.pages-grid.pages-grid--carousel { padding:2px 34px 12px; overflow-x:clip; overflow-y:visible; }
.pages-grid.pages-grid--carousel .owl-stage-outer { overflow:visible; }
.pages-grid.pages-grid--carousel:not(.is-moving) .owl-item:not(.active) { visibility:hidden; }
.pages-grid.pages-grid--carousel.is-moving .owl-stage-outer { overflow-x:clip; overflow-y:visible; }
.pages-grid--carousel .owl-item:hover { z-index:2; }
.pages-grid--carousel .owl-nav button { font-size:30px !important; line-height:1; }
.pages-grid--carousel .owl-dots { margin-top:12px; }

.staff-grid { display:grid; padding:0; margin:0; grid-template-columns: 1fr; gap: 20px 18px; align-items:start; align-content:start; }

.staff-info { display:flex; justify-content:start; padding:3px; flex-direction:column; min-width:auto; flex-wrap:wrap; }
.staff-info h6, .staff-info p { margin-bottom:0!important;}
.staff-info i { display:none;}
.ff-clickable.card,
.staff-info .card { background: rgba(255,255,255,0.82); margin:0; flex-direction:row; border:1px solid rgba(18, 32, 51, 0.08); padding:22px 18px 18px; border-radius:18px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.04); transition: transform .2s ease, box-shadow .2s ease; }
.ff-clickable.card:hover,
.staff-info .card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17, 24, 39, 0.06); }
body.staff-popup-open .ff-clickable.card:hover { transform: none !important; }
body.staff-popup-open .ff-clickable.card.staff-card-expanded,
body.staff-popup-open .ff-clickable.card.staff-card-expanded:hover { transform: translate(-50%, -50%) !important; box-shadow: 0 28px 60px rgba(15, 23, 42, 0.28) !important; }
.staff-info .staff-photo { height:auto; display:block; overflow: hidden; margin: 0 auto 14px; }
.staff-info .staff-photo img {/*min-width: 50px; max-width:200px; */ width: 150px; height: 150px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto; border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.07); }
.staff-info .staff-bio h4 { font-size:24px; margin: 0 !important; letter-spacing:0; margin-bottom:12px; }
.staff-info .staff-name { text-align:center; margin:0; }
.staff-info .staff-name a { display:block; width:100%; text-align:center; font-size:22px; line-height:1.2; letter-spacing:-0.04em; color:#0b4d85; font-weight:600; text-decoration:none; }
.staff-info .staff-name a:hover { color:#0b4d85; }
.staff-info .staff-content-group { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:100%; text-align:center; min-height:100%; }
.ff-clickable.card > .staff-info,
.ff-clickable.card > .single-staff,
.ff-clickable.card .staff-info,
.ff-clickable.card .single-staff { width:100%; }
.ff-clickable.card { display:flex; align-items:stretch; justify-content:center; width:100%; }

.single-staff-profile.staff-info {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 14px 40px;
  align-items: start;
}

.single-staff-profile .staff-photo-content,
.single-staff-profile .staff-bio {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.04);
}

.single-staff-profile .staff-photo-content {
  width: 100%;
  max-width: 100%;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin: 0 auto;
}

.single-staff-profile .staff-photo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 18px;
}

.single-staff-profile .staff-photo img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 16px 34px rgba(15,23,42,0.12);
}

.single-staff-profile .staff-name {
  width: 100%;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #0b4d85;
  font-weight: 700;
  margin: 0 0 10px;
  text-align: center;
}

.single-staff-profile h6 {
  font-size: 1.12rem;
  line-height: 1.45;
  color: #4b5563;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 12px;
}

.single-staff-profile .staff-description,
.single-staff-profile .staff-contact-info li,
.single-staff-profile .staff-contact-info li a,
.single-staff-profile .staff-bio-data p,
.single-staff-profile .staff-cta-data p,
.single-staff-profile .staff-bio-data h4,
.single-staff-profile .staff-cta-data h4 {
  color: #374151;
}

.single-staff-profile .staff-description {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42ch;
  margin: 0 0 14px;
}

.single-staff-profile .staff-contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.single-staff-profile .staff-contact-info li {
  width: 100%;
}

.single-staff-profile .staff-contact-info li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11, 77, 133, 0.15);
  background: rgba(11, 77, 133, 0.03);
  text-decoration: none;
  font-weight: 600;
}

.single-staff-profile .staff-bio {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
  padding: 28px 22px;
}

.single-staff-profile .staff-bio-data,
.single-staff-profile .staff-cta-data {
  padding: 0;
}

.single-staff-profile .staff-bio-data h4,
.single-staff-profile .staff-cta-data h4 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.single-staff-profile .staff-bio-data p,
.single-staff-profile .staff-cta-data p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.9;
  color: #374151;
}

.single-staff-profile .staff-bio-data + .staff-cta-data {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

@media only screen and (min-width: 980px) {
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ff-clickable.card {
    width: 100%;
  }

  .single-staff-profile.staff-info {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 28px;
  }

  .single-staff-profile .staff-photo-content {
    padding: 28px 22px 24px;
  }

  .single-staff-profile .staff-bio {
    width: auto;
    min-width: 0;
    padding: 32px 28px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .ff-clickable.card {
    width: 100%;
    max-width: 100%;
  }

  .single-staff-profile.staff-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .single-staff-profile .staff-photo-content,
  .single-staff-profile .staff-bio {
    width: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .staff-info .staff-photo img { width: 130px; height: 130px; }
  .staff-info .staff-name a { font-size: 18px; }
  .single-staff-profile .staff-name { font-size: 18px; }

  .single-staff-profile.staff-info {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .single-staff-profile .staff-photo-content,
  .single-staff-profile .staff-bio {
    width: 100%;
    max-width: 100%;
  }

  .single-staff-profile .staff-photo-content {
    padding: 20px 16px 18px;
  }
}

.staff-data { padding:10px 0 0 10px; display:flex; flex-direction:column; align-items:start; flex:1 1 58.33%; }
.staff-data a { color:#333; text-decoration:none!important; font-weight: 500; }
.staff-data a:hover { color:var(--primary-color); text-decoration:none!important; }
.staff-data h4 { font-size:32px; margin:0; letter-spacing:0; margin-bottom:12px; }
.staff-data h6 { font-size:16px; margin:0; letter-spacing:-0.5px; font-weight:600; color:#777; margin-bottom:12px; }
.staff-data p { font-size:14px; line-height:16px; color:#777; margin:0; padding:0; }
.staff-data .staff-contact-info li {list-style-type: none; padding: 0; margin: 0;}
.staff-data .staff-contact-info .btn { font-size:14px; font-weight: 600; padding:2px 8px; margin-top:5px; display: flex; align-items: center; gap: 8px;
                                        background: #0066ff; color:white!important; border:none; border-radius:10px; text-decoration:none; min-height: auto; }
.staff-data .staff-contact-info .btn i { color:#aeca36; padding: 5px 0; }
.staff-contact-info { list-style-type:none; margin:0!important; padding:0!important; }
.staff-contact-info li { font-size:16px; line-height:26px; color:#777; margin:0; padding:0; }
.staff-contact-info li a { color:#777!important; text-decoration:none!important; }
.staff-contact-info li i { display:inline-block; margin:0 5px 0 0; color:#333; }

.staff-popup-content.row .staff-photo{ padding: 0 36px 0 0; border-radius:50%!important; height: auto; width: auto; }
.staff-popup-content .staff-photo > .staff-data { padding-left:0!important; max-width:none; }
.staff-popup-content >.staff-bio-content { padding:0; max-height: 60vh;  overflow: auto;}

.staff-grid.f-justify-center { justify-content: center; display: flex !important; }

.staff-grid.f-justify-center.show-vertical .card, 
.staff-grid.f-justify-center.show-vertical .staff-data,
.staff-grid.f-justify-center.show-vertical .staff-photo img { align-items: center; text-align: center;}


.staff-popup {padding: 3vh 2vh; max-height: 70vh; overflow-y:auto!important;}

/* .staff-grid.show-vertical { display: flex;} */
.show-vertical .staff-photo-content { display:flex; justify-content:space-between; flex-direction: column; height: 100%;}
.staff-grid.show-vertical .staff-data { flex:1 1 100%; max-width:100%; }
.show-vertical .staff-data { padding:10px 0 0 0!important; }
.show-vertical .staff-info { flex-direction:column; }
.show-vertical .staff-info .card { flex-direction:column; padding:0; margin:0; max-width: 100%;}
.show-vertical .staff-info .col-8 { width:100%; }
.show-vertical .staff-info .card .staff-photo,
.show-vertical .staff-info  img { height:auto; margin:0 auto; display:block; padding:0; }
.show-vertical .staff-info h6 { font-size:24px; font-weight: 500; }
.show-vertical .staff-info .btn { padding: 5px 10px; min-height: auto; font-size: 11px; }
.show-vertical .staff-info  h4,   
.show-vertical .staff-info  h6,
.show-vertical .staff-info  p { text-align:center; }
.single-staff .staff-buttons-group {display: none;}
.col-4.staff-photo {border-radius:100%;}

/* --- TABLET: min-width 481px and max-width 1024px --- */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .staff-grid { grid-template-columns: repeat(2, 50%); row-gap: 10px; }
  .staff-info .staff-name a,
  .single-staff-profile .staff-name { font-size: 20px; }
  .staff-info { flex-direction: row; }
  .staff-info .staff-data { padding: 5px 0 0 15px; }
  .staff-info .card { padding: 10px!important; margin:0; }
  .item-grid .item-info { width:48%; padding:10px; }
}

/* --- DESKTOP: min-width 1025px --- */
@media only screen and (min-width: 1025px) {
  .taxonomy-term .category-grid-thumbnails {display:block; }
  .item-grid {  padding:0; }
  .item-grid .item-info { width:23%; padding:10px; }
  .staff-grid { grid-template-columns: repeat(4,25%);row-gap: 10px;}
  .staff-info { padding:3px;        flex-direction: row; }
  .staff-info .staff-data { padding:5px 0 0 15px;}
  .staff-info .card { padding: 10px!important; margin:0; }
  
  .staff-popup-content .staff-bio-content { padding:0 20px;   overflow: auto;}
/* 	max-height: 60vh; */
  /* astra container fixes */
  .ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single, .ast-separate-container 
  .ast-author-box, .ast-separate-container .ast-404-layout-1, .ast-separate-container .no-results { padding:40px 0;}
  /* primary margin removed from top */
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary { margin:0;}
}

/* =========================
  12. glass-card styles
  ========================= */
  .glass-card {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(20px);
  z-index: -1;
}
  .glass-card-60 {  background: rgba(255, 255, 255, 0.60);  }
  .glass-card-70 {  background: rgba(255, 255, 255, 0.70);  }
  .glass-card-80 {  background: rgba(255, 255, 255, 0.80);  }

  /* date time picker adjustments for popup */
  .xdsoft_datetimepicker,
  .xdsoft_datetimepicker { z-index: 99990 !important; }


  /* custom classes for acd-counters-card */
  .acd-counters-card .acd-counter-value { line-height: .5em;}