/**
 * DIME Landing - Gallery Carousel Page Styles
 * Custom styles for the gallery carousel page
 */

/* ============================================================
   PAGE HEADER — Elegant page title
   ============================================================ */
.page-header-gallery {
   position: relative;
   padding: var(--space-16) 0;
   background: linear-gradient(
      135deg,
      var(--color-primary-50) 0%,
      rgba(0, 102, 204, 0.05) 100%
   );
   border-bottom: 1px solid var(--color-gray-100);
   overflow: hidden;
}

.page-header-gallery::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 400px;
   height: 400px;
   background: radial-gradient(
      circle,
      rgba(0, 102, 204, 0.08) 0%,
      transparent 70%
   );
   pointer-events: none;
}

.page-header-gallery h1 {
   font-family: var(--font-display);
   font-size: var(--text-5xl);
   font-weight: var(--font-bold);
   color: var(--text-primary);
   margin-bottom: var(--space-3);
}

.page-header-gallery .lead {
   font-size: var(--text-lg);
   color: var(--text-muted);
   max-width: 500px;
}

/* ============================================================
   QUOTE CARDS — Main content, like live site
   ============================================================ */
.gallery-section {
   padding: var(--space-16) 0;
   background: var(--bg-primary);
}

.gallery-quote-card {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   background: var(--bg-primary);
   border-radius: var(--radius-2xl);
   overflow: hidden;
   border: 1px solid var(--color-gray-200);
   transition: all var(--transition-slow) ease;
   text-decoration: none;
}

.gallery-quote-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-2xl);
   border-color: var(--color-primary-100);
}

.gallery-quote-card .card-img-wrapper {
   position: relative;
   height: 240px;
   overflow: hidden;
}

.gallery-quote-card .card-img-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--transition-slow) ease;
}

.gallery-quote-card:hover .card-img-wrapper img {
   transform: scale(1.08);
}

.gallery-quote-card .card-img-wrapper::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 50%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
   pointer-events: none;
}

.gallery-quote-card .card-category {
   position: absolute;
   top: var(--space-4);
   left: var(--space-4);
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-4);
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
   border-radius: var(--radius-full);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--color-primary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.gallery-quote-card .card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: var(--space-6);
}

.gallery-quote-card .quote-mark {
   font-family: var(--font-display);
   font-size: 4rem;
   line-height: 1;
   color: var(--color-primary-100);
   margin-bottom: -1.25rem;
   opacity: 0.5;
}

.gallery-quote-card p {
   flex: 1;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   line-height: var(--leading-relaxed);
   margin-bottom: var(--space-5);
}

.gallery-quote-card .card-link {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--color-primary);
   text-decoration: none;
   transition: gap var(--transition-fast) ease;
}

.gallery-quote-card:hover .card-link {
   gap: var(--space-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
   .gallery-quote-card .card-img-wrapper {
      height: 200px;
   }
}

@media (max-width: 767.98px) {
   .page-header-gallery h1 {
      font-size: var(--text-4xl);
   }

   .gallery-quote-card {
      margin-bottom: var(--space-4);
   }

   .gallery-thumb-item {
      width: 80px;
      height: 80px;
   }
}