/* =========================================================
   SMD COLLEGE — MAIN STYLESHEET
   Design tokens + components. Bootstrap 5 used for grid/
   offcanvas primitives only — no Bootstrap Navbar classes.
   ========================================================= */

:root{
  /* Brand */
  --navy:        #7A1522;      /* maroon, slightly warmer to sit near the logo's red */
  --navy-deep:   #4F0F1A;
  --red:         #8B5A2B;      /* brown accent */
  --red-deep:    #6F4520;
  --gold:        #D4AF37;      /* closer to the logo's yellow, but softer */
  --white:       #FFFFFF;
  --bg-light:    #FBF7F4;
  --ink:         #2B1A17;
  --ink-muted:   #6B5B56;
  --line:        #EADFD8;

  /* Type */
  --font-head: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --notch: 16px; /* signature clipped-corner size, echoes a certificate/seal corner */

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(122,21,34,0.07);
  --shadow-md: 0 10px 30px rgba(122,21,34,0.12);
  --shadow-lg: 0 20px 50px rgba(122,21,34,0.18);

  --transition: 0.3s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  margin: 0;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0;
}

a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display:block; }
button{ font-family: var(--font-body); cursor: pointer; }

.container-xl{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* -----------------------------------------
   SIGNATURE ELEMENT: the "seal-notch" card
   A single clipped corner (top-right) on key
   cards, echoing an embossed academic seal
   or a certificate's corner fold. Used with
   restraint — hero login card, feature cards,
   info cards, stat strip icons.
------------------------------------------ */
.seal-notch{
  clip-path: polygon(
    0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% 100%, 0 100%
  );
  position: relative;
}
.seal-notch::after{
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 var(--notch) var(--notch) 0;
  border-color: transparent var(--gold) transparent transparent;
  opacity: .85;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--red);
  display:inline-block;
}

.section-heading{
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  margin-top: 6px;
}

.divider-decor{
  width: 60px;
  height: 4px;
  background: var(--red);
  border-radius: 4px;
  margin: 14px 0 18px;
  position: relative;
}
.divider-decor::after{
  content:"";
  position:absolute;
  left: 68px; top: 0;
  width: 14px; height: 4px;
  background: var(--gold);
  border-radius: 4px;
}

/* -----------------------------------------
   TOP BAR
------------------------------------------ */
.topbar{
  background: var(--navy-deep);
  color: #e8d5d0;
  font-size: 13.5px;
  padding: 8px 0;
}
.topbar .container-xl{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar-left, .topbar-center, .topbar-right{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-wrap: wrap;
}
.topbar a{ color:#e8d5d0; transition: color var(--transition); }
.topbar a:hover{ color: var(--white); }
.topbar-item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item i{ color: var(--gold); font-size: 12px; }
.topbar-social{ display:flex; gap:10px; margin-left: 6px; }
.topbar-social a{
  width: 26px; height:26px;
  border-radius:50%;
  background: rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px;
  transition: var(--transition);
}
.topbar-social a:hover{ background: var(--red); transform: translateY(-2px); }

@media (max-width: 991px){
  .topbar-center{ display:none; }
}
@media (max-width: 767px){
  .topbar{ font-size:12px; }
  .topbar-left{ order:1; }
  .topbar-right{ order:2; }
  .topbar .container-xl{ justify-content:center; text-align:center; }
}

/* -----------------------------------------
   MAIN HEADER
------------------------------------------ */
.main-header{
  background: var(--white);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.main-header .container-xl{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.brand-block{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 0;
}
.brand-logo{
  height: 84px;
  flex-shrink: 0;
}
.brand-text .brand-name{
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .01em;
  line-height:1.15;
  text-transform:uppercase;
}
.brand-text .brand-affil{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red);
  margin-top: 4px;
}
.brand-text .brand-address{
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.header-info{
  display:flex;
  align-items:center;
  gap: 12px;
  white-space: nowrap;
}
.header-info-icon{
  width: 44px; height:44px;
  border-radius:50%;
  background: #f6e6e0;
  display:flex; align-items:center; justify-content:center;
  color: var(--navy);
  font-size: 18px;
  flex-shrink:0;
}
.header-info-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.header-info-sub{
  font-size: 12.5px;
  color: var(--ink-muted);
}

.btn-portal{
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: none;
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(139,90,43,0.28);
  transition: var(--transition);
}
.btn-portal:hover{
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(139,90,43,0.36);
  color: var(--white);
}

@media (max-width: 1199px){
  .header-info.hide-lg{ display:none; }
}
@media (max-width: 991px){
  .main-header .container-xl{ flex-wrap: wrap; justify-content:center; text-align:center; }
  .brand-block{ justify-content:center; }
}
@media (max-width: 480px){
  .brand-logo{ height:58px; }
  .brand-text .brand-name{ font-size:19px; }
}

/* -----------------------------------------
   NAVIGATION
------------------------------------------ */
.main-nav{
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.nav-left{ display:flex; }
.nav-left > ul{
  display:flex;
  list-style:none;
  margin:0; padding:0;
}
.nav-left > ul > li{ position:relative; }
.nav-left > ul > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 17px 20px;
  color: #f3e6e2;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 500;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}
.nav-left > ul > li > a i{ font-size: 10px; margin-top:1px; }
.nav-left > ul > li:hover > a,
.nav-left > ul > li.active > a{
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-bottom-color: var(--gold);
}

/* Dropdowns — unlimited nesting, hover-intent handled in JS */
.dropdown-menu-custom{
  position:absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg);
  list-style:none;
  margin:0; padding: 8px;
  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 1001;
}
.nav-left li.dropdown-open > .dropdown-menu-custom{
  opacity:1; visibility:visible; transform: translateY(0);
}
.dropdown-menu-custom li{ position:relative; }
.dropdown-menu-custom li a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 14px;
  border-radius: 8px;
  transition: var(--transition);
}
.dropdown-menu-custom li a:hover{ background: var(--bg-light); color: var(--red); }
.dropdown-menu-custom .dropdown-menu-custom{
  top: 0;
  left: 100%;
  border-radius: var(--radius-sm);
}
.dropdown-menu-custom.flip{ left:auto; right:0; }
.dropdown-menu-custom .dropdown-menu-custom.flip{ left:auto; right:100%; }

.nav-cta{ display:flex; align-items:center; }
.nav-btn-toggle{
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 22px;
  padding: 12px 20px;
  display:none;
}

@media (max-width: 991px){
  .nav-left{ display:none; }
  .nav-btn-toggle{ display:block; }
  .nav-inner{ justify-content:space-between; }
  .nav-brand-mobile{
    display:flex; align-items:center; gap:10px;
    padding: 12px 20px;
    color: var(--white);
    font-family: var(--font-head);
    font-weight:600;
    font-size: 15px;
  }
  .nav-brand-mobile img{ width:32px; height:32px; border-radius:50%; }
}
@media (min-width: 992px){
  .nav-brand-mobile{ display:none; }
}

/* Offcanvas accordion (mobile) */
.offcanvas-rupahi{ width: min(340px, 88vw); background: var(--navy-deep); }
.offcanvas-rupahi .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,0.1); }
.offcanvas-rupahi .offcanvas-title{ color:var(--white); font-family:var(--font-head); font-weight:600; }
.offcanvas-rupahi .btn-close{ filter: invert(1); }
.mobile-accordion{ list-style:none; margin:0; padding: 10px; }
.mobile-accordion li{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-accordion > li > a,
.mobile-accordion .m-toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 10px;
  color: #f3e6e2;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
}
.mobile-accordion .m-toggle i{ transition: transform var(--transition); font-size:12px; }
.mobile-accordion li.open > .m-toggle i{ transform: rotate(90deg); }
.mobile-submenu{
  list-style:none; margin:0; padding: 0 0 8px 14px;
  max-height:0; overflow:hidden;
  transition: max-height .3s ease;
}
.mobile-submenu a{ display:block; padding: 10px; color:#d9bfb8; font-size:14px; }
.mobile-submenu a:hover{ color: var(--white); }

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero{
  display:flex;
  min-height: 600px;
  background: var(--white);
}
.hero-left{
  width: 33%;
  display:flex;
  align-items:center;
  padding: 60px 56px;
  background: var(--white);
}
.hero-left-inner{ max-width: 460px; }
.hero-kicker{
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.hero-title{
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
  color: var(--navy);
}
.hero-title span{ color: var(--red); }
.hero-tagline{
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}
.hero-tagline em{ font-style: normal; color: var(--red); }
.hero-about-heading{
  margin-top: 22px;
  font-size: 19px;
  font-weight: 700;
}
.hero-about-text{
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.75;
  text-align:justify;
}
.btn-primary-red{
  margin-top: 26px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border:none;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}
.btn-primary-red:hover{
  background: var(--red);
  transform: translateY(-3px);
  color: var(--white);
}
.btn-primary-red i{ transition: transform var(--transition); }
.btn-primary-red:hover i{ transform: translateX(4px); }

.hero-right{
  width: 67%;
  position: relative;
  min-height: 600px;
}
.hero-slider{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item{ height:100%; }
.hero-slider .carousel-item img{
  width:100%; height:100%; object-fit:cover;
}
/* Blend the left edge of the slider into the white welcome panel */
.hero-slider::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    #ffffff 0%,
    rgba(255,255,255,0.85) 6%,
    rgba(255,255,255,0.0) 22%);
  z-index: 3;
  pointer-events:none;
}
.hero-slider::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(122,21,34,0.35) 0%, rgba(122,21,34,0) 35%);
  z-index: 2;
  pointer-events:none;
}
.hero-slider .carousel-indicators{ z-index:4; margin-bottom: 1.6rem; }
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{ z-index:4; width:6%; }

/* Floating staff login card — overlaps ONLY the slider */
.staff-login-card{
  position:absolute;
  z-index: 5;
  top: 130px;
  left: 40px;
  width: 300px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px 22px;
}
.staff-login-card .login-title{
  font-size: 18px;
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:9px;
}
.staff-login-card .login-title i{ color: var(--red); }
.login-field{ position:relative; margin-top: 16px; }
.login-field i{
  position:absolute; left:14px; top:50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: 14px;
}
.login-field input{
  width:100%;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--bg-light);
  transition: var(--transition);
}
.login-field input:focus{
  outline:none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(122,21,34,0.1);
}
.login-remember{
  display:flex; align-items:center; gap:8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-muted);
}
.login-remember input{ accent-color: var(--navy); }
.btn-login{
  width:100%;
  margin-top: 16px;
  background: var(--navy);
  color: var(--white);
  border:none;
  padding: 13px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-weight:600;
  font-size: 14.5px;
  transition: var(--transition);
}
.btn-login:hover{ background: var(--navy-deep); }
.login-forgot{
  display:block;
  text-align:center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
}
.login-forgot:hover{ text-decoration:underline; }

@media (max-width: 1199px){
  .hero-left{ padding: 50px 40px; }
  .staff-login-card{ left: 30px; width: 280px; }
}

@media (max-width: 991px){
  .hero{ flex-direction:column; min-height:auto; }
  .hero-left, .hero-right{ width:100%; }
  .hero-left{ padding: 44px 30px 34px; text-align:center; }
  .hero-left-inner{ margin:0 auto; }
  .hero-about-text{ text-align:left; }
  .hero-right{ min-height: 380px; height: 380px; }
  .hero-slider::before{ display:none; }
  .staff-login-card{
    display:none;
  }
  .hero-right{ order:1; }
  .hero-right-wrap{ display:flex; flex-direction:column; }
}
@media (max-width: 575px){
  .hero-right{ height: 300px; }
  .hero-left{ padding: 36px 20px 28px; }
}

/* =========================================================
   FEATURES SECTION
   ========================================================= */
.features{
    padding:70px 0;
    background:var(--white);
}

.feature-card{
    background:var(--bg-light);
    border-radius:var(--radius);
    padding:30px 26px;
    height:100%;
    transition:var(--transition);
    border:1px solid transparent;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-md);
    background:var(--white);
    border-color:var(--line);
}

.feature-top{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.feature-icon{
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:50%;
    background:rgba(139,90,43,.12);
    color:var(--red);
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    margin-bottom:0;
}

.feature-card:hover .feature-icon{
    background:var(--red);
    color:#fff;
    transform:rotate(-8deg) scale(1.05);
}

.feature-top h4{
    margin:0;
    font-size:20px;
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.feature-card p{
    margin:0;
    font-size:14px;
    color:var(--ink-muted);
    line-height:1.7;
}

/* =========================================================
   INFORMATION SECTION (News / Principal / Departments)
   ========================================================= */
.info-section{ padding: 20px 0 70px; background: var(--white); }
.info-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.info-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.info-card-head h5{ font-size: 17px; display:flex; align-items:center; gap:9px; }
.info-card-head h5 i{ color: var(--red); }
.btn-view-all{
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-head);
  background: var(--red);
  color: var(--white);
  padding: 7px 14px;
  border-radius: 20px;
  white-space:nowrap;
}
.btn-view-all:hover{ background: var(--red-deep); color:var(--white); }

.notice-list{ list-style:none; margin:0; padding: 8px 12px; flex:1; }
.notice-list li{
  display:flex; align-items:center; gap: 14px;
  padding: 12px 10px;
  border-bottom: 1px dashed var(--line);
}
.notice-list li:last-child{ border-bottom:none; }
.notice-date{
  background: var(--bg-light);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  text-align:center;
  border-radius: 8px;
  padding: 6px 9px;
  line-height:1.2;
  flex-shrink:0;
}
.notice-date span{ display:block; font-size: 14px; }
.notice-list a{ font-size: 14px; flex:1; transition: color var(--transition); }
.notice-list li:hover a{ color: var(--red); }
.notice-list li i{ color: var(--ink-muted); font-size:12px; }

.principal-card{
  background: var(--navy);
  color: #f3e6e2;
  padding: 30px 26px;
}
.principal-quote-icon{ color: var(--gold); font-size: 26px; }
.principal-msg{ font-size: 14.5px; line-height:1.8; margin: 14px 0 20px; color:#e3cdc7; }
.principal-photo-row{ display:flex; align-items:center; gap:16px; margin-top:auto; padding-top:16px; border-top: 1px solid rgba(255,255,255,0.12);}
.principal-photo{
  width: 64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border: 2px solid var(--gold);
}
.principal-name{ font-weight:700; color: var(--white); font-size:15px; }
.principal-role{ font-size:12.5px; color:#cfb0a8; }

.dept-list{ list-style:none; margin:0; padding: 10px 12px; flex:1; }
.dept-list li a{
  display:flex; align-items:center; gap:12px;
  padding: 11px 10px;
  font-size: 14px;
  border-bottom: 1px dashed var(--line);
  transition: var(--transition);
}
.dept-list li:last-child a{ border-bottom:none; }
.dept-list li a:hover{ color: var(--red); padding-left:14px; }
.dept-list li i:first-child{ color: var(--navy); width:18px; text-align:center; }
.dept-list li a i:last-child{ margin-left:auto; color: var(--ink-muted); font-size:11px; }
.btn-dept-all{
  margin: 12px; margin-top:auto;
  background: var(--navy);
  color: var(--white);
  text-align:center;
  padding: 12px;
  border-radius: 9px;
  font-family: var(--font-head);
  font-weight:600;
  font-size: 13.5px;
  transition: var(--transition);
}
.btn-dept-all:hover{ background: var(--navy-deep); color:var(--white); }

/* =========================================================
   STATISTICS STRIP  (photo fades in from the right)
   ========================================================= */
.stats-strip{
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: var(--navy-deep);
}

/* --- Campus photo, full bleed --- */
.stats-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--stats-bg, url("images/smd.jpg")) center/cover no-repeat;
  opacity: .85;
}

/* --- Maroon wash: solid on the left, fades out on the right --- */
.stats-strip::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(79, 15, 26, .98) 0%,
    rgba(79, 15, 26, .92) 35%,
    rgba(79, 15, 26, .72) 65%,
    rgba(79, 15, 26, .48) 100%);
}

.stats-strip .container-xl{
  position: relative;
  z-index: 1;
}

/* --- Stat item: no card, no borders, just content --- */
.stat-item{
  text-align: center;
  color: var(--white);
}

.stat-icon{
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 12px;
}

.stat-number{
  font-family: var(--font-head);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.stat-label{
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .05em;
  color: rgba(240, 224, 220, .9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* --- Mobile --- */
@media (max-width: 767px){
  .stats-strip{ padding: 56px 0; }
  .stat-icon{ font-size: 24px; margin-bottom: 8px; }
}

/* =========================================================
   GENERIC CONTENT SECTIONS
   ========================================================= */
.section-pad{ padding: 70px 0; }
.section-light{ background: var(--bg-light); }
.section-head-center{ text-align:center; margin-bottom: 44px; }
.section-head-center .divider-decor{ margin-left:auto; margin-right:auto; }
.section-head-center .divider-decor::after{ left: 50%; margin-left: 4px; }

/* About */
.about-media{ position:relative; }
.about-media img{ border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about-media-badge{
  position:absolute; bottom:-22px; right:-22px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-align:center;
  box-shadow: var(--shadow-lg);
}
.about-media-badge .num{ font-family:var(--font-head); font-size:26px; font-weight:700; }
.about-media-badge .lbl{ font-size:11.5px; }
.about-list{ list-style:none; margin: 20px 0; padding:0; }
.about-list li{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; font-size:14.5px; }
.about-list li i{ color: var(--red); margin-top:4px; }

/* News / Events cards */
.card-basic{
  background:var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  height:100%;
  transition: var(--transition);
}
.card-basic:hover{ transform:translateY(-6px); box-shadow: var(--shadow-md); }
.card-basic img{ height: 190px; width:100%; object-fit:cover; }
.card-basic-body{ padding: 20px; }
.card-tag{
  display:inline-block;
  font-size: 11px; font-weight:700;
  font-family: var(--font-head);
  color: var(--red);
  background: rgba(139,90,43,0.1);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.card-basic-body h5{ font-size: 16.5px; line-height:1.4; }
.card-meta{ font-size:12.5px; color: var(--ink-muted); margin-top:10px; display:flex; gap:14px; }
.card-meta i{ color: var(--navy); margin-right:4px; }

/* Events date block */
.event-date-block{
  width:64px; flex-shrink:0;
  background: var(--navy);
  color:var(--white);
  border-radius: 10px;
  text-align:center;
  padding: 10px 0;
  font-family: var(--font-head);
}
.event-date-block .d{ font-size:22px; font-weight:700; line-height:1; }
.event-date-block .m{ font-size:11px; text-transform:uppercase; }
.event-row{
  display:flex; gap:16px; align-items:flex-start;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line);
}
.event-row:last-child{ border-bottom:none; }
.event-row h6{ font-size:15px; font-weight:700; color:var(--navy); }
.event-row p{ font-size:13px; color:var(--ink-muted); margin: 4px 0 0; }

/* Academic highlights */
.highlight-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  text-align:center;
  height:100%;
  border: 1px solid var(--line);
  transition: var(--transition);
}
.highlight-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.highlight-icon{
  width:56px;height:56px;
  border-radius:16px;
  background: var(--navy);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  margin: 0 auto 16px;
  font-size:22px;
}

/* Gallery */
.gallery-item{
  position:relative;
  border-radius: var(--radius-sm);
  overflow:hidden;
  height: 220px;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(122,21,34,0.85), transparent 60%);
  display:flex; align-items:flex-end;
  padding: 14px;
  opacity:0; transition: var(--transition);
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:var(--white); font-size:13px; font-weight:600; }

/* Achievements */
.achieve-card{
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 26px;
  height:100%;
  display:flex; gap:16px;
}
.achieve-icon{
  width:50px;height:50px;flex-shrink:0;
  border-radius:50%;
  background: rgba(212,175,55,0.18);
  color: var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.achieve-card h6{ font-size:15px; font-weight:700; }
.achieve-card p{ font-size:13px; color:var(--ink-muted); margin:4px 0 0; }

/* Testimonials */
.testimonial-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  height:100%;
}
.testimonial-stars{ color: var(--gold); font-size:13px; margin-bottom:12px; }
.testimonial-text{ font-size:14px; color:var(--ink-muted); line-height:1.75; font-style:italic; }
.testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.testimonial-person img{ width:46px;height:46px;border-radius:50%; object-fit:cover; }
.testimonial-person .name{ font-weight:700; font-size:14px; }
.testimonial-person .role{ font-size:12px; color: var(--ink-muted); }

/* Important links */
.link-chip{
  display:flex; align-items:center; gap:12px;
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size:14px;
  font-weight:600;
  color: var(--navy);
  transition: var(--transition);
  height:100%;
}
.link-chip i:first-child{ color: var(--red); }
.link-chip i:last-child{ margin-left:auto; color:var(--ink-muted); font-size:12px; }
.link-chip:hover{ border-color: var(--navy); background: var(--navy); color:var(--white); transform: translateY(-3px); }
.link-chip:hover i{ color: var(--white); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--navy-deep); color:#d9bfb8; padding-top: 60px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand img{ width:52px; border-radius:50%; background:#fff; padding:2px; }
.footer-brand span{ font-family:var(--font-head); font-weight:700; color:var(--white); font-size:18px; }
.site-footer p{ font-size:13.5px; line-height:1.8; }
.site-footer h6{ color:var(--white); font-family:var(--font-head); font-size:15px; margin-bottom:18px; position:relative; padding-bottom:10px; }
.site-footer h6::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; background:var(--gold); border-radius:3px; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ font-size:13.5px; color:#d9bfb8; transition: var(--transition); display:flex; align-items:center; gap:8px; }
.footer-links a:hover{ color:var(--white); padding-left:4px; }
.footer-links a i{ font-size:10px; color: var(--gold); }
.footer-contact li{ display:flex; gap:10px; margin-bottom:14px; font-size:13.5px; }
.footer-contact i{ color: var(--gold); margin-top:3px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  background: rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  transition: var(--transition);
}
.footer-social a:hover{ background: var(--red); transform: translateY(-3px); }
.footer-bottom{
  margin-top: 44px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align:center;
  font-size: 12.5px;
}
.footer-bottom a{ color: var(--gold); }

/* Utility animation classes (JS toggles .in-view) */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 767px){
  .section-pad{ padding: 50px 0; }
  .about-media-badge{ right:8px; bottom:-16px; padding:12px 16px; }
}


/* =========================================================
   NOTICE / TENDER TOGGLE TABS
   ========================================================= */
.toggle-tabs{
  display:inline-flex;
  background: var(--bg-light);
  border-radius: 30px;
  padding: 4px;
  gap: 3px;
}
.toggle-tab{
  border:none;
  background:transparent;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 7px 15px;
  border-radius: 30px;
  transition: var(--transition);
  white-space: nowrap;
}
.toggle-tab.active{
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(139,90,43,.28);
}
.toggle-tab:hover:not(.active){ color: var(--navy); }

/* fade-in for the panel that swaps in */
.notice-list.tab-panel-anim{ animation: fadeSwap .32s ease both; }
@keyframes fadeSwap{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: none; }
}

/* =========================================================
   PRINCIPAL CARD — PREMIUM (full-height photo)
   ========================================================= */
.principal-card-wide{
  display: flex;
  padding: 0;                         /* photo runs edge to edge */
  background:
    radial-gradient(circle at 92% 10%, rgba(212,175,55,.14), transparent 42%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: none;
}
.principal-layout{
  display: flex;
  align-items: stretch;               /* photo column matches card height */
  width: 100%;
}

/* ---------- Photo column ---------- */
.principal-media{
  position: relative;
  flex: 0 0 280px;
  min-height: 420px;
  overflow: hidden;
  border-right: 4px solid var(--gold);
}
.principal-photo-lg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;        /* keeps the face in frame */
  display: block;
}

/* ---------- Nameplate over the photo ---------- */
.principal-nameplate{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 90px 20px 22px;
  text-align: center;
  background: linear-gradient(to top, rgba(79, 15, 26, .96) 0%, rgb(79 15 26 / 60%) 36%, transparent 100%);
}
.principal-media .principal-name{
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
.principal-qual{
  font-size: 12.5px;
  color: #e3cdc7;
  margin-top: 3px;
}
.principal-media .principal-role{
  display: inline-block;
  margin-top: 12px;
  padding: 5px 16px;
  border-radius: 50px;
  background: rgba(212,175,55,.16);
  border: 1px solid rgba(212,175,55,.6);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.principal-media .principal-college{
  font-size: 12.5px;
  color: #d9bfb8;
  margin-top: 9px;
}

/* ---------- Message column ---------- */
.principal-body{
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.principal-quote-icon{               /* faded watermark */
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 110px;
  color: var(--gold);
  opacity: .10;
  pointer-events: none;
}

/* Header block */
.principal-head{ position: relative; }
.principal-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.principal-eyebrow::before{
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
}
.principal-heading{
  margin-top: 8px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
.principal-rule{
  width: 60px;
  height: 3px;
  margin: 14px 0 20px;
  border-radius: 3px;
  background: var(--gold);
}

.principal-body .principal-msg{
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.85;
  color: #f0e0dc;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align:justify;
}

/* ---------- Button ---------- */
.principal-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border: 1.5px solid var(--gold);
  border-radius: 50px;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
  transition: var(--transition);
}
.principal-link i{ transition: transform var(--transition); }
.principal-link:hover{
  background: var(--gold);
  color: var(--navy-deep);
}
.principal-link:hover i{ transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .principal-media{ flex-basis: 230px; }
  .principal-body{ padding: 32px 30px; }
}
@media (max-width: 767px){
  .principal-layout{ flex-direction: column; }
  .principal-media{
    flex: none;
    width: 100%;
    height: 380px;
    min-height: 0;
    border-right: none;
    border-bottom: 4px solid var(--gold);
  }
  .principal-photo-lg{ object-position: center 20%; }
  .principal-body{ padding: 30px 22px 32px; text-align: center; }
  .principal-eyebrow{ justify-content: center; }
  .principal-rule{ margin-left: auto; margin-right: auto; }
  .principal-quote-icon{ right: 50%; transform: translateX(50%); top: 10px; }
  .principal-body .principal-msg{ -webkit-line-clamp: 6; text-align: left; }
}

/* =========================================================
   SECTION HEAD WITH CAROUSEL CONTROLS
   ========================================================= */
.section-head-flex{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.section-head-flex .section-heading{ margin-top: 6px; }
.section-controls{ display:flex; gap: 10px; }
.ctrl-btn{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 15px;
  display:flex; align-items:center; justify-content:center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.ctrl-btn:hover:not(:disabled){
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
.ctrl-btn:disabled{ opacity:.4; cursor:not-allowed; }

.btn-outline-navy{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 13px 30px;
  border: 2px solid var(--navy);
  color: var(--navy);
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  transition: var(--transition);
}
.btn-outline-navy:hover{
  background: var(--navy);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}


/* =========================================================
   QUICK LINKS
   ========================================================= */
.quicklinks{
  padding: 60px 0 70px;
  background: var(--white);
}

.ql-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 576px){
  .ql-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ql-btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 16px;
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
  transition: var(--transition);
}
.ql-btn::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  transition: width .35s ease;
}
.ql-btn:hover{
  transform: translateY(-6px);
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.ql-btn:hover::before{ width: 100%; }

.ql-ico{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(139, 90, 43, .12);
  color: var(--red);
  font-size: 20px;
  transition: var(--transition);
}
.ql-btn:hover .ql-ico{
  background: var(--navy);
  color: var(--gold);
  transform: scale(1.08);
}

.ql-label{
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}

/* =========================================================
   CAROUSEL TRACK (shared by events + achievements)
   ========================================================= */
.pager-track{
  --gap: 24px;
  --per-view: 1;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the hover lift + shadow, cancelled out by the negative margin */
  padding: 12px 4px 28px;
  margin: -12px -4px -28px;
}
.pager-track::-webkit-scrollbar{ display: none; }
/* set by JS when every slide already fits: center them, arrows are hidden */
.pager-track.is-few{ justify-content: center; }

.pager-slide{
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
  min-width: 0;
}
.pager-slide > .evt-card,
.pager-slide > .media-card{ height: 100%; }

@media (min-width: 768px){ .pager-track{ --per-view: 2; } }
@media (min-width: 992px){ .pager-track{ --per-view: 3; } }


/* =========================================================
   EVENT CARDS  (same look as .media-card)
   ========================================================= */
.evt-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.evt-card:hover{
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
/* the form fills the card so the buttons sit at the bottom */
.evt-card form{
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
}
.evt-card--plain .evt-card__body{ padding-bottom: 24px; }

/* image + date badge */
.evt-card__img{
  position: relative;
  height: 210px;
  overflow: hidden;
  flex-shrink: 0;
}
.evt-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
/* achievements: keep faces in frame */
.evt-card--plain .evt-card__img img{ object-position: center 15%; }
.evt-card:hover .evt-card__img img{ transform: scale(1.08); }
.evt-card__img::after{               /* soft fade at the bottom of the photo */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(79,15,26,.35), transparent);
  pointer-events: none;
}

/* date badge on event photos */
.date-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  font-family: var(--font-head);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.date-badge .d{ display: block; font-size: 20px; font-weight: 700; }
.date-badge .m{ display: block; font-size: 11px; text-transform: uppercase; margin-top: 3px; }

/* body */
.evt-card__body{
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.evt-card__date{
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy);
  background: rgba(122,21,34,.07);
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.evt-card__date i{ color: var(--red); margin-right: 6px; }

.evt-card__title{
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
  color: var(--navy-deep);
  transition: color var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evt-card:hover .evt-card__title{ color: var(--red); }

.evt-card__desc{
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 10px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* actions */
.evt-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}
.evt-card__body > .evt-card__title + .evt-card__actions,
.evt-card__desc + .evt-card__actions{
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.evt-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 10px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.evt-card__btn:hover{
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}
.evt-card__btn--outline{
  background: transparent;
  color: var(--navy);
}
.evt-card__btn--outline:hover{
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* empty / error state */
.evt-empty{
  text-align: center;
  padding: 56px 24px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.evt-empty .icon{ font-size: 40px; display: block; margin-bottom: 10px; }
.evt-empty h3{ font-size: 18px; color: var(--navy-deep); margin: 0 0 6px; }
.evt-empty p{ font-size: 13.5px; color: var(--ink-muted); margin: 0; }


/* =========================================================
   PHOTO GALLERY — UNIFORM GRID
   1 col mobile · 2 tablet · 3 desktop, every tile 4:3
   ========================================================= */
.gal-masonry{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 576px){ .gal-masonry{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .gal-masonry{ grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.gal-item{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 6px 18px rgba(122,21,34,.10);
  transition: var(--transition);
  cursor: zoom-in;
}
.gal-item:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.gal-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.gal-item:hover img{ transform: scale(1.1); }

/* caption slides up over a maroon fade */
.gal-caption{
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 20px 18px;
  background: linear-gradient(to top, rgba(79,15,26,.92), rgba(79,15,26,0));
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.gal-caption span{
  display: block;
  border-left: 3px solid var(--gold);
  padding-left: 10px;
}
.gal-item:hover .gal-caption,
.gal-item:focus-visible .gal-caption{
  transform: translateY(0);
  opacity: 1;
}

/* round zoom icon, top right */
.gal-zoom{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  transform: scale(.6);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.gal-item:hover .gal-zoom{
  transform: scale(1);
  opacity: 1;
}

/* touch screens have no hover: keep the caption visible */
@media (hover: none){
  .gal-caption{ transform: none; opacity: 1; }
  .gal-zoom{ display: none; }
}


/* =========================================================
   LIGHTBOX
   ========================================================= */
.gal-lb{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(79,15,26,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 64px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.gal-lb.is-open{ opacity: 1; visibility: visible; }

.gal-lb__fig{
  margin: 0;
  max-width: 100%;
  text-align: center;
}
.gal-lb__fig img{
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gal-lb__fig figcaption{
  margin-top: 14px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
}

.gal-lb__close,
.gal-lb__nav{
  position: absolute;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
}
.gal-lb__close:hover,
.gal-lb__nav:hover{ background: var(--red); }
.gal-lb__close{ top: 20px; right: 20px; }
.gal-lb__nav{ top: 50%; transform: translateY(-50%); }
.gal-lb__prev{ left: 12px; }
.gal-lb__next{ right: 12px; }

@media (max-width: 575px){
  .gal-lb{ padding: 24px 12px 80px; }
  .gal-lb__nav{ top: auto; bottom: 20px; transform: none; }
  .gal-lb__prev{ left: calc(50% - 56px); }
  .gal-lb__next{ right: calc(50% - 56px); }
}