/**
 * Platforma CSS - Custom Components & Utilities
 *
 * This file contains custom components extracted from the Platforma template
 * that extend Bootstrap functionality with additional utilities.
 *
 * Components included:
 * - Custom list styles (checkmark and numbered lists)
 * - Caret/chevron utilities for collapsible elements
 * - Swiper carousel base styles
 * - Image aspect ratio utilities
 * - Section break utility
 */


/* ========================================================================
   CUSTOM LIST STYLES
   ======================================================================== */

/**
 * Custom unordered list with checkmark bullets
 * Usage: <ul class="custom-list">
 */
ul.custom-list {
  padding-left: 1.875rem;
}

ul.custom-list li {
  list-style: none;
}

ul.custom-list li::before {
  content: '';
  position: absolute;
  border: 0.125rem solid;
  border-radius: 50%;
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMSA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoIiBmaWxsPSIjMDAwMDAwIiBwb2ludHM9IjMuOTU1Mzg0MTUgNS4zMTA2OTMzNyA5LjI1NDMzOTI2IDAgMTAuMzE2MTcyMyAxLjA1OTQ4NjA0IDMuOTU2ODgyMDIgNy40MzI4NjMzOSAwIDMuNDc4Mzk2NDYgMS4wNjAzMzYzNCAyLjQxNzQxMjU1Ij48L3BvbHlnb24+ICAgIDwvZz48L3N2Zz4=") center center no-repeat;
  margin-left: -1.875rem;
  margin-top: 0.25rem;
}

/**
 * Custom ordered list with numbered circular badges
 * Usage: <ol class="custom-list">
 */
ol.custom-list {
  counter-reset: number-list;
  padding-left: 2.8125rem;
}

ol.custom-list li {
  list-style: none;
  counter-increment: number-list;
}

ol.custom-list li::before {
  content: counter(number-list);
  text-align: center;
  position: absolute;
  border-radius: 50%;
  line-height: 1.25rem;
  font-weight: 500;
  border: 0.125rem solid;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -2.5rem;
}


/* ========================================================================
   CARET / CHEVRON UTILITIES
   ======================================================================== */

/**
 * Caret pointing down (rotates up when .collapsed)
 * Usage: <div class="caret-down">Click to expand</div>
 */
.caret-down {
  position: relative;
  display: block;
  cursor: pointer;
}

.caret-down::after {
  content: '';
  display: inline-block;
  right: 0;
  top: 50%;
  margin-top: -0.2125rem;
  margin-right: 0.125rem;
  position: absolute;
  border-right: 0.125rem solid;
  border-bottom: 0.125rem solid;
  width: 0.425rem;
  height: 0.425rem;
  transform: rotate(225deg);
}

.caret-down.collapsed::after {
  transform: rotate(45deg);
}

/**
 * Caret pointing up (rotates down when .collapsed)
 * Usage: <div class="caret-up">Click to collapse</div>
 */
.caret-up {
  position: relative;
  display: block;
  cursor: pointer;
}

.caret-up::after {
  content: '';
  display: inline-block;
  right: 0;
  top: 50%;
  margin-top: -0.2125rem;
  margin-right: 0.125rem;
  position: absolute;
  border-right: 0.125rem solid;
  border-bottom: 0.125rem solid;
  width: 0.425rem;
  height: 0.425rem;
  transform: rotate(45deg);
}

.caret-up.collapsed::after {
  transform: rotate(225deg);
}

/**
 * Caret pointing right
 * Usage: <div class="caret-right">Expandable item</div>
 */
.caret-right {
  position: relative;
  display: block;
  cursor: pointer;
}

.caret-right::after {
  content: '';
  display: inline-block;
  right: 0;
  top: 50%;
  margin-top: -0.2125rem;
  margin-right: 0.125rem;
  position: absolute;
  border-right: 0.125rem solid;
  border-bottom: 0.125rem solid;
  width: 0.425rem;
  height: 0.425rem;
  transform: rotate(-45deg);
}


/* ========================================================================
   SWIPER CAROUSEL BASE STYLES
   ======================================================================== */

/**
 * Base Swiper carousel styles
 * Note: Requires swiper.min.js library
 */
.swiper {
  position: relative;
}

.swiper-overflow {
  position: relative;
  overflow: hidden;
}

.swiper-container {
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-overflow .swiper-container {
  overflow: unset;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-pagination {
  left: 0;
  right: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 20px;
  z-index: 2;
}

.swiper-pagination.swiper-pagination-outside {
  position: relative;
  bottom: 0;
  margin-top: 20px;
}

.swiper-pagination .swiper-pagination-bullet {
  position: relative;
  flex: 0 1 auto;
  width: 6px;
  height: 6px;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  text-indent: -999px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  outline: none;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #000000;
}

.swiper-pagination .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}


/* ========================================================================
   IMAGE ASPECT RATIO UTILITIES
   ======================================================================== */

/**
 * Aspect ratio containers for images
 * Usage: <div class="images-ratio ratio-16-9">
 *          <img src="..." />
 *        </div>
 */
.images-ratio {
  background-size: cover;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.images-ratio::before {
  content: '';
  display: block;
  box-sizing: border-box;
}

/* 2:1 Aspect Ratio */
.images-ratio.ratio-2-1::before {
  padding-top: 48.64%;
}

@media (max-width: 991.98px) {
  .images-ratio.ratio-2-1::before {
    padding-top: 100%;
  }
}

/* 4:2 Aspect Ratio */
.images-ratio.ratio-4-2::before {
  padding-top: 54.62%;
}

@media (max-width: 991.98px) {
  .images-ratio.ratio-4-2::before {
    padding-top: 100%;
  }
}

/* 4:3 Aspect Ratio */
.images-ratio.ratio-4-3::before {
  padding-top: 70.37%;
}

@media (max-width: 991.98px) {
  .images-ratio.ratio-4-3::before {
    padding-top: 100%;
  }
}

/* 4:5 Aspect Ratio */
.images-ratio.ratio-4-5::before {
  padding-top: calc(109.24% + 30px);
}

@media (max-width: 991.98px) {
  .images-ratio.ratio-4-5::before {
    padding-top: 100%;
  }
}

/* 16:9 Aspect Ratio */
.images-ratio.ratio-16-9 {
  max-height: 600px;
}

.images-ratio.ratio-16-9::before {
  padding-top: calc(109.24% + 30px);
}

@media (max-width: 991.98px) {
  .images-ratio.ratio-16-9::before {
    padding-top: 100%;
  }
}

/* 3:1 Aspect Ratio */
.images-ratio.ratio-3-1::before {
  padding-top: 36.93%;
}


/* ========================================================================
   SECTION BREAK UTILITY
   ======================================================================== */

/**
 * Visual section divider
 * Usage: <div class="section-break">Divider text (optional)</div>
 */
.section-break {
  background: #f2f2f2;
  text-align: center;
  line-height: 30px;
  font-size: 11px;
}