/* ==========================================================
   ⚙️ CODE CAVE — Universal quick-tuning zone
   Path: /ASKC_Dev_Structure/assets/css/codecave.css
   ========================================================== */

/* Global rhythm */
.section{ margin-block:var(--section-gap); padding-block:var(--space-md); }

/* Cards */
.card-list li{
  padding:var(--space-md) calc(var(--space-md)*1.25);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-soft);
  background:var(--bg-panel);
}

/* Container comfort */
.container{ padding-inline:var(--space-lg); margin-inline:auto; max-width:1120px; }

/* Utilities */
.pad-tight{ padding:var(--space-sm)!important; }
.pad-roomy{ padding:var(--space-lg)!important; }
.space-tight{ margin-block:var(--space-sm)!important; }
.space-roomy{ margin-block:var(--space-lg)!important; }

/* Debug (optional) */
.codecave-debug *{ outline:1px dashed rgba(0,0,0,.1); }

/* Future overrides:
   body{ background:var(--bg-alt); }
*/


/* CODECAVE — visual marker for temp / AI placeholders */
.pending-sample {
  position: relative;
  overflow: hidden;
}

.pending-sample::after {
  content: "SAMPLE — replace with live photo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(35,53,101,.55), rgba(35,53,101,.45));
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.3vw, 1rem);
  pointer-events: none;
}

/* Universal button polish (matches brand.css variables) */
button, .btn {
  cursor: pointer;
  font: inherit;
  border-radius: 8px;
  transition: all 0.15s ease-in-out;
}

/* Soft shadow hover feedback for cards only. */
.card-list li:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Subtle backdrop for “construction” pages */
body.construction {
  background: linear-gradient(180deg, #fafafa, #f2f2f2);
}

/* Typography smoothing (safe for all browsers) */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Apply tokens */
html, body { background: var(--bg); color: var(--ink); }
.section { background: transparent; }
.card-list li { background: var(--bg-elev); border: 1px solid var(--rule); }
a { color: var(--brand); }
a:hover { filter: brightness(1.1); }
.btn { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-pay { background: var(--accent); border-color: var(--accent); }

/* Auto-dark when user prefers dark */
/* === CODECAVE Phase-6 Cleanup === */
/* Do NOT redefine tokens; use component scopes only */

/* Light/Dark preview helpers – no token mutation */
body.dev-light { background: #ffffff !important; color: #111 !important; }
body.dev-dark  { background: #0b1221 !important; color: #e7ecf6 !important; }

/* Focus rings */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Form readability using theme tokens */
input, textarea, select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Theme toggle positioning (no duplicates) */
#themeToggle {
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  border-radius: 9999px;
  z-index: 9999;
  background: var(--brand-gold, var(--accent));
  color: var(--header-bg, var(--brand-navy));
  opacity: .9;
  transition: opacity .25s;
}
#themeToggle:hover { opacity: 1; }

/* Smooth global transitions – allowed */
html {
  transition: background-color .25s, color .25s;
}

/* POP Graphics card bullet list */
.card-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.card-list li {
  display: list-item;
  margin: 0.2rem 0;
}

.card-list-title {
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Manifest gallery: contain mixed source dimensions at every viewport. */
#gallery-app {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#gallery-app .gallery-heading,
#gallery-app .gallery-state {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

#gallery-app .gallery-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

#gallery-app .gallery-heading h2,
#gallery-app .gallery-heading p,
#gallery-app .gallery-state h2,
#gallery-app .gallery-state p {
  margin-top: 0;
}

#gallery-app .gallery-state {
  padding: 1rem;
}

#gallery-app .gallery-state p:last-child,
#gallery-app .gallery-heading p:last-child {
  margin-bottom: 0;
}

#gallery-app .card-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery-app .card-list > li {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0.75rem;
  overflow: hidden;
}

#gallery-app figure {
  min-width: 0;
  margin: 0;
}

#gallery-app img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 36rem;
  object-fit: contain;
}

#gallery-app figcaption {
  padding-top: 0.5rem;
}

@media (min-width: 720px) {
  #gallery-app .card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  #gallery-app .card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}