/* ==========================================================================
   CV / CURRICULUM VITAE PAGE STYLES — Udet Jasso Artist Portfolio
   ==========================================================================

   Styles specific to the CV page (cv.html). The CV is structured as
   a series of sections (Education, Exhibitions, Awards, etc.), each
   containing dated entries.

   HTML structure:
   <main id="main-content">
     <div class="cv-container">
       <h1 class="page-title">Curriculum Vitae</h1>
       <section class="cv-section reveal">
         <h2 class="cv-heading">Education</h2>
         <ul class="cv-entries">
           <li><span class="cv-entry">...</span></li>
         </ul>
       </section>
     </div>
   </main>

   Design goals:
   - Clean, scannable section-based layout
   - Clear visual hierarchy: section headings → entries → details
   - Dark translucent panels for each section
   - Metal Mania for section headings, EB Garamond for entries
   - Responsive: readable on all screen sizes

   This file builds on top of css/styles.css which must be loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 1: CV Container
   --------------------------------------------------------------------------
   The main container that holds all CV sections. Max-width constrains
   the layout, auto margins center it, and flexbox stacks sections
   vertically with consistent spacing.
   -------------------------------------------------------------------------- */

.cv-container {
   max-width: var(--max-width-narrow);
   margin: 0 auto;
   padding: var(--space-xl) var(--space-lg);
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
   position: relative;
   z-index: 1;
   flex: 1;
}


/* --------------------------------------------------------------------------
   SECTION 2: Page Title
   --------------------------------------------------------------------------
   The shared "Curriculum Vitae" heading styled with Metal Mania and
   centered at the top of the container.
   -------------------------------------------------------------------------- */

.page-title {
   font-family: var(--font-heading);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   color: var(--color-text);
   text-align: center;
   margin-bottom: var(--space-sm);
   text-shadow: 0 0 20px rgba(216, 167, 177, 0.2);
}


/* --------------------------------------------------------------------------
   SECTION 3: CV Section
   --------------------------------------------------------------------------
   Each major section of the CV (Education, Exhibitions, Awards, etc.)
   is wrapped in a .cv-section. Each section has:
   - A dark translucent panel background
   - A midnight-purple border
   - A Metal Mania section heading
   - A list of entries (exhibitions, publications, etc.)
   -------------------------------------------------------------------------- */

.cv-section {
   background-color: var(--color-panel);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius-lg);
   padding: var(--space-xl) var(--space-lg);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
   transition: box-shadow var(--transition-speed) var(--transition-ease);
}

/* Subtle glow on hover — draws attention to the section being read */
.cv-section:hover {
   box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(216, 167, 177, 0.08);
}


/* --------------------------------------------------------------------------
   SECTION 4: Section Heading
   --------------------------------------------------------------------------
   The heading for each CV section (e.g., "Solo Exhibitions",
   "Education", "Awards"). Uses the Metal Mania display font for
   a gothic-romantic aesthetic.

   A decorative bottom border creates a visual separator between the
   heading and the entries below.
   -------------------------------------------------------------------------- */

.cv-heading {
   font-family: var(--font-heading);
   font-size: clamp(1.4rem, 3vw, 2rem);
   color: var(--color-text);
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-md);
   /* Decorative bottom border — a thin line in midnight purple with
      a subtle pink glow */
   border-bottom: 1px solid var(--color-accent-primary);
   position: relative;
   text-shadow: 0 0 15px rgba(216, 167, 177, 0.15);
}

/* Decorative accent dot at the start of the heading */
.cv-heading::before {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   background-color: var(--color-text);
   border-radius: 50%;
   margin-right: var(--space-sm);
   vertical-align: middle;
   box-shadow: 0 0 8px rgba(216, 167, 177, 0.4);
}


/* --------------------------------------------------------------------------
   SECTION 5: CV Entries List
   --------------------------------------------------------------------------
   Individual entries within a section. Each entry is a single line
   of text (date, title, institution, etc.) displayed as a span inside
   a list item. Entries are stacked vertically with consistent spacing.
   -------------------------------------------------------------------------- */

.cv-entries {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   list-style: none;
}

/* A single CV entry — displayed as a clean single line of text */
.cv-entry {
   display: block;
   padding: var(--space-sm) 0;
   font-family: var(--font-body);
   font-size: 1.05rem;
   line-height: 1.6;
   color: var(--color-text);
   opacity: 0.9;
   /* Bottom border separates entries */
   border-bottom: 1px solid rgba(55, 37, 73, 0.3);
}

/* Remove bottom border from the last entry in each section */
.cv-entries li:last-child .cv-entry {
   border-bottom: none;
}


/* --------------------------------------------------------------------------
   SECTION 6: Responsive Layout
   --------------------------------------------------------------------------
   Adapt the CV layout for smaller screens.
   -------------------------------------------------------------------------- */

/* ---- Tablet (768px) ---- */
@media screen and (max-width: 768px) {
   .cv-container {
      padding: var(--space-lg) var(--space-md);
   }

   .cv-section {
      padding: var(--space-lg) var(--space-md);
   }
}

/* ---- Small mobile (480px) ---- */
@media screen and (max-width: 480px) {
   .cv-section {
      padding: var(--space-md);
   }

   .cv-heading {
      font-size: 1.3rem;
   }

   .cv-entry {
      font-size: 1rem;
   }
}


/* --------------------------------------------------------------------------
   SECTION 7: prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
   .cv-section {
      transition: none;
   }
}