/*=========================================================
  MaryJo Buzzanco Fine Art
  Home Page
=========================================================*/

/*=========================================================
  VARIABLES
=========================================================*/

:root{

    --accent:#7b5c43;

    --accent-dark:#5c4330;

    --background:#faf9f6;

    --card:#ffffff;

    --text:#333333;

    --light:#777777;

    --border:#e8e2d9;

    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    --radius:18px;

}

/*=========================================================
  PAGE
=========================================================*/

body{

    margin:0;

    background:var(--background);

    color:var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

}

main{

    max-width:1450px;

    margin:auto;

}

/*=========================================================
  LINKS
=========================================================*/

a{

    color:inherit;

    text-decoration:none;

}

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

.hero{

    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:50px;

    align-items:center;

    padding:45px 7%;

}

.hero-content{

    max-width:650px;

}

.section-tag{

    display:inline-block;

    padding:6px 16px;

    border-radius:999px;

    background:#ece3d9;

    color:var(--accent-dark);

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:18px;

}

.hero h1{

    margin:0;

    font-size:3rem;

    color:var(--accent-dark);

    line-height:1.1;

}

.hero h2{

    margin:18px 0;

    font-size:1.25rem;

    color:var(--accent);

    font-weight:500;

}

.hero p{

    font-size:1rem;

    line-height:1.8;

    color:#555;

    margin-bottom:28px;

}

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

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-button{

    padding:

        12px 24px;

    background:var(--accent);

    color:white;

    border-radius:999px;

    transition:.3s;

    font-weight:600;

}

.hero-button:hover{

    background:var(--accent-dark);

}

.hero-button.secondary{

    background:white;

    color:var(--accent-dark);

    border:2px solid var(--accent);

}

.hero-button.secondary:hover{

    background:var(--accent);

    color:white;

}

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

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:340px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

/*=========================================================
  SECTION HEADERS
=========================================================*/

section{

    padding:

        55px 7%;

}

.section-header{

    text-align:center;

    margin-bottom:45px;

}

.section-header span{

    display:block;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    margin-bottom:10px;

}

.section-header h2{

    margin:0;

    color:var(--accent-dark);

    font-size:2.2rem;

}

/*=========================================================
  EXPLORE
=========================================================*/

.explore{

    padding-top:30px;

    padding-bottom:70px;

}

.explore-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

.explore-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:18px;

    box-shadow:var(--shadow);

    background:white;

}

.explore-card img{

    display:block;

    width:100%;

    height:220px;

    object-fit:cover;

    transition:
        transform .45s ease;

}

.explore-card:hover img{

    transform:scale(1.05);

}

.explore-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:18px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.78)
        );

    color:white;

}

.explore-overlay h3{

    margin:0;

    font-size:1.25rem;

}

.explore-overlay p{

    margin-top:8px;

    margin-bottom:0;

    font-size:.92rem;

    opacity:.92;

}

/*=========================================================
  FEATURED PIECE
=========================================================*/

.featured-art{

    padding-top:20px;

    padding-bottom:70px;

}

.featured-piece{

    display:grid;

    grid-template-columns:
        420px
        1fr;

    gap:40px;

    align-items:center;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.featured-image img{

    display:block;

    width:100%;

    height:340px;

    object-fit:cover;

}

.featured-text{

    padding:40px;

}

.featured-text h3{

    margin-top:0;

    color:var(--accent-dark);

    font-size:2rem;

}

.featured-text p{

    line-height:1.8;

    color:#555;

}

/*=========================================================
  ABOUT
=========================================================*/

.home-about{

    display:grid;

    grid-template-columns:
        300px
        1fr;

    gap:50px;

    align-items:center;

    padding-top:40px;

    padding-bottom:70px;

}

.about-image{

    text-align:center;

}

.about-image img{

    width:100%;

    max-width:280px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.about-content h2{

    margin-top:0;

    color:var(--accent-dark);

    font-size:2.2rem;

}

.about-content p{

    line-height:1.8;

    color:#555;

}

/*=========================================================
  DIVIDER
=========================================================*/

.section-divider{

    width:70px;

    height:3px;

    background:var(--accent);

    margin:18px auto 0;

    border-radius:999px;

}

/*=========================================================
  NEWS / CURRENT WORK
=========================================================*/

.news{

    padding-top:20px;

    padding-bottom:70px;

}

.news-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}

.news-card{

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.news-card h3{

    margin-top:0;

    color:var(--accent-dark);

}

.news-card p{

    color:#666;

    line-height:1.8;

}

/*=========================================================
  CALL TO ACTION
=========================================================*/

.commission-banner{

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        );

    border-radius:22px;

    text-align:center;

    color:white;

    padding:60px 40px;

    margin:40px 7% 80px;

}

.commission-content{

    max-width:850px;

    margin:auto;

}

.commission-banner .section-tag{

    background:
        rgba(255,255,255,.15);

    color:white;

}

.commission-banner h2{

    margin-top:18px;

    font-size:2.4rem;

}

.commission-banner p{

    line-height:1.9;

    color:
        rgba(255,255,255,.92);

    margin-bottom:30px;

}

.commission-banner .hero-buttons{

    justify-content:center;

}

.commission-banner .hero-button{

    background:white;

    color:var(--accent-dark);

}

.commission-banner .hero-button:hover{

    background:#f5f5f5;

}

.commission-banner .hero-button.secondary{

    background:transparent;

    color:white;

    border:2px solid white;

}

.commission-banner .hero-button.secondary:hover{

    background:white;

    color:var(--accent-dark);

}

/*=========================================================
  FOOTER
=========================================================*/

.site-footer{

    text-align:center;

    padding:70px 30px 50px;

    border-top:1px solid var(--border);

    background:white;

}

.site-footer h2{

    color:var(--accent-dark);

}

.site-footer p{

    max-width:650px;

    margin:20px auto 35px;

    line-height:1.8;

    color:#666;

}

.social-links{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.social-links a{

    padding:12px 24px;

    border-radius:999px;

    background:var(--accent);

    color:white;

    transition:.3s;

}

.social-links a:hover{

    background:var(--accent-dark);

}

.copyright{

    color:#888;

    font-size:.9rem;

}

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

@media (max-width:1000px){

    .hero,

    .featured-piece,

    .home-about{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-image{

        order:-1;

    }

    .featured-image img{

        height:300px;

    }

}

@media (max-width:768px){

    section{

        padding-left:5%;

        padding-right:5%;

    }

    .hero{

        gap:30px;

    }

    .hero h1{

        font-size:2.3rem;

    }

    .hero h2{

        font-size:1.05rem;

    }

    .hero-image img{

        max-width:260px;

    }

    .explore-card img{

        height:180px;

    }

    .featured-piece{

        gap:0;

    }

    .featured-image img{

        height:240px;

    }

    .featured-text{

        padding:30px;

    }

    .about-image img{

        max-width:220px;

    }

    .commission-banner{

        margin:40px 5% 60px;

        padding:45px 25px;

    }

}

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}