/* ==========================================================================
   GALLERY PAGE STYLES — Udet Jasso Artist Portfolio
   ==========================================================================
   
   Styles specific to the gallery page (collections/index.html). This is
   the most complex page, featuring:
   
   1. Gallery Hero — Atmospheric header with overlay
   2. Search/Filter Bar — Controls for searching and filtering artworks
   3. Masonry-like Gallery Grid — CSS columns-based layout
   4. Artwork Cards — Individual pieces with hover effects
   5. About the Process — Information section at the bottom
   
   The gallery uses CSS columns (not CSS Grid) for the masonry layout,
   because CSS columns naturally handle variable-height items by flowing
   content down each column, creating the Pinterest/masonry effect.
   
   This file builds on top of css/styles.css which must be loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 1: Gallery Hero
   --------------------------------------------------------------------------
   A compact hero section at the top of the gallery page. Shorter than
   the home page hero — just enough to establish atmosphere and display
   the page title. Uses a background image with dark overlay.
   ========================================================================== */

.gallery-hero {
   min-height: 40vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: var(--space-2xl) var(--space-lg);
   position: relative;
   z-index: 1;
}

/* Background image wrapper — positioned behind the text content */
.hero-image-wrapper {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero-image-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Dark overlay on top of the background image to ensure text readability */
.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(26, 20, 35, 0.6) 0%,
      rgba(26, 20, 35, 0.8) 100%
   );
}

/* Text content sits above the overlay */
.gallery-hero-content {
   position: relative;
   z-index: 1;
   max-width: 700px;
}

.gallery-hero-title {
   font-family: var(--font-heading);
   font-size: clamp(2.5rem, 6vw, 5rem);
   color: var(--color-text);
   text-shadow:
      0 0 40px rgba(216, 167, 177, 0.3),
      0 0 80px rgba(216, 167, 177, 0.15);
   margin-bottom: var(--space-md);
   line-height: 1.1;
}

.gallery-hero-description {
   font-family: var(--font-body);
   font-size: 1.15rem;
   color: var(--color-text);
   opacity: 0.7;
   line-height: 1.7;
}


/* --------------------------------------------------------------------------
   SECTION 2: Search and Filter Controls
   --------------------------------------------------------------------------
   A horizontal bar containing search input, category filter buttons,
   result count, and clear-filters button. Sticky below the nav bar.
   ========================================================================== */

.gallery-controls {
   position: sticky;
   top: var(--nav-height);
   z-index: 100;
   background-color: var(--color-panel);
   border-bottom: 1px solid var(--color-accent-primary);
   padding: var(--space-md) var(--space-lg);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

/* Search container */
.search-container {
   max-width: var(--max-width);
   margin: 0 auto var(--space-md);
}

/* Search input */
.gallery-search {
   width: 100%;
   max-width: 400px;
   background-color: rgba(26, 20, 35, 0.6);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius);
   padding: 0.6rem var(--space-md);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: 1rem;
   transition:
      border-color var(--transition-speed) var(--transition-ease),
      box-shadow var(--transition-speed) var(--transition-ease);
}

.gallery-search::placeholder {
   color: var(--color-text);
   opacity: 0.4;
}

.gallery-search:focus {
   outline: none;
   border-color: var(--color-text);
   box-shadow: 0 0 12px rgba(216, 167, 177, 0.25);
}

/* Category filter buttons */
.category-filters {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
   justify-content: center;
   margin-bottom: var(--space-md);
}

.category-btn {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--color-text);
   background-color: transparent;
   border: 1px solid var(--color-accent-primary);
   border-radius: 20px;
   padding: 0.35rem 1rem;
   cursor: pointer;
   transition:
      background-color var(--transition-speed) var(--transition-ease),
      border-color var(--transition-speed) var(--transition-ease),
      box-shadow var(--transition-speed) var(--transition-ease);
   white-space: nowrap;
}

.category-btn:hover {
   background-color: rgba(55, 37, 73, 0.4);
   border-color: var(--color-text);
}

.category-btn:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 2px;
}

.category-btn.active {
   background-color: var(--color-accent-primary);
   border-color: var(--color-text);
   color: var(--color-white);
   box-shadow: 0 0 10px rgba(216, 167, 177, 0.2);
}

/* Gallery meta: result count and clear button */
.gallery-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: var(--max-width);
   margin: 0 auto;
}

.result-count {
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--color-text);
   opacity: 0.6;
}

.clear-filters {
   font-family: var(--font-body);
   font-size: 0.9rem;
   color: var(--color-text);
   background: none;
   border: none;
   cursor: pointer;
   text-decoration: underline;
   text-underline-offset: 2px;
   opacity: 0.6;
   transition: opacity var(--transition-speed) var(--transition-ease);
}

.clear-filters:hover {
   opacity: 1;
}

.clear-filters:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   SECTION 3: Gallery Masonry Grid
   --------------------------------------------------------------------------
   The core gallery layout uses CSS columns to create a masonry layout.
   column-count: 3 on desktop, 2 on tablet, 1 on mobile.
   ========================================================================== */

.artwork-grid {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: var(--space-xl) var(--space-lg);
   column-count: 3;
   column-gap: var(--space-lg);
   position: relative;
   z-index: 1;
}


/* --------------------------------------------------------------------------
   SECTION 4: Artwork Cards
   --------------------------------------------------------------------------
   Each artwork is rendered as a card within the masonry columns.
   break-inside: prevent card from splitting across columns.
   ========================================================================== */

.artwork-card {
   break-inside: avoid;
   margin-bottom: var(--space-lg);
   border-radius: var(--border-radius);
   overflow: hidden;
   border: 1px solid var(--color-accent-primary);
   position: relative;
   transition:
      box-shadow var(--transition-speed) var(--transition-ease),
      transform var(--transition-speed) var(--transition-ease);
}

.artwork-card:hover {
   box-shadow: 0 0 20px rgba(216, 167, 177, 0.3), 0 0 40px rgba(216, 167, 177, 0.15);
   transform: translateY(-3px);
}

/* The link wrapping the card content */
.artwork-link {
   display: block;
   text-decoration: none;
   color: inherit;
}

/* Artwork image — no fixed height, allowing the masonry effect */
.artwork-link img {
   width: 100%;
   display: block;
   object-fit: cover;
   transition: transform 500ms ease;
}

.artwork-card:hover .artwork-link img {
   transform: scale(1.04);
}

/* Hover overlay — shows artwork title and category */
.artwork-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      transparent 100%
   );
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: var(--space-lg);
   opacity: 0;
   transition: opacity var(--transition-speed) var(--transition-ease);
}

.artwork-card:hover .artwork-overlay,
.artwork-card:focus-within .artwork-overlay {
   opacity: 1;
}

.artwork-overlay h3 {
   font-family: var(--font-heading);
   font-size: 1.3rem;
   color: var(--color-white);
   margin-bottom: var(--space-xs);
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.artwork-overlay p {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--color-text);
   font-style: italic;
}

/* Keyboard focus style */
.artwork-card:focus-within {
   outline: 2px solid var(--color-text);
   outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   SECTION 5: No Results Message
   --------------------------------------------------------------------------
   Shown when search/filter criteria match no artworks.
   ========================================================================== */

.no-results {
   text-align: center;
   padding: var(--space-xl) var(--space-lg);
   font-family: var(--font-body);
   font-size: 1.1rem;
   color: var(--color-text);
   opacity: 0.6;
   font-style: italic;
}

.no-results .clear-filters-inline {
   color: var(--color-text);
   background: none;
   border: none;
   cursor: pointer;
   text-decoration: underline;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   opacity: inherit;
}

.no-results .clear-filters-inline:focus-visible {
   outline: 2px solid var(--color-text);
   outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   SECTION 6: About the Process Section
   --------------------------------------------------------------------------
   An informational section at the bottom of the gallery page.
   Uses shared panel styling. Placed in normal document flow.
   ========================================================================== */

.about-process {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: var(--space-xl) var(--space-lg) var(--space-2xl);
   position: relative;
   z-index: 1;
}

.about-process .content-panel {
   background-color: var(--color-panel);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius);
   padding: var(--space-xl);
}

.about-process p {
   font-family: var(--font-body);
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--color-text);
   opacity: 0.85;
   margin-bottom: var(--space-md);
}

.about-process p:last-child {
   margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   SECTION 7: Responsive Layout
   ========================================================================== */

/* ---- Tablet (768px) ---- */
@media (max-width: 768px) {
   .artwork-grid {
      column-count: 2;
      column-gap: var(--space-md);
      padding: var(--space-lg) var(--space-md);
   }

   .gallery-controls {
      padding: var(--space-md);
   }

   .gallery-search {
      max-width: none;
   }

   .gallery-hero {
      min-height: 30vh;
   }

   .gallery-meta {
      flex-direction: column;
      gap: var(--space-sm);
      align-items: center;
   }
}

/* ---- Small mobile (480px) ---- */
@media (max-width: 480px) {
   .artwork-grid {
      column-count: 1;
      padding: var(--space-md) var(--space-sm);
   }

   .artwork-overlay {
      opacity: 1;
   }

   .category-btn {
      font-size: 0.85rem;
      padding: 0.3rem 0.8rem;
   }

   .gallery-hero-title {
      font-size: 2rem;
   }

   .about-process .content-panel {
      padding: var(--space-lg);
   }
}


/* --------------------------------------------------------------------------
   SECTION 8: prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
   .artwork-card:hover {
      transform: none;
   }

   .artwork-link img {
      transition: none;
   }
}