/* ==================================================
   OMAMA – INDEX.CSS
   FINAL • HERO FIX • CARDURI MODERNE
   ================================================== */


/* ==================================================
   HERO
   ================================================== */

.hero{
    max-width:1200px;
    margin:32px auto;
    padding:0 24px;
}

.hero-slider{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:#000;
    box-shadow:0 28px 90px rgba(0,0,0,.28);
}

.hero-track{
    display:flex;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
}

.hero-slide{
    position:relative;
    min-width:100%;
    height:420px;
}

.hero-slide img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-slide::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.28) 40%,
        rgba(0,0,0,.12) 65%,
        transparent 85%
    );
}


/* ==================================================
   HERO TEXT
   ================================================== */

.hero-caption{
    position:absolute;
    left:44px;
    right:44px;
    bottom:36px;
    color:#fff;
    text-decoration:none;
    z-index:3;
}

.hero-caption h2{
    
    margin:0 0 10px;
    font-size:30px;
    font-weight:600;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-shadow:0 10px 26px rgba(0,0,0,.6);
}

.hero-caption p{
    margin:0;
    max-width:620px;
    font-size:15.5px;
    line-height:1.5;
    opacity:.95;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-shadow:0 6px 18px rgba(0,0,0,.55);
}


/* ==================================================
   HERO BUTTONS
   ================================================== */

.hero-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    border:1px solid rgba(255,255,255,.35);
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 12px 36px rgba(0,0,0,.35);
    transition:.25s ease;
    z-index:4;
    color:#fff;
    font-size:22px;
}

.hero-btn.prev{ left:18px; }
.hero-btn.next{ right:18px; }

.hero-btn:hover{
    transform:translateY(-50%) scale(1.08);
    background:rgba(255,255,255,.38);
}


/* ==================================================
   GRID / CATEGORII
   ================================================== */

.category-block{
    margin:160px auto;
    padding:0 24px;
}

.section-title{
    margin:50px 0 25px;
}

.grid{
    display:grid;
    gap:36px;
}


/* ==================================================
   CARDURI
   ================================================== */

.post-card{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    background:#f7f5ef;
    box-shadow:0 16px 42px rgba(0,0,0,.14);
    transition:.25s ease;
}

.post-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 60px rgba(0,0,0,.18);
}

.post-card img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}


/* ==================================================
   TITLU CARD – GLASS REAL + FEATHER DIFUZ
   ================================================== */

.post-card h4{
    min-height: 71px;
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    margin:0;
    padding:14px 18px;
    font-size:17.6px;
    font-weight:600;
    line-height:1.35;
    color:#fff;
    z-index:2;
    border-radius:22px;
    text-shadow:0 2px 4px rgba(0,0,0,.65);
    display:-webkit-box;
    -webkit-box-orient:vertical;
    
}

/* BLUR + FEATHER UNIFORM (CENTRU + MARGINI) */
.post-card h4::before{
    content:'';
    position:absolute;
    inset:7px; /* feather real */
    z-index:-3;

    /* suport minim pentru blur */
    background:rgba(255,255,255,.06);

    backdrop-filter:
        blur(8px)
        saturate(120%)
        brightness(0.95);


    -webkit-backdrop-filter:
        blur(22px)
        saturate(140%)
        brightness(0.95);

    border-radius:36px;

    /* feather difuz */
    mask-image:radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.4) 5%,
        rgba(0,0,0,0) 0%
    );
    -webkit-mask-image:radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,.85) 70%,
        rgba(0,0,0,.4) 85%,
        rgba(0,0,0,0) 100%
    );
}


/* ==================================================
   SHINE EFFECT
   ================================================== */

.post-card a::after{
    content:'';
    position:absolute;
    top:0;
    left:-80%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-20deg);
}

.post-card a:hover::after{
    animation:shine .75s ease;
}

@keyframes shine{
    to{ left:130%; }
}


/* ==================================================
   PLACEHOLDERS
   ================================================== */

.placeholder-card{
    min-height:280px;
    border-radius:28px;
    background:linear-gradient(135deg,#f6efe9,#f2f4f8);
    box-shadow:0 12px 28px rgba(0,0,0,.08);
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media(max-width:900px){
    .hero-slide{ height:320px; }
}

@media(max-width:520px){
    .hero-caption h2{ font-size:24px; }
    .grid{ gap:28px; }
}