/**
 * Homepage v2.0 - Grid & Filter Styles
 * @description Mixed content grid, category pills, load more button
 * @task Homepage Full Redesign
 * @version 1.0.0
 * @date 2026-02-16
 */

/* ==========================================================================
   Category Pills
   ========================================================================== */

.cat-bar {
  padding: 3rem 0;
}

.cat-pills {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.cat-pills::-webkit-scrollbar {
  display: none;
}

/* Visual styling (padding, radius, border, typography, hover)
 * provided by DS .btn.btn--pill. Markup now uses
 * `class="btn btn--pill cat-pill"` — this rule only keeps positional
 * bits (scroll-snap flex-shrink + no underline for <a> variant).
 * Category-specific active background colors remain below.
 * @task pill unification
 */
.cat-pill {
  flex-shrink: 0;
  text-decoration: none;
  /* MP25 44px floor: hit-zone lives INSIDE the box — a ::before overlay would
     be clipped by the overflow-x:auto scroll container. Keep compact visual
     via existing .btn--pill padding/font; only the box height grows. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Category pill active states (category color overrides DS .btn--pill.active) */
.cat-pill.active {
  color: #fff;
  border-color: transparent;
}
.cat-pill[data-c="all"].active          { background: var(--color-text); color: var(--color-bg); }
.cat-pill[data-c="artists"].active      { background: var(--color-cat-artists); }
.cat-pill[data-c="interview"].active    { background: var(--color-cat-interview); }
.cat-pill[data-c="community"].active    { background: var(--color-cat-community); }
.cat-pill[data-c="models"].active       { background: var(--color-cat-models); }
.cat-pill[data-c="trends"].active       { background: var(--color-cat-trends); }
.cat-pill[data-c="knowledge"].active    { background: var(--color-cat-knowledge); }
.cat-pill[data-c="events"].active       { background: var(--color-cat-events); }
.cat-pill[data-c="equipment"].active    { background: var(--color-cat-equipment); }
.cat-pill[data-c="news"].active         { background: var(--color-cat-community); }
.cat-pill[data-c="tattoos"].active      { background: var(--color-cat-trends); }
.cat-pill[data-c="studios"].active      { background: var(--color-cat-interview); }
.cat-pill[data-c="styles"].active       { background: var(--color-cat-knowledge); }
.cat-pill[data-c="announcements"].active { background: var(--color-cat-events); }

/* ==========================================================================
   Featured Grid — 5-col with tall left cards and 16:9 right card
   ========================================================================== */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 1.25rem;
}

/* Standard cards in featured grid: stretch full height */
.featured-grid .card--overlay {
  height: 100%;
  aspect-ratio: unset;
}

.featured-grid .card--overlay a {
  height: 100%;
}

/* The span-2 card on the right: 16:9 */
.featured-span-2 {
  grid-column: span 2;
}

.featured-grid .featured-span-2 .card--overlay a {
  aspect-ratio: 16 / 9;
  height: auto;
}

@media (max-width: 639px) {
  .featured-grid { grid-template-columns: 1fr; }
  .featured-span-2 { grid-column: span 1; }
  .featured-grid .card--overlay {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .featured-grid .featured-span-2 .card--overlay {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-span-2 { grid-column: span 2; }
  .featured-grid .card--overlay {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ==========================================================================
   Events Row (horizontal scroll)
   ========================================================================== */

.events-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
}

.events-row::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Load More — visual styles unified in design-system/components/button.css
   (.load-more__btn, aliases: .load-more-btn, .masters-load-more-btn, ...)
   ========================================================================== */

.load-more-wrap {
  text-align: center;
  padding: 2.5rem 0;
}

/* ==========================================================================
   Editorial Grid (Sectional Articles)
   ========================================================================== */

.editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .editorial-span-2 { grid-column: span 2; }
}

@media (min-width: 1024px) {
  .editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .editorial-span-2 { grid-column: span 2; }
}

/* ==========================================================================
   Events Grid (Sectional Events)
   ========================================================================== */

.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .events-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* ==========================================================================
   Horizontal Scroll Row
   ========================================================================== */

.h-scroll-wrap {
  position: relative;
}

.h-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.25rem 0.25rem 1rem;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.h-scroll::-webkit-scrollbar {
  display: none;
}

.h-scroll:active {
  cursor: grabbing;
}

/* Fade edge on right */
.h-scroll-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to left, var(--color-bg), transparent);
  pointer-events: none;
}

/* ==========================================================================
   Mobile Responsive Overrides
   ========================================================================== */

/* Show only 3 cards on mobile in articles row */
@media (max-width: 639px) {
  .grid--4-mobile-3 > :nth-child(n+4) {
    display: none;
  }
  .cat-bar {
  padding: 2rem 0;
}
}

/* Hide featured grid section on mobile */
@media (max-width: 639px) {
  .featured-section {
    display: none;
  }
}