/* ============================================================
   GetLux HOME — [getlux_home] i glx_* blokovi
   Fajl: wp-content/themes/Divi/glx-assets/glx-home.css
   (konsolidovano 26.09 — nema duplih selektora; poslednja vrednost je zadrzana)
   ============================================================ */

:root {
    --ink: #0b1a2b;
    --ink2: #122b45;
    --eco: #2f7d4f;
    --eco2: #256640;
    --gold: #e8b96a;
    --paper: #f7f9fb;
    --line: #e4eaf1;
    --mut: #5b7083;
    --r: 16px;
    --sh: 0 8px 30px rgba(11,26,43,.08);
}
.glx-home {
    font-family: Inter,system-ui,Segoe UI,Arial;
    color: var(--ink);
}
.glx-sec {
    padding: 46px 0;
}
.glx-sec--tight {
    padding: 40px 0;
}
.glx-h2 {
    font-size: clamp(24px, 2.2vw + 14px, 40px);
    line-height: 1.15;
    margin: 0 0 10px;
    letter-spacing: -.02em;
    font-weight: 800;
}
.glx-sub {
    color: var(--mut);
    font-size: clamp(16px, 0.5vw + 14px, 19px);
    margin: 0 0 34px;
    max-width: 660px;
}
.glx-eyebrow {
    display: inline-block;
    font: 700 12px/1 Inter;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eco);
    margin-bottom: 14px;
    font-size: clamp(12px, 0.2vw + 11px, 13px);
}
.glx-hero {
    position: relative;
    background: var(--ink);
    overflow: hidden;
}
.glx-hero .swiper {
    /* DRZAC: fiksni 16:9 — ne siri se po slici */
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: min(62vh,620px);
    min-height: 0;
}
.glx-slide {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.glx-slide img {
    /* SLIKA: cela u kadru, centrirana; sa strane ostaje default pozadina */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    /* ZUM: krece posle 2s, od 96% na 100% (jedva primetno) */
    transform: scale(.96);
    transition: transform 14s ease-out 2s;
}
.swiper-slide-active .glx-slide img {
    transform: scale(1);
}
.glx-slide:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(11,26,43,.9) 0%,rgba(11,26,43,.6) 45%,rgba(11,26,43,.12) 100%);
}
.glx-hero-in {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}
.glx-hero-card {
    max-width: 660px;
    pointer-events: auto;
}
.glx-hero h1 {
    font-size: clamp(22px, 2.2vw + 14px, 40px);
    line-height: 1.1;
    margin: 8px 0 12px;
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
}
.glx-loc {
    color: var(--gold);
    font: 700 13px/1 Inter;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: clamp(12.5px, 0.3vw + 11.5px, 14px);
}
.glx-price {
    color: #fff;
    font-size: clamp(17px, 0.6vw + 15px, 20px);
    font-weight: 700;
    margin: 6px 0 18px;
}
.glx-price small {
    color: #9fb3c8;
    font-weight: 500;
    font-size: clamp(14px, 0.3vw + 13px, 15px);
}
.glx-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.glx-btn {
    display: inline-block;
    padding: 15px 26px;
    border-radius: 12px;
    font: 700 15px/1 Inter;
    text-decoration: none;
    transition: .18s;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: clamp(14.5px, 0.4vw + 13.5px, 16px);
}
.glx-btn--p {
    background: var(--eco);
    color: #fff;
}
.glx-btn--p:hover {
    background: var(--eco2);
}
.glx-btn--g {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.35);
}
.glx-btn--g:hover {
    background: rgba(255,255,255,.22);
}
.glx-chips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 5;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
}
.glx-chip {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    font: 600 13px/1 Inter;
    font-size: clamp(13px, 0.3vw + 12px, 14px);
}
.glx-chip.on,.glx-chip:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #3b2a05;
}
.glx-hero .swiper-pagination-bullet {
    background: #fff;
    opacity: .45;
}
.glx-hero .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--gold);
}
.glx-trust {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}
.glx-trust div {
    text-align: center;
    font: 600 15px / 1.4 Inter;
    color: var(--ink2);
    font-size: 22px;
}
.glx-trust span {
    display: block;
    font-size: clamp(20px, 0.8vw + 18px, 24px);
    margin-bottom: 6px;
}
.glx-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh);
    height: 100%;
    transition: .2s;
}
.glx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(11,26,43,.13);
}
.glx-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.glx-card-b {
    padding: 18px;
}
.glx-card h3 {
    margin: 0 0 6px;
    font-size: clamp(17px, 0.5vw + 15.5px, 19px);
    line-height: 1.25;
}
.glx-meta {
    color: var(--mut);
    font-size: clamp(14px, 0.4vw + 13px, 15.5px);
}
.glx-tag {
    display: inline-block;
    background: #eef6f1;
    color: var(--eco2);
    font: 700 12px/1 Inter;
    padding: 5px 9px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: clamp(12px, 0.2vw + 11px, 13px);
}
.glx-subh {
    font-size: clamp(18px, 0.7vw + 16px, 22px);
    font-weight: 700;
    margin: 40px 0 16px;
}
.glx-cta {
    background: radial-gradient(120% 140% at 0% 0%,#123b2a 0%,#0b1a2b 60%);
    border-radius: 24px;
    padding: 52px;
    color: #fff;
    text-align: center;
}
.glx-live {
    background: #122b45;
    border: 1px solid #1e3a60;
    border-radius: 20px;
    padding: 26px;
    color: #fff;
}
.glx-live .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d4d;
    display: inline-block;
    margin-right: 8px;
}
.glx-prog {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 6px;
    margin-top: 16px;
    font-size: clamp(12px, 0.3vw + 11px, 13.5px);
    text-align: center;
}
.glx-prog b {
    display: block;
    background: #0e2340;
    padding: 8px 4px;
    border-radius: 8px;
}
.glx-prog span {
    display: block;
    color: #9fb3c8;
    margin-top: 4px;
}
@media(max-width:900px) {
    .glx-trust {
        grid-template-columns: repeat(2,1fr);
    }
    .glx-cta {
        padding: 34px 22px;
    }
}

/* ---------- HERO: rucna navigacija (strelice) ---------- */
.glx-hero .glx-nav {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(11,26,43,.55);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    z-index: 6;
    transition: background .18s, color .18s, border-color .18s;
}
.glx-hero .glx-nav:after {
    font-size: 15px;
    font-weight: 700;
}
.glx-hero .glx-nav:hover {
    background: var(--gold);
    color: #3b2a05;
    border-color: var(--gold);
}
.glx-hero .glx-nav--prev { left: 14px; }
.glx-hero .glx-nav--next { right: 14px; }
@media (max-width: 700px) {
    .glx-hero .glx-nav { width: 38px; height: 38px; }
    .glx-hero .glx-nav:after { font-size: 13px; }
    .glx-hero .glx-nav--prev { left: 8px; }
    .glx-hero .glx-nav--next { right: 8px; }
}