/* ===================================================
   ABOUT SECTION — WOOD & PREMIUM (2 COLOR GRADIENT)
   DB READY via CSS VARIABLE
   SAFARI iOS SAFE VERSION
=================================================== */

/* =========================
   SECTION BACKGROUND
========================= */

.about-section{
    padding:110px 5vw;
    background:
            repeating-linear-gradient(
                    90deg,
                    rgba(255,255,255,.03),
                    rgba(255,255,255,.03) 1px,
                    transparent 1px,
                    transparent 6px
            ),
            linear-gradient(
                    180deg,
                    var(--about-bg-1),
                    var(--about-bg-2)
            );
}

/* =========================
   CONTAINER
========================= */

.about-container{
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:80px;

    padding:70px;
    border-radius:34px;

    background:
            linear-gradient(
                    180deg,
                    rgba(255,255,255,.88),
                    rgba(246,204,180,.82)
            );

    box-shadow:
            0 35px 90px rgba(0,0,0,.12);
}

/* =========================
   IMAGES — BASE (2 IMAGE MODE)
========================= */

.about-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.about-img{
    position:relative;
    overflow:hidden;
    border-radius:22px;

    /* SAFARI iOS SAFE */
    aspect-ratio:4 / 5;

    box-shadow:
            0 22px 55px rgba(0,0,0,.25);
}

.about-img img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:cover;

    filter:
            saturate(1.08)
            contrast(1.05)
            brightness(1.02);

    transition:
            transform .8s cubic-bezier(.2,.75,.2,1);
}

.about-img:hover img{
    transform:scale(1.08);
}

/* stagger look (2 images only) */
.about-img.img-right{
    transform:translateY(36px);
}

/* cinematic overlay */
.about-img::after{
    content:"";
    position:absolute;
    inset:0;

    background:
            linear-gradient(
                    to top,
                    rgba(0,0,0,.35),
                    rgba(201,106,80,.12),
                    transparent
            );

    pointer-events:none;
}

/* =========================
   FEATURE LAYOUT (3+ IMAGES)
   1 BIG + 2 TALL SMALL
========================= */

.about-images--feature{
    display:grid;
    grid-template-columns:1.45fr .55fr;
    grid-template-rows:1fr 1fr;
    gap:22px;
}

/* BIG IMAGE */
.about-img--big{
    grid-row:1 / span 2;
    aspect-ratio:4 / 5;
}

/* SMALL IMAGES */
.about-img--small{
    aspect-ratio:3 / 4;
}

/* =========================
   CONTENT
========================= */

.about-content{
    padding-top:10px;
}

.about-label{
    display:block;
    font-size:11px;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#c8a46a;
    margin-bottom:14px;
}

.about-content h2{
    font-size:28px;
    letter-spacing:.28em;
    color:#2a1e1a;
    line-height:1.3;
    margin-bottom:18px;
}

.about-content h2 span{
    display:block;
    margin-top:8px;

    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#7b8f84;
}

.about-content p{
    font-size:15px;
    line-height:1.85;
    color:#3a2c25;
    margin-bottom:20px;
    max-width:500px;
}

/* =========================
   BUTTON
========================= */

.about-btn{
    display:inline-block;
    margin-top:14px;

    padding:12px 38px;
    border-radius:40px;

    background:
            linear-gradient(
                    135deg,
                    #c96a50,
                    #b4573f
            );

    color:#fff;
    font-size:12px;
    letter-spacing:.12em;
    text-decoration:none;

    box-shadow:
            0 12px 28px rgba(201,106,80,.4);

    transition:.25s ease;
}

.about-btn:hover{
    transform:translateY(-3px);
    box-shadow:
            0 18px 38px rgba(201,106,80,.5);
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .about-section{
        padding:70px 4vw;
    }

    .about-container{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px;
    }

    .about-images,
    .about-images--feature{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .about-img,
    .about-img--big,
    .about-img--small{
        aspect-ratio:16 / 9;
    }

    .about-img.img-right{
        transform:none;
    }

    .about-content h2{
        font-size:22px;
    }

    .about-content p{
        max-width:100%;
    }
}