/**
 * GMG Category Slider – frontend stiliai
 * Naudoja kintamuosius iš temos: dt-the7-child/css/01-variables.css
 */

#gmg-categories-section {
  top: 70px;
}

@media (max-width: 1100px) {
  #gmg-categories-section {
    top: -119px;
  }
}

@media (max-width: 767px) {
  #gmg-categories-section {
    top: 10px;
  }
}

.gmg-cs-wrapper {
  position: relative;
  /* overflow: hidden; */
  background: transparent;
  box-sizing: border-box;
  transition: padding 0.5s ease;
}

/* Slideris iki dešinio lango */
.gmg-cs-content {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding-right: 0;
}

/* Flex: vienas row, kairė ir dešinė vienodai */
.gmg-cs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* Desktop: slider-wrap absolute – priliptas prie dešinio krašto (viewport) nuo 1100px */
@media (min-width: 1100px) {
  .gmg-cs-row {
    position: relative;
  }
  .gmg-cs-slider-wrap {
    right: calc((100% - 100vw) / 2);
    width: auto;
    min-width: 0;
  }
}

.gmg-cs-post-slider.gmg-cs-post-slider-active {
  margin-right: -18px;
}

/* Kairė: container – apskritimai skalėja pagal vietą */
.gmg-cs-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: self-start;
  gap: clamp(20px, 5cqw, 65px);
  justify-content: flex-start;
  padding-left: 0;
  container-type: inline-size;
  container-name: gmg-left;
  transform: translateX(max(0px, min(66px, (1800px - 100vw) * 0.22)));
  transition: transform 0.5s ease;
}

/* Centras – spacer + ovalas absolute (JS centruoja viewport) */
.gmg-cs-center {
  position: relative;
  top: -100px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.gmg-cd-row-wapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.gmg-cs-center-spacer {
  width: min(429px, 22.34375vw);
  height: min(604px, 31.458333vw);
  flex-shrink: 0;
  display: block;
}

/* Ovalas – absolute; left nustato JS (centerOval) */
.gmg-cs-oval-positioned {
  position: absolute !important;
  top: -20px;
  margin: 0 !important;
}

.gmg-cs-fixed-item {
  flex-shrink: 0;
}

@media (max-width: 1899px) {
  .gmg-cs-oval-positioned {
    top: -10px;
  }
}

@media (max-width: 1799px) {
  .gmg-cs-oval-positioned {
    top: 0px;
  }
}

@media (max-width: 1699px) {
  .gmg-cs-oval-positioned {
    top: 10px;
  }
}

@media (max-width: 1599px) {
  .gmg-cs-oval-positioned {
    top: 20px;
  }
}

@media (max-width: 1499px) {
  .gmg-cs-oval-positioned {
    top: 30px;
  }
}


@media (max-width: 1399px) {
  .gmg-cs-oval-positioned {
    top: 40px;
  }
}


@media (max-width: 1299px) {
  .gmg-cs-oval-positioned {
    top: 50px;
  }
}


@media (max-width: 1199px) {
  .gmg-cs-oval-positioned {
    top: 60px;
  }
}


/* Slideris dešinėje – overflow tik swiper, pagination laisvai */
.gmg-cs-slider-wrap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  top: 23px;
}

/* Dideliuose ekranuose – min-width kad sliderio plotis nebūtų per mažas ir nukirstų pirmą slide */
@media (min-width: 1400px) {
  .gmg-cs-slider-wrap {
    min-width: 520px;
  }
}
@media (min-width: 1700px) {
  .gmg-cs-slider-wrap {
    min-width: 650px;
  }
}

.gmg-cs-slider-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.gmg-cs-slider-inner .gmg-cs-categories-slider {
  width: 100%;
}

/* Swiper – overflow tik slides; padding-left kad pirmas slide nebūtų nukirptas */
.gmg-cs-categories-slider {
  overflow: hidden;
  padding-left: 30px;
  box-sizing: border-box;
}

/* Dideliuose ekranuose – daugiau padding, nes pirmas slide nukirpamas */
@media (min-width: 1400px) {
  .gmg-cs-categories-slider {
    padding-left: 70px;
  }
}
@media (min-width: 1700px) {
  .gmg-cs-categories-slider {
    padding-left: 90px;
  }
}

.gmg-cs-categories-slider .swiper-wrapper {
  align-items: center;
}

.gmg-cs-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

/* Sliderio slide – plotį nustato Swiper (2.5 matoma, trečia per pusę) */
.gmg-cs-categories-slider .swiper-slide.gmg-cs-slide {
  flex-shrink: 0;
}

/* Sliderio apskritimai – skalėja kaip ovalas */

.gmg-cs-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* Circle: sliderio apskritimai – mažėja greičiau (1920px) */
.gmg-cs-circle {
  width: min(201px, 10.46875vw);
  height: min(286px, 14.895833vw);
  border-radius: 50% / 35%;
  overflow: hidden;
  flex-shrink: 0;
}

.gmg-cs-circle img,
.gmg-cs-oval > img:not(.gmg-cs-oval-below-img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 215px / 210px;
}

.gmg-cs-circle .gmg-cs-placeholder,
.gmg-cs-oval .gmg-cs-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-grey-placeholder);
  display: block;
}

/* Oval - centrinis modulis (fiksuotas) */
.gmg-cs-oval-wrap {
  position: relative;
  overflow: visible;
}
/* 
.gmg-cs-fixed-oval .gmg-cs-img-wrap {
	width: 100%;
} */

/* Oval: 429×604 proporcijos, mažėja greičiau (~1920px) */
.gmg-cs-oval {
  width: min(429px, 22.34375vw);
  height: min(604px, 31.458333vw);
  border-radius: 50% / 35%;
  overflow: hidden;
  border: 4px solid var(--primary-color);
  padding: 16px;
  position: relative;
  flex-shrink: 0;
}

.gmg-cs-oval .gmg-cs-label-overlay {
  position: absolute;
  top: 29.14%;
  left: 50%;
  transform: translatex(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--font-family-primary);
  color: var(--white-color);
  font-size: clamp(18px, calc(18px + (100vw - 1400px) * 6 / 520), 24px);
  line-height: 1.15;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px var(--overlay-dark);
  z-index: 1;
}

.gmg-cs-oval .gmg-cs-oval-overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background-color: var(--black-color);
  display: block;
  border-radius: inherit;
  opacity: 0.4;
}

/* Paveikslėlis po tekstu – skalėja su ovalu (80% ovalo) */
.gmg-cs-oval-below-img {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: contain;
  bottom: -60px;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 403px;
  max-height: 362px;
}

/* Labels below circles */
.gmg-cs-label {
  display: block;
  margin-top: 25px;
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  line-height: 1.3;
  max-width: 140px;
  color: var(--primary-color);
  text-transform: uppercase;
}

/* Swiper pagination – 74px nuo title (label) */
.gmg-cs-slider-inner .swiper-pagination {
  position: relative !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 54px;
  flex-shrink: 0;
}

.gmg-cs-slider-inner .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 1px solid var(--primary-color);
  opacity: 0.6;
  transition: all 0.3s;
}

.gmg-cs-slider-inner .swiper-pagination-bullet-active {
  background: var(--primary-color-dark);
  opacity: 1;
  transform: scale(1.2);
}

.sub-title-icon svg {
  height: inherit !important;
}

@media (min-width: 768px) {
  .gmg-cs-left {
    gap: clamp(28px, 5cqw, 65px);
  }
}

/* Tablet layout (≤1100px): dvi kortelės, ovalas, 4 kategorijos (kortelių dizainas), mygtukas */
.gmg-cs-tablet-categories {
  display: none;
}

@media (max-width: 1100px) {
  .gmg-cs-tablet-categories {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 76px;
    gap: 53px;
  }
  .gmg-cs-wrapper:has(.gmg-cs-tablet-categories) .gmg-cs-desktop-only {
    display: none !important;
  }
  /* Visos kortelės vertikaliai, vienodo dydžio – tik tablet */
  .gmg-cs-tablet-categories .gmg-cs-fixed-circle {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .gmg-cs-tablet-categories .gmg-cs-img-wrap.gmg-cs-circle {
    position: relative;
    overflow: hidden;
  }
  .gmg-cs-tablet-categories .gmg-cs-img-wrap.gmg-cs-circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-medium);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    transition: background 0.3s ease;
  }
  .gmg-cs-link:hover .gmg-cs-circle::after {
    background: var(--overlay-darker);
  }
  .gmg-cs-tablet-categories .gmg-cs-label-inside {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 100%;
    max-width: 210px;
    text-align: center;
    color: var(--white-color);
    font-size: 24px;
    text-transform: uppercase;
    z-index: 2;
    padding: 0;
    line-height: 33px;
  }
  /* Visos kortelės vertikaliai, vienodo dydžio */
  .gmg-cs-tablet-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    width: 100%;
    max-width: 262px;
    margin: 0 auto;
  }
  .gmg-cs-tablet-list .gmg-cs-fixed-circle {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .gmg-cs-tablet-list .gmg-cs-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .gmg-cs-tablet-list .gmg-cs-circle {
    width: 258px;
    height: 365px;
  }
  .gmg-cs-show-all-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 14px 24px;
    background: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    font-family: var(--font-family-secondary);
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 23px;
    border-radius: 50px;
    border: 1px solid var(--primary-color);
    cursor: pointer;
    transition:
      background 0.3s,
      opacity 0.3s;
  }
  .gmg-cs-show-all-btn:hover {
    background: transparent;
    color: var(--primary-color);
    opacity: 1;
  }
}

/* Responsive – nuo 768px stulpeliai */
@media (max-width: 767px) {
  .gmg-cs-row {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 24px;
  }
  .gmg-cs-left,
  .gmg-cs-slider-wrap {
    flex: 0 0 auto;
  }
  .gmg-cs-center {
    margin: 0;
  }
  .gmg-cs-left {
    justify-content: center;
  }
  .gmg-cs-oval-positioned {
    position: relative !important;
    left: auto !important;
  }

  .gmg-cs-show-all-btn {
    max-width: 100%;
  }
}

/* Post slider */
.gmg-cs-post-slider .gmg-cs-post-slider-hidden {
  display: none !important;
}
.gmg-cs-post-slider .gmg-cs-post-slider-list {
  display: flex;
  align-items: self-start;
  gap: 42px;
}
.gmg-cs-post-slider.gmg-cs-post-slider-active .gmg-cs-post-slider-list {
  display: none;
}
.gmg-cs-post-slider.gmg-cs-post-slider-active .gmg-cs-post-slider-swiper-wrap {
  display: block !important;
}
.gmg-cs-post-slider .gmg-cs-post-slider-list .gmg-cs-post-slide {
  margin-bottom: 24px;
}
.gmg-cs-post-slider .gmg-cs-post-slider-list .gmg-cs-post-slide:last-child {
  margin-bottom: 0;
}
/* Post slider: slaidai eilutėje (row), ne stulpelyje */
.gmg-cs-post-slider .gmg-cs-post-slider-swiper-wrap {
  overflow: hidden;
  width: 100%;
}
.gmg-cs-post-slider .gmg-cs-post-slider-swiper.swiper {
  overflow: hidden;
  width: 100%;
  display: block;
}
/* Dots žemiau sliderio; tiksliai 27px tarpas – relative + margin-top, overflow neapkerta */
.gmg-cs-post-slider .gmg-cs-post-slider-swiper .swiper-pagination {
  position: relative !important;
  margin-top: 27px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
/* Sliderio slaidai visada eilutėje – perrašome bet kokius theme/Swiper stilius */
.gmg-cs-post-slider .gmg-cs-post-slider-swiper .swiper-wrapper,
.gmg-cs-post-slider .gmg-cs-post-slider-swiper-wrap .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 100%;
}
.gmg-cs-post-slider .gmg-cs-post-slider-swiper .swiper-slide {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: auto;
  box-sizing: border-box;
}
.gmg-cs-post-slider .gmg-cs-post-slider-swiper .gmg-cs-post-slide {
  height: 100%;
  display: block;
}

.gmg-cs-post-slider .gmg-cs-post-slider-swiper .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: transparent;
  border: 1px solid var(--primary-color);
  transition: all 0.3s;
}

.gmg-cs-post-slider
  .gmg-cs-post-slider-swiper
  .swiper-pagination-bullet-active {
  background: var(--primary-color);
}