/* Section Tint Color System — Session 68 */
/* Subtle background fades + left-border accents for page-specific wayfinding */

/* ========== PAGE LOAD ANIMATION ========== */
@keyframes tint-fade-in {
  from {
    opacity: 0;
    background: #fcf9f3;
  }
  to {
    opacity: 1;
  }
}

body[class*="section-"] {
  animation: tint-fade-in 0.8s ease-out forwards;
}

/* ========== ARCHIVE PAGE ========== */
body.section-archive {
  background: linear-gradient(
    to bottom,
    rgba(227, 191, 177, 0.15) 0%,
    transparent 320px
  ), #fcf9f3;
}

/* ========== ABOUT PAGE ========== */
body.section-about {
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 235, 0.2) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-about .content-block,
body.section-about .about-section,
body.section-about [class*="section"] {
  border-left: 3px solid rgba(11, 11, 11, 0.15);
  margin-left: -2px;
  padding-left: calc(1rem + 2px);
}

body.section-about h2,
body.section-about h3 {
  border-left: 3px solid rgba(11, 11, 11, 0.1);
  margin-left: -2px;
  padding-left: calc(1rem + 2px);
}

/* ========== COLLECTIONS/SERIES PAGES ========== */
body.section-collections {
  background: linear-gradient(
    to bottom,
    rgba(200, 180, 160, 0.08) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-collections .series-card,
body.section-collections .collection-item,
body.section-collections .theme-card {
  border-left: 3px solid rgba(142, 113, 100, 0.3);
  margin-left: -2px;
}

body.section-collections .grid [class*="card"],
body.section-collections .masonry [class*="card"] {
  border-left: 3px solid rgba(142, 113, 100, 0.2);
  margin-left: -2px;
}

/* ========== DECADE PAGES (1970s–2020s) ========== */
body.section-decades {
  background: linear-gradient(
    to bottom,
    rgba(227, 191, 177, 0.12) 0%,
    transparent 300px
  ), #fdf8f8;
}

body.section-decades .decade-card,
body.section-decades [role="article"] {
  border-left: 3px solid rgba(142, 113, 100, 0.25);
  margin-left: -2px;
}

/* ========== MEDIUM PAGES (Collage, Sculpture, Photography, etc.) ========== */
body.section-collage {
  background: linear-gradient(
    to bottom,
    rgba(210, 185, 165, 0.12) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-collage .grid [class*="card"],
body.section-collage [class*="thumb"] {
  border-left: 3px solid rgba(210, 185, 165, 0.4);
  margin-left: -2px;
}

body.section-sculpture {
  background: linear-gradient(
    to bottom,
    rgba(180, 170, 160, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-sculpture .grid [class*="card"],
body.section-sculpture [class*="thumb"] {
  border-left: 3px solid rgba(180, 170, 160, 0.35);
  margin-left: -2px;
}

body.section-photography {
  background: linear-gradient(
    to bottom,
    rgba(170, 165, 155, 0.13) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-photography .grid [class*="card"],
body.section-photography [class*="thumb"] {
  border-left: 3px solid rgba(170, 165, 155, 0.35);
  margin-left: -2px;
}

body.section-painting {
  background: linear-gradient(
    to bottom,
    rgba(220, 200, 180, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-painting .grid [class*="card"],
body.section-painting [class*="thumb"] {
  border-left: 3px solid rgba(220, 200, 180, 0.3);
  margin-left: -2px;
}

body.section-lost {
  background: linear-gradient(
    to bottom,
    rgba(195, 185, 175, 0.12) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-lost .grid [class*="card"],
body.section-lost [class*="ghost-tile"] {
  border-left: 3px solid rgba(195, 185, 175, 0.35);
  margin-left: -2px;
}

/* ========== SERIES & THEME PAGES ========== */
body.section-series {
  background: linear-gradient(
    to bottom,
    rgba(200, 190, 180, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-series .series-card,
body.section-series .theme-card,
body.section-series [class*="card"] {
  border-left: 3px solid rgba(142, 113, 100, 0.25);
  margin-left: -2px;
}

/* ========== FAVORITES PAGE ========== */
body.section-favorites {
  background: linear-gradient(
    to bottom,
    rgba(255, 200, 150, 0.08) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-favorites .grid [class*="card"],
body.section-favorites [class*="thumb"] {
  border-left: 3px solid rgba(255, 152, 0, 0.2);
  margin-left: -2px;
}

/* ========== START HERE PAGE ========== */
body.section-start {
  background: linear-gradient(
    to bottom,
    rgba(220, 210, 200, 0.12) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-start .content-block,
body.section-start [class*="card"] {
  border-left: 3px solid rgba(220, 210, 200, 0.3);
  margin-left: -2px;
}

/* ========== THEME PAGES ========== */

/* Guernica — red/bold */
body.section-guernica {
  background: linear-gradient(
    to bottom,
    rgba(224, 89, 0, 0.08) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-guernica .grid [class*="card"],
body.section-guernica [class*="thumb"] {
  border-left: 3px solid rgba(224, 89, 0, 0.25);
  margin-left: -2px;
}

/* Targets — geometric/structured */
body.section-targets {
  background: linear-gradient(
    to bottom,
    rgba(200, 170, 150, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-targets .grid [class*="card"],
body.section-targets [class*="thumb"] {
  border-left: 3px solid rgba(200, 170, 150, 0.3);
  margin-left: -2px;
}

/* Framed — contained/bordered */
body.section-framed {
  background: linear-gradient(
    to bottom,
    rgba(180, 160, 150, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-framed .grid [class*="card"],
body.section-framed [class*="thumb"] {
  border-left: 3px solid rgba(142, 113, 100, 0.28);
  margin-left: -2px;
}

/* Torsos & Faces — figurative */
body.section-torsos {
  background: linear-gradient(
    to bottom,
    rgba(190, 170, 160, 0.11) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-torsos .grid [class*="card"],
body.section-torsos [class*="thumb"] {
  border-left: 3px solid rgba(190, 170, 160, 0.32);
  margin-left: -2px;
}

/* Crosses — spiritual */
body.section-crosses {
  background: linear-gradient(
    to bottom,
    rgba(210, 190, 170, 0.09) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-crosses .grid [class*="card"],
body.section-crosses [class*="thumb"] {
  border-left: 3px solid rgba(210, 190, 170, 0.28);
  margin-left: -2px;
}

/* Mr. SNOWmann — playful */
body.section-snowmann {
  background: linear-gradient(
    to bottom,
    rgba(200, 210, 220, 0.09) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-snowmann .grid [class*="card"],
body.section-snowmann [class*="thumb"] {
  border-left: 3px solid rgba(200, 210, 220, 0.3);
  margin-left: -2px;
}

/* Gallery Images — photographic */
body.section-gallery-images {
  background: linear-gradient(
    to bottom,
    rgba(160, 150, 140, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-gallery-images .grid [class*="card"],
body.section-gallery-images [class*="thumb"] {
  border-left: 3px solid rgba(160, 150, 140, 0.3);
  margin-left: -2px;
}

/* Collaboration — warm/connected */
body.section-collaboration {
  background: linear-gradient(
    to bottom,
    rgba(220, 190, 170, 0.1) 0%,
    transparent 320px
  ), #fcf9f3;
}

body.section-collaboration .grid [class*="card"],
body.section-collaboration [class*="thumb"] {
  border-left: 3px solid rgba(220, 190, 170, 0.3);
  margin-left: -2px;
}

/* ========== PAGE TRANSITIONS (Navigation) ========== */
/* After animation, enable transition for navigation */
body[class*="section-"] { transition: background 0.6s ease-out; }

/* ========== EXTENDED HOVER STATES ========== */
/* All grid cards - hover with accent border highlight */
.grid [class*="card"]:hover,
.grid [class*="thumb"]:hover,
[class*="card"]:hover {
  border-left-color: currentColor;
  opacity: 0.95;
}

/* ========== BREADCRUMB COLORING ========== */
.breadcrumb, [class*="breadcrumb"] {
  color: inherit;
}
.breadcrumb a, [class*="breadcrumb"] a {
  color: #B84700;
  transition: color 0.2s ease;
}
.breadcrumb a:hover, [class*="breadcrumb"] a:hover {
  color: #FF6600;
}

/* ========== MOBILE NAV DRAWER TINTING ========== */
#mobile-menu-drawer {
  background: linear-gradient(to bottom, rgba(252, 249, 243, 0.98) 0%, #fcf9f3 80%);
}
body.section-archive #mobile-menu-drawer {
  background: linear-gradient(to bottom, rgba(227, 191, 177, 0.08) 0%, #fcf9f3 80%);
}
body.section-about #mobile-menu-drawer {
  background: linear-gradient(to bottom, rgba(245, 240, 235, 0.12) 0%, #fcf9f3 80%);
}
body.section-collage #mobile-menu-drawer {
  background: linear-gradient(to bottom, rgba(210, 185, 165, 0.08) 0%, #fcf9f3 80%);
}
body.section-sculpture #mobile-menu-drawer {
  background: linear-gradient(to bottom, rgba(180, 170, 160, 0.08) 0%, #fcf9f3 80%);
}

/* ========== RESPONSIVE: MOBILE/TABLET ========== */
/* Fade off on smaller screens — reduce visual noise on mobile */
@media (max-width: 1199px) {
  body.section-archive,
  body.section-about,
  body.section-collections,
  body.section-decades,
  body.section-collage,
  body.section-sculpture,
  body.section-photography,
  body.section-painting,
  body.section-lost,
  body.section-series,
  body.section-favorites,
  body.section-start {
    background: #fcf9f3 !important;
    background: #fdf8f8 !important;
  }
}

/* Reduce border width on mobile to avoid clutter */
@media (max-width: 768px) {
  body.section-archive .archive-card,
  body.section-archive .thumb,
  body.section-about .content-block,
  body.section-about .about-section,
  body.section-collections .series-card,
  body.section-collections .collection-item,
  body.section-decades .decade-card,
  body.section-decades [role="article"] {
    border-left-width: 2px;
    margin-left: -1px;
  }
}

/* Fade out heading accents on very small screens */
@media (max-width: 640px) {
  body.section-about h2,
  body.section-about h3 {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  body[class*="section-"] {
    animation: none;
    transition: none;
    background: #fcf9f3;
  }
}

/* ========== DARK MODE SUPPORT ========== */
@media (prefers-color-scheme: dark) {
  body.section-archive {
    background: linear-gradient(to bottom, rgba(227, 191, 177, 0.2) 0%, transparent 320px), #1a1a1a;
  }
  body.section-about {
    background: linear-gradient(to bottom, rgba(245, 240, 235, 0.25) 0%, transparent 320px), #1a1a1a;
  }
  body.section-collage {
    background: linear-gradient(to bottom, rgba(210, 185, 165, 0.15) 0%, transparent 320px), #1a1a1a;
  }
  #mobile-menu-drawer {
    background: linear-gradient(to bottom, rgba(100, 90, 80, 0.3) 0%, #2a2a2a 80%);
  }
}