/* ==========================================================================
   Ana səhifə - «Həllərimiz» kart karuseli (`section.automation`)
   --------------------------------------------------------------------------
   Yalnız ana səhifəyə aiddir; `site/blocks/home/automation.blade.php`-dən
   `@push('styles')` ilə yüklənir.

   Tema faylındakı (`style.css`) `section.automation` qaydası SAXLANILIR -
   bölmənin fonu və breakpoint-lərə görə şaquli boşluğu oradan gəlir. Yeni
   markup `hs-` prefiksi işlədir, ona görə köhnə qaydalarla toqquşmur.

   Rənglər `style.css`-dəki `:root` dəyişənlərindəndir (--qr-blue, --qr-black,
   --qr-light) - yeni palitra uydurulmur. Tipoqrafiya «Həllərimiz» səhifəsi
   ilə eynidir: Poppins / Poppins Medium.
   ========================================================================== */

.hs {
    --hs-text: #020202;
    --hs-muted: #5B5B5B;
    --hs-border: #E6E6E6;
    --hs-blue: var(--qr-blue, #06A4ED);
    --hs-card: #fff;

    /*
       Karusel konteynerdən KƏNARA daşır (aşağıda `overflow: visible`) -
       kənardakı kartlar ekranın sərhədində kəsilməlidir, yoxsa səhifədə
       üfüqi sürüşmə yaranar.
    */
    overflow: hidden;
}

/* ── Başlıq bloku ──────────────────────────────────────────────────────── */

.hs-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.hs-badge {
    display: inline-block;
    margin: 0 0 18px 0;
    padding: 7px 16px;
    border: 1px solid var(--hs-border);
    border-radius: 40px;
    /* Bölmənin fonu açıq bozdur - nişan ağ olanda seçilir */
    background: #fff;
    color: var(--hs-muted);
    font: 400 13px/20px "Poppins", sans-serif;
    letter-spacing: .02em;
}

.hs-title {
    margin: 0 0 16px 0;
    color: var(--hs-text);
    font: 500 40px/58px "Poppins Medium", sans-serif;
}

/* Accent açar mətninin öz `<span>`-ındadır */
.hs-title span {
    color: var(--hs-blue);
}

.hs-lead {
    margin: 0 auto;
    max-width: 660px;
    color: var(--hs-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

/* ── Karusel ───────────────────────────────────────────────────────────── */

.hs-carousel-wrap {
    position: relative;
}

/*
   Slayd eni konteynerdən hesablanır (3 kart tam yerləşir), amma qonşu
   kartlar konteynerdən kənarda da görünür - dərinlik hissi bundan gəlir.
   Kəsmə `.hs`-dədir (`overflow: hidden`), ona görə üfüqi sürüşmə yaranmır.

   Şaquli padding kartların kölgəsi və aktiv kartın `scale`-i üçündür.
   Üfüqi padding QƏSDƏN verilmir: Swiper slayd enini konteynerin
   `clientWidth`-indən hesablayır və yan padding ölçünü sürüşdürərdi.
*/
.hs-carousel {
    overflow: visible;
    padding-block: 16px 26px;
}

.hs-carousel .swiper-wrapper {
    /* Slaydlar `align-items: stretch` ilə eyni hündürlükdə qalır */
    align-items: stretch;
}

/*
   Üç pillə: konteynerdən kənara düşən kartlar solğundur (yalnız dərinlik
   üçündür), qonşu iki kart tam oxunaqlıdır, mərkəzdəki isə bir az böyüyür.
   Blur QƏSDƏN yoxdur - mətn oxunaqlı qalmalıdır.
*/
.hs-slide {
    height: auto;
    display: flex;
    opacity: .3;
    transform: scale(.95);
    transform-origin: center center;
    transition: opacity .45s ease, transform .45s ease;
}

.hs-slide.swiper-slide-prev,
.hs-slide.swiper-slide-next {
    opacity: 1;
    transform: scale(.98);
}

.hs-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1.03);
    /* Böyüyən kart qonşuların üstündə qalsın */
    z-index: 2;
}

.hs-slide.swiper-slide-active .hs-card {
    border-color: #E0E0E0;
    box-shadow: 0 18px 40px rgba(2, 2, 2, .10);
}

/* Sürüşdürmə mümkün olmayanda (slayd sayı ekrana sığır) hamısı tam görünür */
.hs-carousel.swiper-initialized.hs-carousel--locked .hs-slide {
    opacity: 1;
    transform: none;
}

/* ── Kart ──────────────────────────────────────────────────────────────── */

.hs-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* «Daha çox» linkinin görünməz təbəqəsi (`.hs-card__more::after`) buna
       görə ölçülür - kartın hər yeri kliklənir */
    position: relative;
    /* Şəkil kartın demək olar tam enini tutur - bu nazik boşluq yalnız
       kartın öz radiusunun içində qalması üçündür, ağ çərçivə deyil */
    padding: 5px;
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(2, 2, 2, .04);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.hs-card:hover {
    transform: translateY(-4px);
    border-color: #DCDCDC;
    box-shadow: 0 12px 28px rgba(2, 2, 2, .09);
}

.hs-card__media {
    position: relative;
    /* Sabit nisbət - şəkil gec yüklənəndə də sətir sıçramır (CLS) */
    aspect-ratio: 16 / 10;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--qr-light, #F7F7F7);
}

.hs-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hs-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Kartın öz paddingi cəmi 5px-dir - mətnin kənardan məsafəsi buradan gəlir */
    padding: 18px 17px 16px;
}

/* Şəklin altındakı kiçik ikon nişanı - açıq mavi kvadrat.
   Başlıqla eyni sol xətdə dayanır, ölçüsü mətnə tabedir. */
.hs-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 14px 0;
    padding: 9px;
    border-radius: 11px;
    background: rgba(6, 164, 237, .08);
}

.hs-card__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hs-card__title {
    margin: 0 0 10px 0;
    color: var(--hs-text);
    font: 500 22px/32px "Poppins Medium", sans-serif;
    /* Başlıqların hündürlüyü fərqlənməsin */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.hs-card__text {
    margin: 0 0 20px 0;
    color: var(--hs-muted);
    font: 400 15px/26px "Poppins", sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.hs-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Mətn qısa olan kartlarda da link kartın altına yapışır */
    margin-top: auto;
    color: var(--hs-text);
    font: 400 15px/24px "Poppins", sans-serif;
    text-decoration: none;
    align-self: flex-start;
}

/**
 * Kartın HƏR YERİ detal səhifəsinə aparır.
 *
 * Əvvəl yalnız «Daha çox» linki keçid idi - istifadəçi başlığa və ya şəklə
 * kliklədikdə heç nə olmurdu. Link kartın üstünə görünməz təbəqə sərir:
 * markup dəyişmir, ekran oxuyucu üçün yenə TƏK link qalır (kart özü <a>
 * olsaydı, başlıq mətni linkin adına qarışardı).
 *
 * Swiper `preventClicks` ilə gəlir - sürüşdürmədən sonra təsadüfi keçid olmur.
 */
.hs-card__more::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hs-card__more .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    transition: transform .3s ease;
}

.hs-card__more:hover {
    color: var(--hs-blue);
}

.hs-card__more:hover .icon {
    transform: translateX(6px);
}

.hs-card__more:focus-visible {
    outline: 2px solid var(--hs-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Mövqe göstəricisi ─────────────────────────────────────────────────── */

/*
   Ox və nöqtə QƏSDƏN yoxdur - burada yalnız nazik zolaq var.
   Enini və sürüşməsini `home-solutions.js` Swiper-in `progress` dəyərindən
   hesablayır (dolu hissə = eyni anda görünən slaydların payı).
*/
.hs-progress {
    position: relative;
    width: min(320px, 60%);
    height: 3px;
    margin: 26px auto 0;
    border-radius: 999px;
    background: #E4E4E4;
    overflow: hidden;
}

.hs-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    border-radius: inherit;
    background: var(--hs-blue);
    transition: transform .45s ease, width .3s ease;
    will-change: transform;
}

/* Tək kart qalanda göstərici mənasızdır */
.hs-progress[hidden] {
    display: none;
}

/* ── Breakpoint-lər ────────────────────────────────────────────────────── */

@media only screen and (max-width: 1199.98px) {
    .hs-head { margin-bottom: 40px; }
    .hs-title { font: 500 34px/48px "Poppins Medium", sans-serif; }
    .hs-card__title { font: 500 20px/30px "Poppins Medium", sans-serif; }
}

@media only screen and (max-width: 991.98px) {
    .hs-title { font: 500 30px/44px "Poppins Medium", sans-serif; }
    .hs-lead { font: 400 15px/26px "Poppins", sans-serif; }
    .hs-card__body { padding: 16px 15px 14px; }
}

@media only screen and (max-width: 767.98px) {
    .hs-head { margin-bottom: 32px; }
    .hs-title { font: 500 26px/38px "Poppins Medium", sans-serif; }
}

@media only screen and (max-width: 575.98px) {
    .hs-title { font: 500 24px/34px "Poppins Medium", sans-serif; }
    .hs-badge { margin-bottom: 14px; }
    /* Mobil ekranda yalnız aktiv kart tam görünür - qonşu kartın kənarı
       solğun qalır ki, sürüşdürmə ipucu itməsin */
    .hs-slide.swiper-slide-prev,
    .hs-slide.swiper-slide-next { opacity: .45; transform: scale(.96); }
    .hs-slide.swiper-slide-active { transform: scale(1); }
    .hs-card__media { aspect-ratio: 16 / 9; }
    .hs-card__icon { width: 36px; height: 36px; padding: 8px; margin-bottom: 12px; }
    .hs-card__title { font: 500 19px/28px "Poppins Medium", sans-serif; }
    .hs-progress { width: min(240px, 70%); }
}

/* Hərəkəti azaldılmış rejimdə keçidlər söndürülür (autoplay JS-də dayanır) */
@media (prefers-reduced-motion: reduce) {

    .hs-slide,
    .hs-card,
    .hs-card__more .icon,
    .hs-progress__bar {
        transition: none;
    }

    .hs-card:hover {
        transform: none;
    }
}