/*==================================================
VEDIC SPIRITUALS - DIGITAL ASHRAM
ASHRAM.CSS (Part 1 - Foundation)
==================================================*/


/*****************************************
ASHRAM HERO
*****************************************/

.ashram-hero{

    min-height:100vh;
    padding-top:110px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    overflow:hidden;

    background:
    linear-gradient(rgba(20,20,20,.45),
    rgba(20,20,20,.35),
    rgba(20,20,20,.55)),
    url("../images/himalayas-morning2.jpg");

    background-size:containr;
    background-position:center 20%;
    background-repeat:no-repeat;

}

/*****************************************
ASHRAM HERO CONTENT
*****************************************/

.ashram-hero .hero-content{

    max-width:900px;
    text-align:center;
    padding:0 20px;

}

.ashram-hero h1{

    font-size:4.5rem;
    font-weight:700;
    color:#fff;
    line-height:1.15;
    margin-bottom:20px;

}

.ashram-hero .hero-text{

    font-size:1.45rem;
    font-weight:500;
    line-height:1.9;
    color:#fff;
    max-width:700px;
    margin:30px auto 0;

}

/* TODAY'S WISDOM */
.today-wisdom{padding:100px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-label{letter-spacing:4px;color:var(--gold)}
.gold-line{
 width:80px;height:2px;background:var(--gold);
 margin:20px auto;
}
.wisdom-card{
 max-width:900px;
 margin:auto;
 background:#fff;
 border-radius:12px;
 padding:50px;
 box-shadow:var(--shadow);
 border-top:4px solid var(--gold);
}
.wisdom-category{color:var(--gold);text-transform:uppercase}
#dailyShloka{
 font-size:2rem;
 margin:20px 0;
 text-align:center;
}
#dailyMeaning,#dailyReflection,#dailyPractice{
 line-height:1.9;
 margin-top:15px;
}


/*==================================================
MEDITATION HALL
==================================================*/

.meditation-section{

padding:120px 0;

background:#f8f6f1;

}

.meditation-card{

max-width:850px;

margin:70px auto 0;

background:#fff;

padding:60px;

border-radius:20px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

text-align:center;

}

.meditation-time{

display:inline-block;

padding:10px 24px;

background:#d4af37;

color:#fff;

font-size:.75rem;

letter-spacing:3px;

border-radius:30px;

margin-bottom:30px;

}

.meditation-card h3{

font-size:2rem;

margin-bottom:25px;

font-family:var(--heading-font);

}

.meditation-card p{

line-height:2;

font-size:1.1rem;

color:#555;

max-width:520px;

margin:auto;

}

.meditation-player{

width:100%;

margin-top:40px;

}
/*==================================================
ASHRAM LIBRARY
==================================================*/

.library-section{

padding:120px 0;

background:#fff;

}

.library-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.library-card{

background:#faf7f2;

padding:45px;

border-radius:18px;

text-decoration:none;

transition:.35s;

border:1px solid rgba(212,175,55,.18);

}

.library-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.library-card h3{

font-size:1.5rem;

margin-bottom:20px;

color:#222;

}

.library-card p{

line-height:1.8;

color:#666;

margin-bottom:30px;

}

.library-card span{

color:#b88b2c;

font-weight:600;

letter-spacing:1px;

}
/*==================================================
SACRED MUSIC
==================================================*/

.music-section{

padding:120px 0;

background:#f8f6f1;

}

.music-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.music-card{

display:block;

padding:30px;

background:white;

text-align:center;

text-decoration:none;

font-size:1.05rem;

color:#333;

border-radius:15px;

transition:.35s;

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

}

.music-card:hover{

background:#d4af37;

color:white;

transform:translateY(-8px);

}
/*==================================================
AUDIO PLAYER
==================================================*/

audio{

border-radius:50px;

overflow:hidden;

}
/*==================================================
ASHRAM FOOTER
==================================================*/

.ashram-footer{

padding:90px 0;

background:#1e1e1e;

color:#d8d8d8;

text-align:center;

}

.ashram-footer h3{

font-size:2rem;

font-weight:400;

margin-bottom:20px;

color:#fff;

}

.ashram-footer p{

max-width:700px;

margin:0 auto 40px;

line-height:1.9;

color:#bfbfbf;

}

.footer-actions{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:40px;

}

.return-home,
.back-top{

padding:14px 34px;

border:1px solid #b88b2c;

color:#b88b2c;

text-decoration:none;

border-radius:40px;

transition:.3s;

}

.return-home:hover,
.back-top:hover{

background:#b88b2c;

color:#fff;

}

.footer-copy{

font-size:.9rem;

color:#8f8f8f;

margin-top:20px;

}
.wisdom-meta{

display:flex;
justify-content:center;
align-items:center;
gap:10px;

margin:20px 0 30px;

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

color:#b9974d;

font-weight:600;

}

.wisdom-meta .dot{

opacity:.5;

}

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

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

@media (max-width:768px){

    /* Hero */

    .ashram-hero{

        background-position:center110%;
        min-height:75vh;
        padding:140px 20px 70px;

    }

    .ashram-hero .hero-content{

        max-width:100%;
        padding:0 10px;

    }

    .ashram-hero h1{

        font-size:3rem;
        line-height:1.15;
        margin-bottom:18px;

    }

    .ashram-hero .hero-text{

        font-size:1.15rem;
        line-height:1.9;

    }

    /* Wisdom */

    .stone-tablet{

        padding:30px 22px;

    }

    #dailyShloka{

        font-size:1.8rem;
        line-height:1.8;

    }

    #dailyRoman{

        font-size:1rem;

    }

    #dailyMeaning,
    #dailyReflection,
    #dailyPractice{

        font-size:1rem;
        line-height:1.9;

    }

    /* Cards */

    .meditation-card{

        padding:35px 25px;

    }

    .library-grid,
    .music-grid{

        grid-template-columns:1fr;

    }

    /* Footer */

    .footer-actions{

        flex-direction:column;
        align-items:center;

    }

    .return-home,
    .back-top{

        width:100%;
        max-width:280px;
        text-align:center;

    }

}