/**
 * AG Fashion Hub - Page-Specific Styles
 * Unique layouts and components for each page type
 * 
 * Pages included:
 * - Home page (hero, featured sections)
 * - Collections listing page
 * - Single collection page (with filters)
 * - Product detail page (gallery, info)
 * - Blog listing page
 * - Single blog post page
 */


/* ==================== HOME PAGE ==================== */

/**
 * Hero Section - Full-width banner with overlay
 */
.hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-dark);
}

.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-light);
  padding: var(--spacing-xl) var(--spacing-md);
  max-width: 800px;
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: var(--color-light);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: var(--color-light);
}

@media (min-width: 768px) {
  .hero {
    min-height: 70vh;
  }
  
  .hero__title {
    font-size: var(--font-size-5xl);
  }
  
  .hero__subtitle {
    font-size: var(--font-size-xl);
  }
}

/**
 * Collections Carousel Section
 */
.collections-carousel {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-light);
}

.carousel {
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-xl);
}

.carousel__track {
  display: flex;
  gap: var(--spacing-lg);
  transition: transform 0.5s var(--transition-ease);
}

.carousel__track > * {
  flex: 0 0 100%;
  max-width: 100%;
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--color-light);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  color: var(--color-dark);
  transition: var(--transition-all);
  z-index: 10;
}

.carousel__btn:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
  transform: translateY(-50%) scale(1.1);
}

.carousel__btn--prev {
  left: var(--spacing-md);
}

.carousel__btn--next {
  right: var(--spacing-md);
}

@media (min-width: 768px) {
  .carousel__track > * {
    flex: 0 0 calc(50% - var(--spacing-lg) / 2);
    max-width: calc(50% - var(--spacing-lg) / 2);
  }
}

@media (min-width: 1024px) {
  .carousel__track > * {
    flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
    max-width: calc(33.333% - var(--spacing-lg) * 2 / 3);
  }
}

/**
 * Featured Collection Section
 */
.featured-collection {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-bg-section);
}

/**
 * Instagram Feed Section
 */
.instagram-feed {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-light);
}

#instagram-widget {
  margin-top: var(--spacing-xl);
}

/**
 * Blog Highlights Section
 */
.blog-highlights {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-bg-section);
}


/* ==================== COLLECTIONS PAGE ==================== */

.collections-page {
  padding: var(--spacing-xl) 0;
}


/* ==================== SINGLE COLLECTION PAGE ==================== */

.collection-single {
  padding: var(--spacing-xl) 0;
}

.collection-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.collection-description {
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}
/*
 * Collection Page 2-Column Layout
 * -------------------------------
 */

/* 1. On large screens (1024px+), create the grid */
@media (min-width: 1024px) {
  
  /* Target the layout container *specifically* on this page */
  main.collection-single .collection-layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: 25% 1fr; /* 25% sidebar, 1fr takes the rest */
    gap: 32px;
  }
  
  /* Assign the sidebar to its area */
  main.collection-single .collection-layout__sidebar {
    grid-area: sidebar;
  }
  
  /* Assign the main content to its area */
  main.collection-single .collection-layout__main {
    grid-area: main;
  }

  /* * 2. Re-style the filter bar to stack vertically inside the new sidebar 
   */
  main.collection-single .collection-layout__sidebar .filter-bar {
    flex-direction: column;    /* Stack filters top-to-bottom */
    align-items: stretch;    /* Make inputs full-width */
    /*background: var(--color-light);*/
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    /*box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);*/
    display: flex;
  }
  
  main.collection-single .collection-layout__sidebar .filter-group {
    width: 100%; /* Make each filter dropdown full-width */
  }
}

/* * 3. On mobile (screens *under* 1024px)
 * We just add a simple gap between the filters and the grid.
 */
@media (max-width: 1023px) {
  .collection-layout__sidebar {
    margin-bottom: var(--space-lg);
  }
}

/* Mobile-specific font size for collection description */
@media (max-width: 767px) {
  .collection-description {
    font-size: var(--font-size-sm); /* 14px for mobile */
  }
}


/**
 * Filter Bar - for filtering designs by price, color, occasion
 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  /*background-color: var(--color-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);*/
  margin-bottom: var(--spacing-xl);
}

.filter-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;  
}

.filter-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-dark);
  
}

.filter-select {
  /*padding: var(--spacing-sm);*/
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  background-color: var(--color-light);
  cursor: pointer;
  transition: var(--transition-all);
  /* Filter Dropdown Button Position */
  background-position: right 4rem center;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(161, 35, 144, 0.1);
}

.no-results {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--color-text);
}

.no-results p {
  font-size: var(--font-size-lg);
}


/* ==================== PRODUCT DETAIL PAGE ==================== */

.product-detail {
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }
}

/**
 * Product Gallery - Main image with thumbnails
 */
.product-gallery {
  position: relative;
  align-self: start;
}

/* Only enable sticky on desktop where side-by-side layout works */
@media (min-width: 1024px) {
  .product-gallery {
    position: sticky;
    top: calc(var(--spacing-xl) + 60px); /* Account for header */
  }
}

.gallery__main {
  position: relative;
  width: 100%;
  padding-top: 133.33%; /* 3:4 aspect ratio */
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.gallery__main img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.gallery__zoom {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  transition: var(--transition-all);
  z-index: 10;
}

.gallery__zoom:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
  transform: scale(1.1);
}

.gallery__thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--spacing-sm);
}

.gallery__thumbnails img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-all);
}

.gallery__thumbnails img:hover,
.gallery__thumbnails img.active {
  border-color: var(--color-primary);
  opacity: 1;
}

.gallery__thumbnails img:not(.active) {
  opacity: 0.6;
}

/**
 * Product Details - Info, pricing, CTA
 */
.product-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.product-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
  color: var(--color-dark);
}

.product-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
}

.info-item {
  display: flex;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.info-item strong {
  min-width: 120px;
  color: var(--color-dark);
}

.info-item span {
  color: var(--color-text);
}

/* Override for badges inside info-item - ensure white text */
.info-item .badge--success,
.info-item .badge--danger {
  color: var(--color-light) !important;
}

.product-sizes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.size-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.size-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.size-guide-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.product-description {
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

.product-description p {
  margin-bottom: var(--spacing-sm);
}

.product-care {
  padding: var(--spacing-md);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-secondary);
}

/* Product Actions - Share and Enquiry Buttons */
.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
  .product-actions {
    flex-direction: row;
    gap: var(--spacing-md);
  }
  
  .product-actions .btn {
    flex: 1;
  }
}

/**
 * Related Designs Section
 */
.related-designs {
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
}

/**
 * Lightbox - Full-screen image viewer
 */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox__content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-light);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
  backdrop-filter: blur(10px);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.lightbox__close {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
}

.lightbox__prev {
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
}


/* ==================== BLOG PAGES ==================== */

/**
 * Blog Listing Page
 */
.blogs-page {
  padding: var(--spacing-xl) 0;
}

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-2xl);
  }
}

/**
 * Blog Sidebar
 */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.sidebar-widget {
  background-color: var(--color-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.sidebar-widget h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-dark);
}

.category-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.category-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: var(--transition-all);
  color: var(--color-text);
  text-decoration: none;
}

.category-list a:hover {
  background-color: var(--color-bg-section);
  color: var(--color-primary);
}

.category-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/**
 * Pagination
 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-2xl);
  flex-wrap: wrap;
}

.pagination__btn {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-all);
  text-decoration: none;
}

.pagination__btn:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

.pagination__btn.active {
  background-color: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

.pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/**
 * Single Blog Post Page
 */
.blog-single {
  padding: var(--spacing-xl) 0;
}

.blog-article {
  background-color: var(--color-light);
}

.article-image {
  width: 100%;
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-header {
  margin-bottom: var(--spacing-xl);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.article-categories {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.article-categories a {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-all);
}

.article-categories a:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.article-title {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  color: var(--color-dark);
}

@media (min-width: 768px) {
  .article-title {
    font-size: var(--font-size-4xl);
  }
}

.article-content {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--spacing-2xl);
}

.article-content h2,
.article-content h3,
.article-content h4 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-dark);
}

.article-content p {
  margin-bottom: var(--spacing-md);
}

.article-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--spacing-xl) 0;
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

.article-content li {
  margin-bottom: var(--spacing-sm);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.article-tags a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition-all);
}

.article-tags a::before {
  content: '#';
  color: var(--color-text-light);
}

.article-tags a:hover {
  background-color: var(--color-secondary);
  color: var(--color-light);
}

/**
 * Social Share Buttons
 */
.article-share {
  padding: var(--spacing-xl);
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  text-align: center;
}

.article-share h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  color: var(--color-dark);
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-all);
}

.share-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.share-btn--whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-light);
}

.share-btn--whatsapp:hover {
  background-color: #1FB855;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.share-btn--facebook {
  background-color: #1877F2;
  color: var(--color-light);
}

.share-btn--facebook:hover {
  background-color: #145DBF;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/**
 * Article Navigation (Back to Blog button)
 */
.article-navigation {
  margin-top: var(--spacing-xl);
  text-align: center;
}

/* ==================== STATIC PAGES ==================== */

/**
 * Privacy Policy & Terms Pages
 */
.static-page {
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.static-page h1 {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.static-page h2 {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
}

.static-page h3 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
}

.static-page p,
.static-page ul,
.static-page ol {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

.static-page ul,
.static-page ol {
  padding-left: var(--spacing-xl);
}

.static-page li {
  margin-bottom: var(--spacing-sm);
}