/* ==========================================================
   DADDYSROAD GALLERY
   Responsive Masonry Gallery
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#333;
}

header{
    background:#111;
    color:#fff;
    text-align:center;
    padding:60px 20px;
}

header h1{
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

header p{
    font-size:22px;
    opacity:.9;
}

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

.gallery{
    width:98%;
    max-width:1800px;
    margin:35px auto;
    column-gap:18px;
}

/* Extra Large Desktop */
@media (min-width:1600px){
    .gallery{
        column-count:5;
    }
}

/* Desktop */
@media (min-width:1200px) and (max-width:1599px){
    .gallery{
        column-count:4;
    }
}

/* Laptop / Tablet Landscape */
@media (min-width:768px) and (max-width:1199px){
    .gallery{
        column-count:3;
    }
}

/* Mobile */
@media (max-width:767px){
    .gallery{
        column-count:2;
    }
}

/* Small Mobile */
@media (max-width:480px){
    .gallery{
        column-count:1;
    }
}

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

.card{
    break-inside:avoid;
    margin-bottom:18px;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    cursor:pointer;
    transition:.3s;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.card img{
    width:100%;
    display:block;
    transition:transform .45s ease;
}

.card:hover img{
    transform:scale(1.05);
}

/* ==========================================================
   LIGHTBOX
========================================================== */

.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:40px;
}

.lightbox img{
    max-width:95%;
    max-height:92vh;
    border-radius:10px;
    box-shadow:0 0 40px rgba(255,255,255,.15);
}

.close{
    position:fixed;
    top:20px;
    right:30px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:38px;
    line-height:52px;
    text-align:center;
    cursor:pointer;
    z-index:10001;
    transition:.3s;
    user-select:none;
}

.close:hover{
    background:#FFD000;
    color:#111;
    transform:rotate(90deg);
}