/* components.css - Reusable UI Components */

.section-title{
text-align:center;
margin-bottom:3rem;
}
.section-title p{
max-width:700px;
margin:1rem auto 0;
opacity:.85;
}

.card{
background:var(--velvet);
border:1px solid rgba(176,141,87,.18);
border-radius:var(--radius);
padding:2rem;
transition:.35s ease;
box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.card:hover{
transform:translateY(-8px);
border-color:var(--brass);
box-shadow:0 18px 40px rgba(176,141,87,.15);
}

.tea-card img,
.tarot-card img{
width:100%;
display:block;
border-radius:12px;
margin-bottom:1rem;
}

.card h3{
font-family:"Cormorant Garamond",serif;
font-size:2rem;
margin-bottom:.5rem;
color:var(--ivory);
}

.card .accent{
color:var(--brass);
text-transform:uppercase;
letter-spacing:.15em;
font-size:.8rem;
}

.grid-3{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
}

.quote-card{
max-width:800px;
margin:auto;
text-align:center;
padding:3rem;
border:1px solid rgba(176,141,87,.2);
border-radius:var(--radius);
background:linear-gradient(180deg,rgba(63,35,71,.18),transparent);
}

.newsletter-box{
max-width:700px;
margin:auto;
text-align:center;
padding:3rem;
background:var(--velvet);
border-radius:var(--radius);
}

footer .footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:2rem;
margin-top:2rem;
}

.divider{
width:120px;
height:2px;
margin:1.5rem auto;
background:linear-gradient(to right,transparent,var(--brass),transparent);
}