/* Syllabuses Page Styling - Space-optimized, self-contained */

/* Design tokens (self-contained so page doesn't depend on other theme files) */
:root {
  /* Colors */
  --primary-red: #D81118;
  --primary-blue: #005587;
  --red-dark: #A60E13;
  --white: #ffffff;
  --charcoal: #1f2937;
  --gray: #6b7280;
  --light-gray: #e5e7eb;

  /* Typography */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Spacing scale */
  --space-1: .25rem;  /* 4px */
  --space-2: .5rem;   /* 8px */
  --space-3: .75rem;  /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem;   /* 48px */
  --space-16: 4rem;   /* 64px */
  --space-20: 5rem;   /* 80px */

  /* Shadows */
  --shadow-subtle: 0 6px 16px rgba(0,0,0,.06);
  --shadow-soft: 0 12px 28px rgba(0,0,0,.12);
  --shadow-medium: 0 16px 36px rgba(0,0,0,.16);

  /* Easing */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

/* Base resets for this page only */
.page-hero, .section { font-family: var(--font-sans); }
* { box-sizing: border-box; }

/* Full-bleed Hero */
.page-hero {
  padding: var(--space-20) 0 var(--space-12);
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-blue) 100%);
  color: var(--white);
    position: relative;
    overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.page-hero .container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page-hero::before {
    content: '';
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=1920&h=1080&fit=crop&q=80') center/cover;
  opacity: .12;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(216,17,24,.9) 0%, rgba(0,85,135,.9) 100%);
}
.page-hero .kicker { color: rgba(255,255,255,.9); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-2); font-weight: 600; }
.page-hero h1 { color: #ffffff !important; margin: 0 0 var(--space-3); font-family: var(--font-serif); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; text-shadow: 0 6px 20px rgba(0,0,0,.35); -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; background: none; }
.page-hero p { color: rgba(255,255,255,.96); margin: 0; font-size: 1rem; max-width: 900px; }
.page-hero h1::after { content:''; display:block; width:100px; height:3px; margin-top: var(--space-3); background: rgba(255,255,255,.9); }

/* Section wrapper */
.section { padding: var(--space-12) 0; background: #ffffff; position: relative; }
.section::before { content: none; }

/* Intro */
.syllabus-intro { text-align: center; margin-bottom: var(--space-12); max-width: 980px; margin-left: auto; margin-right: auto; }
.syllabus-intro p { font-size: 1.05rem; line-height: 1.7; color: var(--gray); margin-bottom: var(--space-4); }

/* Grid - fixed 3 columns on desktop */
.syllabus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Revert to simple card: image banner on top + content visible */
.syllabus-section {
  display: block;
  --banner-h: 260px; /* height of top image */
  min-height: 520px;
  padding: var(--space-10);
  padding-top: calc(var(--banner-h) + var(--space-6)) !important; /* ensure content below image */
    position: relative;
    overflow: hidden;
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-subtle);
  background: #ffffff;
}

/* Safety reset for any old flip rules */
.syllabus-section h2,
.syllabus-section p,
.syllabus-section ul,
.syllabus-section a { transform: none !important; opacity: 1 !important; backface-visibility: visible !important; }

/* Top image banner */
.syllabus-section::before {
    content: '';
  position: absolute; left: 0; top: 0; width: 100%; height: var(--banner-h);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--light-gray);
  filter: saturate(1.04) contrast(1.04);
}

/* Reset overlay/panel */
.syllabus-section::after { content: none; }

/* Text content below image */
.syllabus-section h2 { position: relative; margin-top: 0; color: var(--charcoal); text-shadow: none; font-size: 1.8rem; }
.syllabus-section p { position: relative; opacity: 1; transform: none; margin-top: var(--space-6); }
.syllabus-section ul, .syllabus-section a { position: relative; opacity: 1; transform: none; }

/* Keep mapping images for each card */
.syllabus-grid > .syllabus-section:nth-child(1)::before { background-image:url('https://images.unsplash.com/photo-1513883049090-d0b7439799bf?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(2)::before { background-image:url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(3)::before { background-image:url('https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(4)::before { background-image:url('https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(5)::before { background-image:url('https://images.unsplash.com/photo-1529101091764-c3526daf38fe?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(6)::before { background-image:url('https://images.unsplash.com/photo-1507838153414-b4b713384a76?w=1200&h=800&fit=crop&q=80'); }
.syllabus-grid > .syllabus-section:nth-child(7)::before { background-image:url('https://images.unsplash.com/photo-1519682232786-d1e845e3da18?w=1600&h=1000&fit=crop&q=80'); }

/* Strong override for Cello (7th) front image */
.syllabus-grid > .syllabus-section:nth-of-type(7)::before {
  background-image: url('https://images.unsplash.com/photo-1506157786151-b8491531f063?w=1600&h=1000&fit=crop&q=80') !important; /* cello close-up */
}

/* Stable card: fixed height with banner = 2/3 of card */
.syllabus-section {
  display: block;
  height: 680px; /* desktop */
  padding: var(--space-8) var(--space-10);
  padding-top: calc(66% + var(--space-6)); /* reserve space under banner */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-subtle);
  background: #ffffff;
}

/* Banner (2/3 height of card) */
.syllabus-section::before {
  content: '';
  position: absolute; left: 0; top: 0; width: 100%; height: 66%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--light-gray);
  filter: saturate(1.04) contrast(1.04);
}

/* Reset children layout */
.syllabus-section > * { position: relative; transform: none !important; opacity: 1 !important; backface-visibility: visible !important; }

/* Content styles */
.syllabus-section h2 { margin: 0 0 var(--space-4); color: var(--charcoal); font-size: 1.8rem; }
.syllabus-section p { margin: 0 0 var(--space-4); }

/* CTA anchored bottom */
.syllabus-section { padding-bottom: calc(var(--space-10) + 50px); }
.syllabus-section .syllabus-link { position: absolute; left: var(--space-10); bottom: var(--space-10); }

/* Grid columns */
.syllabus-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

/* Card content */
.syllabus-section h2 { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--charcoal); margin: 0 0 var(--space-5); display:flex; align-items:center; gap: var(--space-2); line-height: 1.2; }
.syllabus-section h2::after { content:none; }

.syllabus-section p { font-size: 1.05rem; line-height: 1.65; color: var(--gray); margin: 0 0 var(--space-8); flex-grow: 1; }
.syllabus-section ul { list-style: none; margin: 0 0 var(--space-8); padding: 0; flex-grow: 1; }
.syllabus-section li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); font-size: 1rem; line-height: 1.5; color: var(--charcoal); }
.syllabus-section li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--primary-red); font-weight: 800; }

/* CTA link */
.syllabus-link { display:inline-flex; align-items:center; gap: var(--space-2); background: linear-gradient(135deg, var(--primary-red), var(--red-dark)); color:#fff; text-decoration:none; padding: var(--space-3) var(--space-5); border-radius: 0; font-weight: 700; font-size: .95rem; box-shadow: var(--shadow-subtle); margin-top: auto; align-self:flex-start; transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth); letter-spacing:.02em; }
.syllabus-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }
.syllabus-section { animation: fadeInUp .5s var(--ease-smooth) both; }
.syllabus-section:nth-child(1){animation-delay:.06s}.syllabus-section:nth-child(2){animation-delay:.12s}.syllabus-section:nth-child(3){animation-delay:.18s}.syllabus-section:nth-child(4){animation-delay:.24s}.syllabus-section:nth-child(5){animation-delay:.3s}.syllabus-section:nth-child(6){animation-delay:.36s}.syllabus-section:nth-child(7){animation-delay:.42s}

/* Details hidden by default */
.syllabus-section p,
.syllabus-section ul,
.syllabus-section a { opacity: 0; transform: translateY(12px); transition: transform .35s var(--ease-smooth), opacity .35s var(--ease-smooth); }

/* Hover state: zoom image, show overlay and details */
.syllabus-section:hover::before { transform: scale(1.05); filter: brightness(.75) saturate(1); }
.syllabus-section:hover::after { opacity: 1; }
.syllabus-section:hover p,
.syllabus-section:hover ul,
.syllabus-section:hover a { opacity: 1; transform: translateY(0); }

/* Keep layout stable */
.syllabus-section:hover { padding-top: calc(var(--media-h) + var(--space-8)); }

/* Two-face flip targeting explicit faces */
    .syllabus-section {
  position: relative;
  height: 680px;
  padding: 0;
  border: 1px solid var(--light-gray);
  box-shadow: var(--shadow-subtle);
  background: #ffffff;
  perspective: 1200px;
  overflow: hidden;
}

/* FRONT - full image */
.syllabus-section::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; height: 100% !important; background-position: center center; background-size: cover; background-repeat: no-repeat; transform: rotateY(0); transition: transform .6s var(--ease-smooth), opacity .4s var(--ease-smooth); backface-visibility: hidden; z-index: 1; }

/* Front face container (for overlay title) */
.syllabus-section .card-front {
  position: absolute; inset: 0;
  transform: rotateY(0);
  backface-visibility: hidden;
  z-index: 2;
}
.syllabus-section .title-overlay {
  position: absolute; left: var(--space-10); bottom: var(--space-10);
  color: #fff; font-size: 2rem; font-family: var(--font-serif);
  text-shadow: 0 12px 36px rgba(0,0,0,.6);
}

/* Back face - actual content */
.syllabus-section .card-back {
  position: absolute; left: var(--space-10); right: var(--space-10); top: var(--space-10); bottom: var(--space-10);
  background: #fff; overflow: auto;
  transform: rotateY(180deg) !important;
  opacity: 0 !important; backface-visibility: hidden;
  transition: transform .6s var(--ease-smooth), opacity .4s var(--ease-smooth);
  z-index: 3;
}
.syllabus-section .card-back h2 { margin: 0 0 var(--space-4); font-size: 1.8rem; color: var(--charcoal); }
.syllabus-section .card-back p { margin: 0 0 var(--space-4); }
.syllabus-section .card-back ul { margin: 0 0 var(--space-6); }

/* Flip on hover */
.syllabus-section:hover::before { transform: rotateY(-180deg); }
.syllabus-section:hover .card-front { transform: rotateY(-180deg); opacity: 0; }
.syllabus-section:hover .card-back { transform: rotateY(0) !important; opacity: 1 !important; }

/* Grid columns */
.syllabus-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .syllabus-grid { grid-template-columns: repeat(2, 1fr);} 
  .syllabus-section { height: 580px; }
}
@media (max-width: 768px) { 
  .syllabus-grid { grid-template-columns: 1fr;} 
  .syllabus-section { height: 520px; }
  .syllabus-section .card-back h2 { font-size: 1.5rem; }
}
@media (max-width: 480px) { .syllabus-section { padding: var(--space-5); } .syllabus-section h2 { font-size: 1.1rem; flex-direction: column; align-items: flex-start; gap: var(--space-1);} .syllabus-link { width: 100%; justify-content: center; padding: var(--space-4);} }