/* ============================================================
   Cerebrium — Shared responsive + placeholder overrides
   Loaded after each page's inline <style> so these win on cascade.
   ============================================================ */

/* ── Generic grid collapse under 880px ─────────────────────── */
@media (max-width: 880px) {
  /* any 2+ column grid that was hand-rolled inline */
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:minmax(280px,320px) 1fr minmax(260px,300px)"],
  [style*="grid-template-columns:minmax(260px,300px) 1fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* header nav — collapse to essentials */
  header nav {
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  header nav a:not(.btn-cyan) {
    display: none !important;
  }

  /* Brain left/right rails become full-width stacks */
  main[style*="grid-template-columns:minmax(280px,320px) 1fr minmax(260px,300px)"] > aside {
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding: 24px !important;
  }

  /* Footer inner grid */
  footer .container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer > div:last-child,
  footer [style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
    text-align: left;
  }

  /* Big fluid heads — tighten */
  .h-display, .cc-h1, .cc-h2 { line-height: 1.08 !important; }

  /* Generic section padding compress */
  .section, section[style*="padding:clamp(72px"],
  section[style*="padding:clamp(80px"],
  section[style*="padding:clamp(96px"] {
    padding-left: clamp(1rem, 5vw, 1.5rem) !important;
    padding-right: clamp(1rem, 5vw, 1.5rem) !important;
  }

  /* Inline flex rows that should wrap on small screens */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Big padding cards */
  [style*="padding:40px"][style*="border-radius:14px"] {
    padding: 24px !important;
  }

  /* Archive row — show meta inline, compact */
  .piece-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 !important;
  }
  .piece-row .excerpt { max-width: none !important; }
  .piece-row > div:nth-child(3), .piece-row > div:nth-child(4) {
    padding-top: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  .filter-pill, .tag-chip { font-size: 9px !important; padding: 8px 12px !important; letter-spacing: .18em !important; }
  .conv-tabs { gap: 0 !important; }
  .conv-tab { padding: 12px 10px 10px !important; font-size: 9px !important; letter-spacing: .18em !important; }
  .btn-cyan, .btn-ghost { padding: 12px 18px !important; font-size: 10px !important; }
  .h-display { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; }
  .body-lg { font-size: 15px !important; }
  header { padding: 12px 16px !important; }
}

/* ============================================================
   IMAGE PLACEHOLDER — portrait + process shots
   ============================================================ */
.cc-img-placeholder {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--cc-radius-lg, 14px);
  background:
    linear-gradient(135deg, rgba(30,30,30,.04) 0%, rgba(30,30,30,.08) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(132,131,131,.08) 0 2px,
      transparent 2px 14px
    );
  border: 1px solid var(--cc-border-light, rgba(30,30,30,.08));
  color: var(--cc-gray, #848383);
  font-family: var(--cc-font-ui, 'Montserrat', sans-serif);
}
.cc-img-placeholder.on-dark {
  background:
    linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.05) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.05) 0 2px,
      transparent 2px 14px
    );
  border-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
}
.cc-img-placeholder.portrait { aspect-ratio: 4 / 5; }
.cc-img-placeholder.landscape { aspect-ratio: 16 / 10; }
.cc-img-placeholder.square { aspect-ratio: 1 / 1; }
.cc-img-placeholder.wide { aspect-ratio: 21 / 9; }

.cc-img-placeholder::before {
  content: '';
  position: absolute; top: 16px; left: 16px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cc-amber, #C8924A);
  box-shadow: 0 0 0 3px rgba(200,146,74,.15);
}
.cc-img-placeholder .ph-label {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cc-amber, #C8924A);
}
.cc-img-placeholder .ph-caption {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  font-family: var(--cc-font-serif, 'Lora', serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}
.cc-img-placeholder .ph-dims {
  position: absolute;
  bottom: 20px; right: 20px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .6;
}
.cc-img-placeholder.on-dark::before { background: var(--cc-cyan, #73EFEC); box-shadow: 0 0 0 3px rgba(115,239,236,.15); }
.cc-img-placeholder.on-dark .ph-label { color: var(--cc-cyan, #73EFEC); }

/* Compact variant (inline) */
.cc-img-placeholder.compact .ph-caption { display: none; }
.cc-img-placeholder.compact::before { top: 10px; left: 10px; }
.cc-img-placeholder.compact .ph-label { top: 10px; right: 10px; font-size: 8px; }
.cc-img-placeholder.compact .ph-dims { bottom: 10px; right: 10px; font-size: 8px; }