/* ===================================================
   CASA ARUMA
   MEDIA CENTER v1.0
=================================================== */

.media-center{
    background:#ffffff;
}

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

.media-hero{

    padding:180px 0 120px;

    text-align:center;

}

.media-label{

    display:block;

    color:#6A847F;

    letter-spacing:.35em;

    text-transform:uppercase;

    font-size:.8rem;

    margin-bottom:20px;

}

.media-hero h1{

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

    line-height:.88;

    margin-bottom:25px;

    text-transform:uppercase;

}

.media-hero p{

    max-width:850px;

    margin:auto;

    font-size:1.25rem;

    color:#666;

}

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

.media-grid{

    padding-bottom:140px;

}

.media-grid .container{

    display:grid;

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

    gap:70px;

}

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

.media-card{

    display:block;

    text-decoration:none;

    color:#000;

    overflow:hidden;

}

.media-card img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    transition:.6s;

}

.media-card:hover img{

    transform:scale(1.04);

}

.media-info{

    padding:35px 10px 0;

}

.media-info h2{

    font-size:2.2rem;

    margin-bottom:15px;

    line-height:1.1;

}

.media-info p{

    color:#666;

    line-height:1.7;

    margin-bottom:25px;

}

.media-info span{

    display:inline-block;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    font-size:.8rem;

    color:#6A847F;

    transition:.3s;

}

.media-card:hover span{

    transform:translateX(10px);

}

/* ======================================
   HOVER
====================================== */

.media-card{

    transition:.35s;

}

.media-card:hover{

    transform:translateY(-8px);

}

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

@media(max-width:1100px){

.media-grid .container{

grid-template-columns:1fr;

gap:80px;

}

}

@media(max-width:768px){

.media-hero{

padding:140px 0 80px;

}

.media-hero h1{

font-size:4rem;

}

.media-hero p{

font-size:1rem;

}

.media-info h2{

font-size:1.8rem;

}

.media-grid{

padding-bottom:80px;

}

}
/* ===================================================
   SINGLE EVENT
=================================================== */

.media-single-hero{

    position:relative;

    height:90vh;

    overflow:hidden;

}

.media-single-hero img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.media-single-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    align-items:flex-end;

}

.media-single-overlay .container{

    padding-bottom:90px;

}

.media-single-overlay h1{

    color:white;

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

    line-height:.9;

}

.media-single-content{

    padding:120px 0;

}

.media-description{

    max-width:900px;

    margin:auto;

    font-size:1.25rem;

    line-height:1.9;

}

.media-gallery{

    padding-bottom:140px;

}

.gallery-grid{

    column-count:3;

    column-gap:22px;

}

.gallery-item{

    display:block;

    margin-bottom:22px;

    break-inside:avoid;

}

.gallery-item img{

    width:100%;

    height:auto;

    display:block;

    border-radius:4px;

    transition:.45s ease;

}

.gallery-item:hover img{

    transform:scale(1.02);

}

@media(max-width:900px){

.gallery-grid{

column-count:2;

}

}

@media(max-width:768px){

.gallery-grid{

column-count:1;

}

.gallery-grid{

grid-template-columns:1fr;

}

.media-description{

font-size:1.05rem;

}

}

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

.aruma-lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.95);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

}

.aruma-lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox-image{

max-width:90vw;

max-height:90vh;

object-fit:contain;

box-shadow:0 30px 70px rgba(0,0,0,.5);

}

.lightbox-close{

position:absolute;

top:40px;

right:60px;

font-size:55px;

color:white;

cursor:pointer;

}

.lightbox-prev,

.lightbox-next{

position:absolute;

top:50%;

transform:translateY(-50%);

font-size:65px;

color:white;

cursor:pointer;

padding:20px;

user-select:none;

}

.lightbox-prev{

left:40px;

}

.lightbox-next{

right:40px;

}

.lightbox-counter{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

color:white;

letter-spacing:.2em;

text-transform:uppercase;

font-size:.8rem;

}

@media(max-width:768px){

.lightbox-prev,

.lightbox-next{

font-size:42px;

}

.lightbox-close{

right:25px;

top:20px;

font-size:42px;

}

}