/* Trocroy — page-level layout & grids. */

.page-main { padding-bottom: 24px; }

/* ─── Hero ────────────────────────────────────────────── */
.hero {
  margin: 24px var(--page-pad);
  padding: 36px 40px;
  border-radius: 22px;
  background: var(--primary);
  color: #fff;
  position: relative;
  overflow: hidden;
  max-width: calc(1280px - 2 * var(--page-pad));
}
@media (min-width: 1336px) {
  .hero { margin-left: auto; margin-right: auto; }
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

.hero-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 10px;
  color: #fff;
  max-width: 22ch;
}
.hero-accent { color: var(--accent); }

.hero-body {
  margin-top: 14px;
  max-width: 60ch;
  line-height: 1.45;
  color: #D5DAE6;
  font-size: 15px;
}

.hero-cta {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Hero-scoped overrides for buttons — need 2-class specificity to beat .btn.* */
.hero .btn.primary {
  background: #fff;
  color: var(--primary);
  border-color: transparent;
}
.hero .btn.primary:hover { background: #F5F0E6; color: var(--primary); }
.hero .btn.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.hero .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  color: #D5DAE6;
  font-size: 12px;
}
.hero-stats > div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats-num {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* ─── Item detail wrapper (gallery + side) ───────────── */
.detail-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 14px;
}

/* ─── Layout with sidebar (category page) ─────────────── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-top: 4px;
}
.layout-with-sidebar .results { min-width: 0; /* prevent grid overflow */ }

/* ─── Cat grid (homepage) ─────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ─── Listing grids ───────────────────────────────────── */
.listings-grid {
  display: grid;
  gap: 14px;
}
.listings-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.listings-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ─── Responsive (mobile-first overrides for desktop layouts) ─ */
@media (max-width: 1023px) {
  .hero { padding: 28px 26px; }
  .hero-stats { margin-top: 24px; }
  .listings-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1023px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
  .filters { border-right: 0; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  /* Compact filter lists on small viewports — each option becomes an inline pill on a single row. */
  .filters .filter-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .filters .filter-list li label {
    padding: 6px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    background: var(--surface);
    cursor: pointer;
  }
  .filters .filter-list li .check { display: none; }
  .filters .filter-list li label:has(input:checked),
  .filters .filter-list li.on label {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
}

@media (max-width: 640px) {
  .hero {
    margin: 16px var(--page-pad-mobile);
    padding: 22px;
    border-radius: 18px;
    gap: 18px;
  }
  .hero-title { font-size: 26px; }
  .hero-body { font-size: 14px; }
  .hero-stats { gap: 18px; }
  .hero-cta .btn { flex: 1; }

  .cat-grid { grid-template-columns: 1fr; }
  /* Grid mode: 2 cols on mobile. List mode (set via JS toggle) wins via .list-view rule below. */
  .listings-grid.cols-4:not(.list-view),
  .listings-grid.cols-5:not(.list-view) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .listings-grid.list-view { grid-template-columns: 1fr; }

  /* Item page: gallery above details (already 1 col via grid stack), gallery itself goes full-width with thumbs scrolling below. */
  .detail-wrap { grid-template-columns: 1fr; gap: 18px; padding: 0 var(--page-pad-mobile); }
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .gallery-main { order: 1; cursor: zoom-in; }
  .gallery-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumb { width: 60px; flex-shrink: 0; }

  .section-head { margin: 20px 0 10px; }
  .section-head h2 { font-size: 17px; }

  .site-header-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .searchbar { order: 3; flex-basis: 100%; }
  .header-actions .btn.ghost { display: none; }
  .brand .tag { display: none; }

  .catbar-inner { overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .catbar-inner::-webkit-scrollbar { display: none; }

  .site-footer-inner { grid-template-columns: 1fr; gap: 20px; }
}