/*
  LAYOUT SYSTEM
  CSS Grid-based page layouts + container utilities

  Purpose: Defines page structure and responsive behavior
  Learning: CSS Grid is perfect for 2D layouts (rows + columns)
*/

/* ============================================
   CONTAINER
   Centers content and adds responsive padding
   ============================================ */

/*
  Why .container: Creates consistent max-width and centering
  Mobile-first: Full width on mobile, max-width on desktop
*/
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Wider container option (if needed for full-bleed sections) */
.container--wide {
  max-width: 1400px;
}

/* No padding variant (for edge-to-edge content) */
.container--flush {
  padding-left: 0;
  padding-right: 0;
}


/* ============================================
   PAGE LAYOUT (CSS GRID)
   Defines overall page structure using named grid areas
   ============================================ */

/*
  Why CSS Grid: Easy to visualize and reorganize at breakpoints
  Named areas read like ASCII art of the layout
*/
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);

  /*
    Mobile layout: Single column stack
    Learning: grid-template-areas creates named regions
  */
  grid-template-areas:
    "hero"
    "news"
    "featured";
}

/* Tablet and up: Add whitespace, larger gaps */
@media (min-width: 768px) {
  .page-layout {
    gap: var(--space-3xl);
  }
}

/* Desktop: Could add sidebar or multi-column layouts */
@media (min-width: 1024px) {
  .page-layout {
    gap: var(--space-4xl);
  }
}

/*
  Assign sections to grid areas
  Learning: grid-area connects HTML elements to named regions
*/
.hero {
  grid-area: hero;
}

.news-section {
  grid-area: news;
}

.featured-section {
  grid-area: featured;
}


/* ============================================
   SECTION SPACING
   Consistent vertical rhythm for all sections
   ============================================ */

section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}


/* ============================================
   FLEXBOX UTILITIES
   For component-level alignment (not page layout)
   ============================================ */

/*
  Why Flexbox: Best for 1D layouts (single row or column)
  Use cases: Navigation items, button groups, card internals
*/

.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

/* Alignment */
.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
  align-items: center;
}

.flex--start {
  justify-content: flex-start;
  align-items: center;
}

.flex--end {
  justify-content: flex-end;
  align-items: center;
}

/* Gaps (spacing between flex items) */
.flex--gap-sm {
  gap: var(--space-sm);
}

.flex--gap-md {
  gap: var(--space-md);
}

.flex--gap-lg {
  gap: var(--space-lg);
}


/* ============================================
   GRID UTILITIES
   Reusable grid patterns for content
   ============================================ */

/*
  News Grid: Card-based layout
  Learning: auto-fit + minmax creates responsive columns without media queries
*/
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/*
  Generic 2-column grid (for album cards, image galleries)
  Learning: minmax(0, 1fr) prevents grid blowout with long content
*/
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .grid-2-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================
   HERO SECTION LAYOUT
   Special layout for hero/banner section
   ============================================ */

.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--color-burnt-umber) 0%,
    var(--color-coal-black) 100%
  );
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: var(--z-base);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.hero__logo {
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

.hero__tagline {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-3xl);
  color: var(--color-text-primary);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Mobile portrait: Aggressive fix for logo centering */
@media (max-width: 767px) {
  .hero .container {
    padding-left: var(--space-xs);   /* Reduce from 16px to 8px */
    padding-right: var(--space-xs);
  }

  .hero__content {
    padding: var(--space-sm);  /* Reduce from 48px to 16px */
  }

  .hero__logo {
    max-width: 280px;  /* Reduce from 400px to ensure centering room */
  }
}

@media (min-width: 768px) {
  .hero {
    min-height: 70vh;
  }

  .hero__logo {
    max-width: 500px;
  }

  .hero__tagline {
    font-size: var(--font-size-5xl);
  }
}


/* ============================================
   ALBUM CARD LAYOUT
   Featured release card (image + details)
   ============================================ */

/*
  LAYOUT STRATEGY:
  Mobile: Stacked vertical layout (image on top, details below)
  Desktop (1024px+): Side-by-side horizontal layout (image left 66.67%, details right 33.33%)

  WHY FLEXBOX INSTEAD OF CSS GRID:
  This component uses Flexbox rather than CSS Grid to match the behavior of
  .release-card--featured in components.css. Here's why:

  - CSS Grid calculates container height based on the tallest column, which can
    create gaps when columns have different content heights + padding
  - Flexbox naturally stretches flex items to match heights, preventing gaps
  - Percentage-based widths (66.67% / 33.33%) create fluid, proportional layouts
  - flex-shrink: 0 prevents the artwork from collapsing at smaller viewports

  This approach ensures:
  ✓ No visible gaps below the artwork
  ✓ Smooth responsive transitions
  ✓ Visual consistency with release cards on releases.html
*/
.album-card {
  display: flex;
  flex-direction: column;  /* Mobile: stack vertically */
  gap: var(--space-lg);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/*
  ARTWORK CONTAINER
  Contains the album cover image with aspect ratio control
*/
.album-card__artwork {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;  /* Forces square ratio on mobile */
  background-color: var(--color-iron-gray);
}

/*
  ALBUM COVER IMAGE
  Uses object-fit: contain to show full image without cropping

  Why object-fit: contain?
  - Shows the entire album artwork (no cropping)
  - Maintains original aspect ratio
  - Centers image within container
  - Preferred for album art where full artwork visibility is important
*/
.album-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  DETAILS SECTION
  Contains title, date, description, and action buttons
*/
.album-card__details {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/*
  DESKTOP LAYOUT (1024px+)
  Switches to horizontal side-by-side layout

  KEY CHANGES:
  - flex-direction: row creates horizontal layout
  - Artwork: 66.67% width (2/3 of container)
  - Details: 33.33% width (1/3 of container)
  - aspect-ratio: auto removes forced square on artwork at desktop
  - flex-shrink: 0 prevents artwork from shrinking when content is long
*/
@media (min-width: 1024px) {
  .album-card {
    flex-direction: row;  /* Desktop: side-by-side */
  }

  .album-card__artwork {
    width: 66.67%;     /* 2/3 width for prominent album art display */
    flex-shrink: 0;    /* Prevent artwork from shrinking */
    aspect-ratio: auto; /* Remove forced square; let image determine height */
  }

  .album-card__details {
    width: 33.33%;     /* 1/3 width for release information */
  }
}


/* ============================================
   SPACING UTILITIES
   Quick margin/padding adjustments
   ============================================ */

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Padding utilities */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }


/* ============================================
   TEXT ALIGNMENT UTILITIES
   ============================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }


/* ============================================
   SECTION HEADINGS
   Consistent styling for h2 section titles
   ============================================ */

.section-heading {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-lg);
  color: var(--color-primary);
  text-align: center;
  position: relative;
}

/* Optional: Decorative underline */
.section-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-aged-whiskey),
    var(--color-tarnished-brass)
  );
  margin: var(--space-sm) auto 0;
  border-radius: var(--border-radius-full);
}

@media (min-width: 768px) {
  .section-heading {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-xl);
  }
}