/*=========================================================
  MaryJo Buzzanco Fine Art
  Crafts Gallery Stylesheet
  Part 1
=========================================================*/

/*=========================================================
  ROOT
=========================================================*/

:root {

    --craft-bg: #faf8f5;

    --craft-card: #ffffff;

    --craft-border: #e5ddd4;

    --craft-accent: #8c6b4f;

    --craft-accent-dark: #6e5037;

    --craft-text: #2f2f2f;

    --craft-light: #777;

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

    --craft-radius: 18px;

}

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

body{

    background:var(--craft-bg);

    color:var(--craft-text);

}

main{

    max-width:1500px;

    margin:auto;

}

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

.hero {

    max-width: 900px;

    margin: 0 auto;

    padding: 70px 40px;

    text-align: center;

}

.hero-content {

    max-width: 750px;

    margin: 0 auto;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:280px;

    border-radius:50%;

    border:8px solid white;

    box-shadow:var(--craft-shadow);

}

.hero-content h1 {

    font-size: clamp(2.75rem, 5vw, 4rem);

    margin-bottom: 25px;

    text-align: center;

    color: var(--craft-accent-dark);

}

.hero-content p {

    font-size: 1.15rem;

    line-height: 1.9;

    text-align: center;

    color: #555;

    max-width: 700px;

    margin: 0 auto 20px;

}

/*=========================================================
  FILTER AREA
=========================================================*/

.filters{

    display:grid;

    grid-template-columns:

        repeat(3,minmax(250px,1fr));

    gap:35px;

    padding:0 8% 50px;

}

.filter-group{

    background:white;

    border-radius:18px;

    padding:25px;

    box-shadow:var(--craft-shadow);

}

.filter-group h3{

    margin-top:0;

    margin-bottom:20px;

    color:var(--craft-accent-dark);

    font-size:1.05rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

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

.filter{

    display:inline-block;

    margin:6px;

    padding:

        10px 18px;

    border:none;

    border-radius:999px;

    background:#ece6df;

    color:#444;

    cursor:pointer;

    transition:.25s;

    font-size:.9rem;

}

.filter:hover{

    background:#d9cab8;

}

.filter.active{

    background:var(--craft-accent);

    color:white;

}

/*=========================================================
  SEARCH BAR
=========================================================*/

.search-bar{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    align-items:center;

    padding:0 8% 40px;

}

.search-bar input{

    flex:1;

    min-width:280px;

    padding:16px 22px;

    border-radius:999px;

    border:2px solid #ddd;

    font-size:1rem;

    transition:.25s;

}

.search-bar input:focus{

    outline:none;

    border-color:var(--craft-accent);

    box-shadow:

        0 0 0 4px

        rgba(140,107,79,.15);

}

.search-bar select{

    padding:16px 22px;

    border-radius:999px;

    border:2px solid #ddd;

    background:white;

    cursor:pointer;

    font-size:1rem;

}

#resetFilters{

    padding:16px 26px;

    border:none;

    border-radius:999px;

    background:var(--craft-accent);

    color:white;

    cursor:pointer;

    transition:.25s;

    font-size:1rem;

}

#resetFilters:hover{

    background:var(--craft-accent-dark);

}

/*=========================================================
  RESULT COUNT
=========================================================*/

.gallery-info{

    padding:0 8% 25px;

    color:#777;

    font-size:1rem;

}

/*=========================================================
  GALLERY GRID
=========================================================*/

.gallery-section{

    padding:0 8% 80px;

}

.gallery{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(280px,1fr));

    gap:35px;

}

/*=========================================================
  CRAFT CARDS
  Part 2
=========================================================*/

.craft-card{

    position:relative;

    background:var(--craft-card);

    border-radius:var(--craft-radius);

    overflow:hidden;

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

    box-shadow:var(--craft-shadow);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.craft-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.15);

}

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

.gallery-item{

    display:block;

    overflow:hidden;

    background:#f6f2ec;

}

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    transition:
        transform .6s ease,
        opacity .3s ease;

    opacity:0;

}

.gallery-item img.loaded{

    opacity:1;

}

.craft-card:hover .gallery-item img{

    transform:scale(1.06);

}

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

.craft-card figcaption{

    padding:22px;

}

.craft-card h3{

    margin:0 0 12px;

    font-size:1.25rem;

    color:var(--craft-accent-dark);

    line-height:1.3;

}

.medium{

    margin:0;

    color:#777;

    font-size:.95rem;

}

.status{

    margin-top:18px;

    font-size:.9rem;

    font-weight:600;

    color:var(--craft-accent);

}

/*=========================================================
  BADGES
=========================================================*/

.badge{

    position:absolute;

    left:15px;

    z-index:10;

    padding:7px 14px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:600;

    color:white;

    letter-spacing:.4px;

    box-shadow:
        0 6px 14px rgba(0,0,0,.15);

}

/* Featured */

.badge.featured{

    top:15px;

    background:#d4a017;

}

/* Personalized */

.badge.personalized{

    top:55px;

    background:#7a4f9d;

}

/* Made to Order */

.badge.order{

    top:95px;

    background:#4c8a63;

}

/* Available */

.badge.available{

    top:135px;

    background:#2b8cbe;

}

/*=========================================================
  EMPTY RESULTS
=========================================================*/

.no-results{

    text-align:center;

    padding:80px 20px;

    background:white;

    border-radius:20px;

    border:2px dashed #d8d8d8;

    color:#777;

    font-size:1.1rem;

}

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

.craft-card a{

    color:inherit;

    text-decoration:none;

}

/*=========================================================
  SUBTLE CARD ACCENT
=========================================================*/

.craft-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:5px;

    background:linear-gradient(

        90deg,

        var(--craft-accent),

        #d7b899

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.craft-card:hover::after{

    transform:scaleX(1);

}

/*=========================================================
  IMAGE PLACEHOLDER
=========================================================*/

.gallery-item{

    position:relative;

}

.gallery-item::before{

    content:"";

    display:block;

    position:absolute;

    inset:0;

    background:
        linear-gradient(

            135deg,

            rgba(255,255,255,.35),

            rgba(255,255,255,0)

        );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.craft-card:hover .gallery-item::before{

    opacity:1;

}

/*=========================================================
  CRAFTS CSS
  Part 3
  Lightbox • Footer • Buttons • Utilities
=========================================================*/

/*=========================================================
  GLIGHTBOX
=========================================================*/

.glightbox-clean .gslide-description{

    background:#ffffff;

    color:#444;

    padding:22px;

    border-top:1px solid #ececec;

}

.glightbox-clean .gslide-title{

    color:var(--craft-accent-dark);

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:10px;

}

.glightbox-clean .gslide-desc{

    color:#666;

    line-height:1.7;

}

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

button{

    font-family:inherit;

}

button:focus{

    outline:none;

}

button:focus-visible{

    outline:3px solid rgba(140,107,79,.25);

    outline-offset:3px;

}

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

a{

    transition:.25s;

}

a:hover{

    text-decoration:none;

}

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

.site-footer{

    text-align:center;

    background:white;

    border-top:1px solid #e8e8e8;

    padding:70px 30px 50px;

}

.site-footer h2{

    color:var(--craft-accent-dark);

    margin-bottom:18px;

    font-size:2rem;

}

.site-footer p{

    max-width:700px;

    margin:0 auto 30px;

    line-height:1.8;

    color:#666;

}

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

.social-links{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.social-links a{

    display:inline-block;

    padding:14px 26px;

    border-radius:999px;

    background:var(--craft-accent);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.social-links a:hover{

    background:var(--craft-accent-dark);

    transform:translateY(-3px);

}

/*=========================================================
  COPYRIGHT
=========================================================*/

.copyright{

    color:#888;

    font-size:.9rem;

}

/*=========================================================
  SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:#c8b39b;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--craft-accent);

}

/*=========================================================
  SELECTION
=========================================================*/

::selection{

    background:rgba(140,107,79,.25);

}

/*=========================================================
  SMALL UTILITIES
=========================================================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

/*=========================================================
  IMAGE LOADING FADE
=========================================================*/

.gallery-item img{

    transition:

        opacity .4s ease,

        transform .6s ease;

}

.gallery-item img.loaded{

    opacity:1;

}

/*=========================================================
  HOVER SHADOW POLISH
=========================================================*/

.craft-card{

    will-change:transform;

}

/*=========================================================
  GALLERY SPACING
=========================================================*/

.gallery{

    align-items:start;

}

.gallery-section{

    min-height:350px;

}

/*=========================================================
  CRAFTS CSS
  Part 4
  Responsive Design & Final Polish
=========================================================*/

/*=========================================================
  LARGE DESKTOPS
=========================================================*/

@media (min-width:1600px){

    main{

        max-width:1700px;

    }

    .gallery{

        grid-template-columns:
            repeat(auto-fill,minmax(320px,1fr));

    }

}

/*=========================================================
  TABLETS
=========================================================*/

@media (max-width:1100px){

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        gap:35px;

    }

    .hero-image{

        order:1;

    }

    .hero-content{

        order:2;

    }

    .filters{

        grid-template-columns:1fr;

        gap:25px;

    }

    .search-bar{

        flex-direction:column;

        align-items:stretch;

    }

    .search-bar input{

        min-width:100%;

    }

    .search-bar select{

        width:100%;

    }

    #resetFilters{

        width:100%;

    }

}

/*=========================================================
  PHONES
=========================================================*/

@media (max-width:768px){

    .hero{

        padding:50px 25px;

    }

    .hero-content h1{

        font-size:2.2rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .filters{

        padding:0 25px 35px;

    }

    .search-bar{

        padding:0 25px 35px;

    }

    .gallery-info{

        padding:0 25px 20px;

    }

    .gallery-section{

        padding:0 25px 60px;

    }

    .gallery{

        grid-template-columns:1fr;

        gap:28px;

    }

    .craft-card h3{

        font-size:1.15rem;

    }

    .medium{

        font-size:.9rem;

    }

    .status{

        font-size:.9rem;

    }

    .badge{

        font-size:.72rem;

        padding:6px 12px;

    }

    .site-footer{

        padding:55px 25px 40px;

    }

    .site-footer h2{

        font-size:1.7rem;

    }

}

/*=========================================================
  VERY SMALL PHONES
=========================================================*/

@media (max-width:450px){

    .hero-image img{

        max-width:220px;

    }

    .hero-content h1{

        font-size:1.9rem;

    }

    .filter{

        width:100%;

        margin:5px 0;

    }

    .filter-group{

        padding:18px;

    }

    .social-links{

        flex-direction:column;

    }

    .social-links a{

        width:100%;

    }

}

/*=========================================================
  PRINT
=========================================================*/

@media print{

    body{

        background:white;

    }

    .filters,

    .search-bar,

    .social-links,

    #resetFilters,

    header,

    footer{

        display:none !important;

    }

    .gallery{

        display:grid;

        grid-template-columns:
            repeat(2,1fr);

        gap:20px;

    }

    .craft-card{

        box-shadow:none;

        border:1px solid #bbb;

        break-inside:avoid;

    }

}

/*=========================================================
  ACCESSIBILITY
=========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*=========================================================
  DARK MODE (Future Ready)
=========================================================*/

@media (prefers-color-scheme:dark){

    :root{

        --craft-bg:#232323;

        --craft-card:#2f2f2f;

        --craft-border:#444;

        --craft-text:#f3f3f3;

        --craft-light:#c8c8c8;

    }

}

/*=========================================================
  END
=========================================================*/