/* css/pages/home.css */
@layer pages;

@layer pages {
  .hero{ position:relative; background:#000; }

  .carousel{
    position:relative;
    width:100%;
    height: clamp(460px, 78vh, 860px);
    overflow:hidden;
    touch-action: pan-y;
  }

  .carousel-track{
    height:100%;
    display:flex;
    transform: translateX(0%);
    transition: transform 650ms ease;
	will-change: transform;
    transform: translate3d(0,0,0);
  }

  .carousel-slide{
    min-width:100%;
    height:100%;
    position:relative;
    background:#dff7ff;
  }

  .carousel-slide img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.08) saturate(1.12) contrast(1.03);
  }

  .carousel-slide[data-fit="contain"] img{
    object-fit: contain;
    background: linear-gradient(180deg, #e8f7ff, #f7fdff);
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1100px 520px at 18% 88%, rgba(6,33,53,.18), transparent 72%),
      linear-gradient(180deg,
        rgba(6,33,53,.04) 0%,
        rgba(6,33,53,.10) 55%,
        rgba(6,33,53,.22) 100%
      );
    pointer-events:none;
    z-index:1;
  }

  .hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    pointer-events:none;
    z-index:2;
  }

  /* ✅ FIX: kicker uvijek iznad H1 (svi jezici) */
  .hero-content{
    pointer-events:auto;
    margin-inline:auto;
    max-width: min(980px, 92vw);
    margin-bottom: clamp(18px, 6vh, 64px);

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .hero-content .hero-kicker{
    justify-content:center;
    width:100%;
  }

  .hero-content h1{
    color:#fff;
    font-size: clamp(28px, 3.6vw, 52px);
    letter-spacing:-.02em;
    margin: 0 0 10px 0;
    max-width: min(860px, 92vw);
    margin-inline:auto;

    display:inline-block;
    padding: 10px 16px;
    border-radius: var(--radius-xl);
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
  }
  @supports (backdrop-filter: blur(10px)){
    .hero-content h1{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  }

  .hero-content .hero-sub{
    max-width: 760px;
    margin-inline:auto;
  }

  .carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px; height:44px;
    border-radius: var(--radius-md);
    border:1px solid rgba(255,255,255,.22);
    background: rgba(6,33,53,.25);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    display:grid;
    place-items:center;
  }
  .carousel-btn:hover{ background: rgba(6,33,53,.40); }
  .carousel-btn.prev{ left:14px; }
  .carousel-btn.next{ right:14px; }
  .carousel-btn:focus-visible{ box-shadow: 0 0 0 4px rgba(255,255,255,.18); }

  .carousel-dots{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    gap:8px;
    justify-content:center;
  }
  .dot{
    width:9px; height:9px;
    border-radius: var(--pill);
    border:1px solid rgba(255,255,255,.70);
    background: rgba(255,255,255,.25);
    cursor:pointer;
  }
  .dot.is-active{ background:#fff; border-color:#fff; }

  @media (max-width: 980px){
    .carousel-btn{ display:none; }
    .carousel-slide img{ filter:none; }
    .hero-content h1{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  }

  @media (max-width: 560px){
    .hero-content{
      align-items:flex-start;
      text-align:left;
    }
    .hero-content .hero-kicker{ justify-content:flex-start; }
    .hero-cta, .hero-badges{ justify-content:flex-start; }
    .hero-content .hero-sub{ margin-inline:0; }
  }
}