/**
 * Claue V2 — Homepage-specific styles
 * Hero slider, category banners, trending/bestseller grids, lookbook, Instagram
 */

/* ── Hero Slider Arrows & Dots ── */
.cl-hero .swiper-button-next,
.cl-hero .swiper-button-prev {
  color: var(--cl-bg);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition: background var(--cl-transition);
}

.cl-hero .swiper-button-next:hover,
.cl-hero .swiper-button-prev:hover {
  background: var(--cl-primary);
}

.cl-hero .swiper-button-next::after,
.cl-hero .swiper-button-prev::after {
  font-size: 18px;
}

.cl-hero .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.cl-hero .swiper-pagination-bullet-active {
  background: var(--cl-primary);
}

/* ── Standalone Section Heading Block (matches reference content-heading section-builder) ── */
/* Reference: TRENDING = 112px, BEST SELLER = 82px, BLOG = 112px.
   Layout: padding-top 30px + h3 (24px line) + 6px margin + subtitle (14px) = ~74px minimum.
   The cl-homepage container itself adds padding, so we set 30px top + suppress heading bottom margin. */
.cl-section-header-block {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 0;
}

/* Suppress the 32px bottom margin from cl-section-heading when used as a standalone block */
.cl-section-header-block .cl-section-heading {
  margin-bottom: 0;
}

/* ── Category Banner Grid ── */
.cl-home-categories {
  margin-top: var(--cl-space-xl);
  margin-bottom: var(--cl-space-3xl);
}

/* ── Product Grid Section ── */
.cl-home-products {
  margin-top: var(--cl-space-xl);
  margin-bottom: var(--cl-space-3xl);
}

.cl-home-products .cl-product-card {
  margin-bottom: var(--cl-grid-gap);
}

.cl-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cl-grid-gap);
}

@media (max-width: 992px) {
  .cl-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .cl-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cl-product-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Lookbook Banner Grid ── */
.cl-lookbook {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-space-md);
  margin-bottom: var(--cl-space-3xl);
}

.cl-lookbook__item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Match reference: 570×570px images at 1200px container = aspect-ratio 1:1 per item */
  aspect-ratio: 1 / 1;
}

.cl-lookbook__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.cl-lookbook__item:hover img {
  transform: scale(1.05);
}

.cl-lookbook__content {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
}

.cl-lookbook__content h4 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: var(--cl-text-dark);
}

.cl-lookbook__content h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--cl-heading);
}

@media (max-width: 768px) {
  .cl-lookbook {
    grid-template-columns: 1fr;
  }
  .cl-lookbook__item {
    min-height: 220px;
  }
  .cl-lookbook__content {
    left: 20px;
  }
  .cl-lookbook__content h3 {
    font-size: 22px;
  }
}

/* ── Fix hero height to match Claue reference (section-builder #0 = 750px) ── */
.cl-hero__slide {
    min-height: unset;
    height: 750px;
}
.cl-hero__slide img {
    width: 100%;
    height: 750px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .cl-hero__slide, .cl-hero__slide img {
        height: 350px;
    }
}
/* NOTE: .cl-hero__subtitle, .cl-hero__title, .cl-hero__description,
   .cl-features-bar, .cl-feature__icon, .cl-feature__title are defined in
   porto.css (Sections 9 and 12) — no duplicates here. */
/* Full-width Instagram section wrapper (reference = section-builder-full, 1910px container) */
.cl-instagram-section {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}
.cl-instagram-section .cl-instagram {
  max-width: 100%;
  padding: 0;
}
/* NOTE: .cl-lookbook*, .cl-blog-*, .cl-instagram__*, .cl-hero .swiper-pagination-* rules
   live exclusively in porto.css Sections 12–14 and the hero block (home-clean.css lines 27-36).
   Minified duplicates were removed from here. */
/* NOTE: .cl-category-banner* layout rules live exclusively in porto.css Section 11.
   Duplicates were removed from here. */
/* Ensure anchor wraps correctly — display:block + overflow:hidden are unique to home context */
.cl-instagram__grid a {
  display: block;
  overflow: hidden;
}
/* NOTE: .cl-instagram__grid a img and a:hover img are defined in porto.css Section 13. */

/* ── Scrolling Ticker Bar (homepage, after category banners)
   Reference: mgs-ticker-block at y=702 on claue.arrowtheme.com
   Animation matches reference ticker-speed: 40s linear infinite
   Background: near-white #f6f6f8 with 10px vertical padding ── */
.cl-ticker-section {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(120deg, #f6f6f8, #f6f6f8);
  padding: 10px 0;
  margin-bottom: var(--cl-space-xl);
}

.cl-ticker__strip {
  width: 100%;
  overflow: hidden;
}

.cl-ticker__track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.cl-ticker__inner {
  display: flex;
  align-items: center;
  gap: 0;
  /* Start animation: slides left, completing full loop in 40s (matching reference 40s) */
  animation: cl-ticker-scroll 40s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: max-content;
}

.cl-ticker__item {
  font-size: 24px;
  font-weight: 600;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 40px; /* gap between items = 40px, matching reference mgs-ticker__item gap:40px */
  flex-shrink: 0;
}

@keyframes cl-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); /* 50% because inner is doubled for seamless loop */ }
}

/* Pause on hover for accessibility */
.cl-ticker-section:hover .cl-ticker__inner {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .cl-ticker__item {
    font-size: 16px;
    padding: 0 24px;
  }
  .cl-ticker-section {
    padding: 8px 0;
  }
}