/**
Theme Name: PEC-child
Author: Veerendra Tikhe
Author URI: https://v-render.com/
Description: Childtheme for PEC made over Astra
Version: 1.0.0
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
*/
:root { --black: #333; --white: #fafafa; --blue:#009ddd; --primary-color: #013768; --input-bg-color: #EFEFEF; }
/* =========================
  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:#00000030 2px 2px 4px; }
.white .black { background-color:#fff!important; color:#000!important; padding:10px; }
.white .black a { color:#000!important; text-decoration:none; }
.black { background-color:#000; 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 #000;outline-offset:2px;}
.btn-outline{color:white;background:transparent;border-color:white;}
.btn-outline:hover{background:white;color:#000;}
.btn-primary{color:#000;background:#ffd700;border-color:#ffd700;}
.btn-primary:hover{background:#e6c200;border-color:#e6c200;}
.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;}

/* --- 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%;}
.staff-grid { display:grid; padding:0; margin:0; grid-template-columns: repeat(1, 100%); row-gap: 10px; justify-content: space-between; align-content: space-between; }
.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;}
.staff-info .card { background-color:#fff; margin:0px; flex-direction:row; border:none; padding:5px; margin:0 auto }
.staff-info .staff-photo {height:auto; display:block; overflow: hidden; }
.staff-info .staff-photo img {/*min-width: 50px; max-width:200px; */ border-radius: 50%; display: block;}
.staff-data { padding:10px 0 0 10px; display:flex; flex-direction:column; align-items:start; flex:1 1 58.33%; }
.staff-data a { color:#000; 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:#000; }

.staff-popup-content.row .staff-photo{ padding: 0 36px 0 0; border-radius:0; 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;}
.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; min-width:auto; width:100%; }
.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 .card img { height:auto; margin:0; display:block; }
.show-vertical .staff-info .card h4 { font-size:24px; font-weight: 500; }
.show-vertical .staff-info .card h4, .show-vertical .staff-info .card h6, .show-vertical .staff-info .card p { text-align:center; }
.col-4.staff-photo {border-radius:0;}

/* --- 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 { 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 { display:flex; flex-wrap:wrap; padding:0; }
  .item-grid .item-info { width:23%; padding:10px; }
  .staff-grid { grid-template-columns: repeat(3,33%);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; }