/* =============================================================================
   XmosaiX Design System — Shared Components
   ============================================================================= */

.section-shell {
  position: relative;
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.section-shell--compact {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.section-shell--flush-top {
  padding-top: 0;
}

.section-shell__container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding-left: var(--content-padding-x);
  padding-right: var(--content-padding-x);
}

.section-shell__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-shell__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section-view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-accent);
  color: var(--color-text-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.section-view-all:hover {
  color: var(--color-accent-light);
  border-bottom-color: var(--color-border-accent-strong);
}

.preview-item.tone-warm {
  background: var(--gradient-gallery-tone-warm);
}

.preview-item.tone-cool {
  background: var(--gradient-gallery-tone-cool);
}

.preview-item.tone-mono {
  background: var(--gradient-gallery-tone-mono);
}

.gallery-item[data-style="moody-1"] .card-placeholder { background: var(--gradient-portfolio-moody-1); }
.gallery-item[data-style="moody-2"] .card-placeholder { background: var(--gradient-portfolio-moody-2); }
.gallery-item[data-style="moody-3"] .card-placeholder { background: var(--gradient-portfolio-moody-3); }
.gallery-item[data-style="moody-4"] .card-placeholder { background: var(--gradient-portfolio-moody-4); }
.gallery-item[data-style="moody-5"] .card-placeholder { background: var(--gradient-portfolio-moody-5); }
.gallery-item[data-style="moody-6"] .card-placeholder { background: var(--gradient-portfolio-moody-6); }
.gallery-item[data-style="studio-1"] .card-placeholder { background: var(--gradient-portfolio-studio-1); }
.gallery-item[data-style="studio-2"] .card-placeholder { background: var(--gradient-portfolio-studio-2); }
.gallery-item[data-style="studio-3"] .card-placeholder { background: var(--gradient-portfolio-studio-3); }
.gallery-item[data-style="studio-4"] .card-placeholder { background: var(--gradient-portfolio-studio-4); }
.gallery-item[data-style="bw-1"] .card-placeholder { background: var(--gradient-portfolio-bw-1); }
.gallery-item[data-style="bw-2"] .card-placeholder { background: var(--gradient-portfolio-bw-2); }
.gallery-item[data-style="bw-3"] .card-placeholder { background: var(--gradient-portfolio-bw-3); }
.gallery-item[data-style="bw-4"] .card-placeholder { background: var(--gradient-portfolio-bw-4); }
.gallery-item[data-style="editorial-1"] .card-placeholder { background: var(--gradient-portfolio-editorial-1); }
.gallery-item[data-style="editorial-2"] .card-placeholder { background: var(--gradient-portfolio-editorial-2); }
.gallery-item[data-style="water-1"] .card-placeholder { background: var(--gradient-portfolio-water-1); }
.gallery-item[data-style="water-2"] .card-placeholder { background: var(--gradient-portfolio-water-2); }

.cover-21 { background: var(--gradient-cover-21); }
.cover-20 { background: var(--gradient-cover-20); }
.cover-19 { background: var(--gradient-cover-19); }
.cover-18 { background: var(--gradient-cover-18); }
.cover-17 { background: var(--gradient-cover-17); }
.cover-16 { background: var(--gradient-cover-16); }
.cover-15 { background: var(--gradient-cover-15); }
.cover-14 { background: var(--gradient-cover-14); }
.cover-13 { background: var(--gradient-cover-13); }
.cover-first { background: var(--gradient-cover-first); }

@media (max-width: 767px) {
  .section-shell {
    padding-top: var(--section-sm);
    padding-bottom: var(--section-sm);
  }
}