/**
 * Project custom styles
 * Home: section snap scroll, header height, hero slider, counters, course finder, tab blur
 */
:root {
  --section-header-height: 66px;
}

.bg-dark-red {
  background-color: #ae1e16 !important;
}

/* ========== Home section snap scroll ========== */
html.home-snap-scroll {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: var(--section-header-height);
}

body.home-snap-scroll {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--section-header-height);
}

.home-sections {
  padding-top: var(--section-header-height);
}

.home-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - var(--section-header-height));
  min-height: calc(100dvh - var(--section-header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem !important;
  box-sizing: border-box;
}

.home-section-inner {
  width: 100%;
  max-width: 100%;
}

/* Section 1 only: full viewport under transparent header */
.home-section:first-child {
  margin-top: calc(-1 * var(--section-header-height));
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  padding: 0 !important;
  display: block;
}

.home-snap-footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - var(--section-header-height));
}

@media (max-width: 991px) {
  :root {
    --section-header-height: 66px;
  }
  .home-section {
    padding: 1.5rem 1rem !important;
  }
}

@media (max-width: 767px) {
  html.home-snap-scroll,
  body.home-snap-scroll {
    scroll-snap-type: none;
    scroll-padding-top: 0;
  }
  :root {
    --section-header-height: 58px;
  }
  .home-section {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    min-height: auto;
    padding: 2rem 1rem !important;
  }
  .home-section:first-child {
    margin-top: calc(-1 * var(--section-header-height));
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
  }
  .home-snap-footer {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    min-height: auto;
  }
}

@media (max-width: 375px) {
  .home-section {
    padding: 1.5rem 0.75rem !important;
  }
}

/* ========== Hero slider: square pagination ========== */
.hero-square-pagination-dots {
  bottom: 70px !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.hero-square-pagination-dots .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 8px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  opacity: 1 !important;
  transition: background 0.3s, border-color 0.3s, transform 0.3s !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.hero-square-pagination-dots .swiper-pagination-bullet:hover {
  opacity: 0.9;
}

.hero-square-pagination-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--base-color) !important;
  border-color: var(--base-color) !important;
  transform: scale(1.1);
}

/* ========== Course finder: tabs + Find A Course (section-2) ========== */
.course-finder-box {
  background: rgba(0, 0, 0, 0.4);
}

.course-finder-tabs {
  display: flex;
  width: 100%;
  gap: 0;
  list-style: none;
  padding-left: 0;
}

.course-finder-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.course-finder-tabs .nav-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 0;
  border-bottom: 3px solid var(--base-color);
  font-size: 16px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  margin: 0;
}

.course-finder-tabs .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.course-finder-tabs .nav-link.active {
  background: var(--base-color);
  color: #fff !important;
  border-bottom-color: var(--base-color);
}

.course-finder-box .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.course-finder-box .form-control:focus {
  background: transparent;
  color: #fff;
  border-color: var(--base-color);
  box-shadow: 0 0 0 0.2rem rgba(174, 30, 22, 0.35);
}

.course-finder-box .btn-base-color {
  background-color: var(--base-color);
  color: #fff;
  border-color: var(--base-color);
}

.course-finder-box .btn-base-color:hover {
  filter: brightness(1.1);
  color: #fff;
  border-color: var(--base-color);
}

@media (max-width: 575px) {
  .course-finder-tabs .nav-link {
    font-size: 14px;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* From https://css.glass */
.tab-content-base-blur {
  /* background: rgba(218, 37, 28, 0.2); */
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(218, 37, 28, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(218, 37, 28, 0.5);
}

/* Study at Gardi: only active tab has base-color background */
.tab-bar-study-at-gardi .nav-link.active {
  background-color: var(--base-color) !important;
  color: #fff !important;
  border-color: transparent;
}
/* When tab is active, top border (tab-border) is base-color */
.tab-bar-study-at-gardi .nav-link.active .tab-border {
  background: var(--base-color) !important;
}

/* ========== Section 4: background image slider ========== */
#section-4 .section-4-bg-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#section-4 .section-4-bg-swiper .swiper-slide {
  height: 100%;
}

#section-4 .section-4-bg-swiper .cover-background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#section-4 .section-4-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

/* Section 4: no vertical padding so sidebar can be true full height */
#section-4.home-section {
  align-items: stretch;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#section-4 .home-section-inner.section-4-inner {
  min-height: 100%;
  align-items: stretch;
}
#section-4 .section-4-main {
  flex: 1 1 0;
  min-width: 0;
}
@media (min-width: 992px) {
  #section-4 .section-4-main {
    margin-right: 33.333333%;
    padding-right: 1.5rem;
  }
}

/* Section 4: right sidebar – absolute, full height from section top to bottom, black 50% opacity */
.section-4-sidebar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 33.333333%;
  max-width: 420px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.section-4-sidebar-inner {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min-content;
}

.section-4-sidebar-item {
  padding-left: 0;
  padding-right: 0;
}

.section-4-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-4-sidebar-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.section-4-sidebar-text {
  font-size: 1rem;
  line-height: 1.35;
}

.section-4-sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  #section-4 .home-section-inner.section-4-inner {
    flex-direction: column;
  }
  #section-4 .section-4-main {
    margin-right: 0;
    padding-right: 1rem;
  }
  .section-4-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    min-height: auto;
    margin-top: 1rem;
  }
  .section-4-sidebar-inner {
    min-height: auto;
  }
}