/* ============================================================
   Delight Sarangi Museum – Shared Stylesheet
   Pure CSS — no build tools required
   Laravel compatible
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1a1a1a; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* ---- Typography ---- */
.font-serif { font-family: 'Playfair Display', serif; }

/* ---- Navbar scroll shadow ---- */
.navbar-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.09); }

/* ---- Mobile menu slide ---- */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-menu.open { max-height: 600px; }

/* ---- Hero gradient ---- */
.hero-overlay {
    background: linear-gradient(to right, #F5EFE6 28%, rgba(245,239,230,0.45) 55%, transparent 100%);
}

/* ---- Program card hover ---- */
.program-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.program-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.10); }

/* ---- Gallery image wrap ---- */
.gallery-img-wrap { overflow: hidden; border-radius: 1rem; }
.gallery-img-wrap img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.gallery-img-wrap:hover img { transform: scale(1.06); }

/* ---- Testimonial card ---- */
.testimonial-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.testimonial-card.active {
    border-color: rgba(201,168,76,0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* ---- Modal overlay ---- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; }

/* ---- Pulse animation for play button ---- */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.pulse-btn { animation: pulse-ring 2s infinite; }

/* ---- Page hero banner (inner pages) ---- */
.page-hero {
    background: linear-gradient(135deg, #8B1A1A 0%, #5a1010 100%);
    padding: 120px 24px 60px;
    text-align: center;
    color: white;
}
.page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
}
.page-hero p  { color: rgba(255,255,255,0.75); margin-top: 12px; font-size: 15px; }

/* ---- Breadcrumb ---- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.breadcrumb a { color: #C9A84C; }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* ---- Blog card ---- */
.blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }

/* ---- Contact form input ---- */
.form-input {
    width: 100%;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 12px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
    font-family: 'Inter', sans-serif;
    background: white;
}
.form-input:focus { border-color: #8B1A1A; }

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #8B4513; border-radius: 3px; }

/* ---- Logo image ---- */
.site-logo {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
}
.site-logo-sm {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
}
/* White tint for footer logo */
.site-logo-light {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ---- Hover utilities ---- */
.hover\:text-\[\#8B1A1A\]:hover { color: #8B1A1A; }
.hover\:text-\[\#C9A84C\]:hover { color: #C9A84C; }
.hover\:bg-\[\#6d1515\]:hover { background-color: #6d1515; }
.hover\:bg-\[\#b8973b\]:hover { background-color: #b8973b; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:border-\[\#8B1A1A\]:hover { border-color: #8B1A1A; }
.hover\:border-\[\#C9A84C\]:hover { border-color: #C9A84C; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:text-white:hover { color: white; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:gap-3:hover { gap: .75rem; }

/* ---- Responsive Navbar ---- */
@media (min-width: 1024px) {
    .lg\:hidden { display: none !important; }
    .lg\:flex  { display: flex !important; }
    .lg\:block { display: block !important; }
}
@media (max-width: 1023px) {
    .lg\:flex   { display: none !important; }
    .lg\:block  { display: none !important; }
    .lg\:hidden { display: flex !important; }
}
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
    .md\:col-span-5   { grid-column: span 5 / span 5; }
    .md\:col-span-7   { grid-column: span 7 / span 7; }
    .md\:col-span-4   { grid-column: span 4 / span 4; }
    .md\:col-span-8   { grid-column: span 8 / span 8; }
    .md\:flex-row     { flex-direction: row; }
    .md\:text-left    { text-align: left; }
    .md\:hidden       { display: none !important; }
    .md\:flex         { display: flex !important; }
    .md\:block        { display: block !important; }
    .md\:order-1      { order: 1; }
    .md\:order-2      { order: 2; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
    .md\:h-auto { height: auto; }
    .md\:h-\[380px\] { height: 380px; }
    .md\:h-\[420px\] { height: 420px; }
    .md\:h-\[440px\] { height: 440px; }
    .md\:h-\[460px\] { height: 460px; }
    .md\:h-screen { height: 100vh; }
    .md\:rounded-none { border-radius: 0; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .lg\:col-span-1  { grid-column: span 1 / span 1; }
    .lg\:flex-row    { flex-direction: row; }
    .lg\:text-left   { text-align: left; }
    .lg\:px-8        { padding-left: 2rem; padding-right: 2rem; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    .lg\:text-\[60px\] { font-size: 60px; line-height: 1.06; }
}