:root {
--maroon:       #5c0a0a;
--dark-maroon:  #3a0404;
--saffron:      #E07b2a;
--gold:         #C9a227;
--pale-gold:    #F0d87a;
--ivory:        #Fdf6e3;
--cream:        #f7edd0;
--text-dark:    #2b1200;
--text-mid:     #5c3a1e;
--text-light:   #8b5e3c;
--gap-red:      #c0392b;
--gap-orange:   #d35400;
--gap-green:    #1e7b45;
--gap-blue:     #1a5276;
--card-bg:      #fffdf5;
--border-gold:  #c9a22755;
}

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

html{
    scroll-behavior: smooth;
}

body{
font-family: 'lora' , Georgia , serif;
background-color: var(--ivory);
color: var(--text-dark);
}
/* Bharat Before The West title  styling */

.hero{
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
background-image: url("https://media.assettype.com/homegrown%2Fimport%2Ffacebook-10334-Konark-Sun-Temple-Inside-the-hostoryhub11111.jpg?w=480&auto=format%2Ccompress");
background-size: cover;
background-position: center;
background-color: var(--dark-maroon); 
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 
        to bottom ,
     rgba(42 , 4 ,4 ,0.78) 0% ,
     rgba(42 ,4 ,4 , 0.65)60%   ,
     rgba(42 , 4 , 4 , 0.85)100%
                 );
z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
}

.hero-eyebrow {
font-family: 'Cinzel' , serif;
font-size: 0.85rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--pale-gold);
margin-bottom: 18px;
}

.hero-title {
font-family: 'Cinzel Decorative' , serif ;
font-size: clamp(2.4rem , 6vw , 5rem);
color: var(--pale-gold);
line-height: 1.15;
text-shadow: 0 4px 24px rgba(0,0,0,0.5);
margin-bottom: 16px;
}

.hero-subtitle {
font-family: 'Lora' , serif;
font-style: italic;
font-size: clamp(1rem , 2.5vw , 1.4rem);
color: var(--cream);
margin-bottom: 28px;
opacity: 0.9;
}

.hero-divider {
font-size: 1.6rem;
color: var(--gold);
margin-bottom: 24px;
letter-spacing: 8px;
}

.hero-note{
font-size: clamp(0.9rem , 1.8vw , 1.05rem);
color: var(--cream);
max-width: 680px;
margin: 0 auto;
opacity: 0.85;
border-left: 3px solid var(--saffron);
padding-left: 20px;
text-align: left;
line-height: 1.8;
}

.scroll-hint{
position: relative;
z-index: 1;
margin-top: 48px;
font-family: 'Cinzel' , serif ;
font-size: 0.8rem;
letter-spacing: 2px;
color: var(--pale-gold);
opacity: 0.6;
animation: bounce 2s infinite ;
}

@keyframes bounce {
0% , 100% { transform: translateY(0);}
50% { transform: translateY(8px);}
}


/*styling of section header  */

.section-header{
text-align: center;
padding: 60px 20px 10px;
}

.section-label {
display: inline-block;
font-family: 'Cinzel' , serif ;
font-size: 0.75rem ;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--saffron);
border-top: 1px solid var(--gold);
border-bottom:  1px solid var(--gold);
padding: 6PX 20PX;
margin-bottom: 10px;
}

.section-title {
font-family: 'Cinzel' , serif;
font-size: clamp(1.3rem , 3vw , 2rem);
color: var(--maroon);
margin-bottom: 4px;
}


/* styling of event/discovery cards  */

#events-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 80px;
}

.event-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 40px 0;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(92,10,10,0.13);
border: 1px solid var(--border-gold);
background: var(--card-bg);

opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease , transform 0.6s ease;
}

.event-card.visible{
opacity: 1;
transform: translateY(0);
}

/* alternate switching of image side  */
.event-card.flip-image{ direction: rtl;}
.event-card.flip-image > * { direction: ltr;}


/* image part  */

.card-image-wrap{
position: relative;
min-height: 360px;
overflow: hidden;
background: var(--dark-maroon);
}

.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.event-card :hover .card-image-wrap img{ transform: scale(1.04);}
.card-image-overlay{
position: absolute;
inset: 0;
background: linear-gradient(135deg , rgba(92,10,10,0.35) 0% , transparent 60%);
}

.card-info {
padding: 36px 36px 32px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--card-bg);
border-left: 4px solid var(--gold);
}

.event-card.flip-image .card-info{
border-left: none;
border-right: 4px solid var(--gold);
}

.card-category-tag {
font-family: 'Cinzel', serif;
font-size: 0.68rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--saffron);
margin-bottom: 8px;
}

.card-title {
font-family: 'Cinzel', serif;
font-size: clamp(1.1rem, 2.2vw, 1.6rem);
color: var(--maroon);
line-height: 1.25;
margin-bottom: 4px;
}

.card-source {
font-style: italic;
font-size: 0.83rem;
color: var(--text-light);
margin-bottom: 22px;
}

.card-rows {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 22px;
}

.card-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 10px;
align-items: start;
}

.row-label {
font-family: 'Cinzel', serif;
font-size: 0.7rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-light);
padding-top: 2px;
}

.row-value {
font-size: 0.92rem;
color: var(--text-dark);
line-height: 1.6;
}

.row-value.indian {
color: var(--maroon);
font-weight: 600;
}

.gap-badge {
display: inline-block;
font-family: 'Cinzel', serif;
font-size: 0.75rem;
letter-spacing: 1px;
padding: 5px 14px;
border-radius: 20px;
font-weight: 700;
color: #fff;
margin-top: 4px;
align-self: flex-start;
}

.gap-badge.red    { background: var(--gap-red); }
.gap-badge.orange { background: var(--gap-orange); }
.gap-badge.green  { background: var(--gap-green); }
.gap-badge.blue   { background: var(--gap-blue); }

/* website footer styling */
.site-footer {
background: var(--dark-maroon);
color: var(--cream);
text-align: center;
padding: 60px 30px;
}

.footer-ornament {
font-size: 1.4rem;
letter-spacing: 10px;
color: var(--gold);
margin-bottom: 28px;
}

.footer-sources {
font-size: 0.82rem;
color: var(--pale-gold);
margin-bottom: 20px;
opacity: 0.75;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.footer-disclaimer {
max-width: 700px;
margin: 0 auto 24px;
font-size: 0.88rem;
line-height: 1.8;
color: var(--cream);
opacity: 0.8;
border: 1px solid var(--gold);
border-opacity: 0.3;
padding: 20px 28px;
border-radius: 2px;
}

.footer-closing {
font-family: 'Cinzel', serif;
font-size: 1rem;
color: var(--pale-gold);
letter-spacing: 3px;
}

@media (max-width: 768px) {

.event-card { grid-template-columns: 1fr;}
.event-card.flip-image { direction: ltr;}
.card-image-wrap { min-height: 240px;}

.card-info {
border-left: none;
border-top: 4px solid var(--gold);
padding: 24px 20px;
}
.event-card.flip-image .card-info { border-right: none;
border-top: 4px solid var(--gold);}

.card-row { grid-template-columns: 1fr;
gap: 2px;}

.hero-note { font-size: 0.9rem;}

}