/* page-specific layouts: hero, elements grid, skins gallery, contact. */

/* --- hero ---------------------------------------------------------------- */
.iblis-hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-6);
  text-align: left;
}
.iblis-hero-mark {
  display: block;
  margin: 0 0 var(--space-5);
}
.iblis-hero-mark img { width: 140px; height: 140px; display: block; }
.iblis-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(40px, 7vw, var(--font-size-display));
}
.iblis-tagline {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}
.iblis-cta { display: flex; gap: var(--space-3); margin: var(--space-5) 0; flex-wrap: wrap; }
.iblis-status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  display: inline-flex; align-items: center; gap: var(--space-2);
}

/* --- pillar grid (home features) ----------------------------------------- */
.iblis-pillars { margin: var(--space-8) 0; }
.iblis-pillars h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); }
.iblis-pillars p  { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* --- prose (markdown render) --------------------------------------------- */
.iblis-prose h1, .iblis-prose h2, .iblis-prose h3 { margin-top: var(--space-6); }
.iblis-prose h1 { font-size: var(--font-size-xl); }
.iblis-prose h2 {
  font-size: var(--font-size-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-2);
}
.iblis-prose h3 { font-size: var(--font-size-md); }
.iblis-prose code {
  background: var(--color-bg-subtle);
  padding: 2px 6px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.9em;
}
.iblis-prose pre {
  background: var(--color-bg-inset);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono); font-size: 0.9em;
}
.iblis-prose pre code { background: transparent; padding: 0; }
.iblis-prose table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; }
.iblis-prose th, .iblis-prose td {
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.iblis-prose th { background: var(--color-bg-subtle); }
.iblis-prose blockquote {
  border-left: 3px solid var(--color-border-default);
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0;
}

/* --- /elements grid ------------------------------------------------------ */
.iblis-elements { display: grid; gap: var(--space-5); }
.iblis-element-block {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.iblis-element-block h3 { margin: 0; color: var(--color-text-primary); }
.iblis-element-block p { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.iblis-element-demo {
  display: flex; gap: var(--space-3);
  flex-wrap: wrap; align-items: center;
}
@media (max-width: 720px) { .iblis-element-block { grid-template-columns: 1fr; } }

/* --- /skins gallery ------------------------------------------------------ */
.iblis-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.iblis-skin-card {
  cursor: pointer;
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--motion-base), transform var(--motion-base);
}
.iblis-skin-card:hover { transform: translateY(-2px); border-color: var(--color-border-default); }
.iblis-skin-card.is-active { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.iblis-skin-swatches { display: flex; gap: 4px; height: 32px; border-radius: var(--radius-sm); overflow: hidden; }
.iblis-skin-swatches > span { flex: 1; }
.iblis-skin-name { font-weight: 600; }
.iblis-skin-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* --- /contact ------------------------------------------------------------ */
.iblis-contact {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
  max-width: 640px;
}
.iblis-contact-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.iblis-contact-row .iblis-icon { color: var(--color-accent); flex-shrink: 0; }
.iblis-contact-row strong { display: block; color: var(--color-text-primary); }
.iblis-contact-row span { color: var(--color-text-secondary); font-size: var(--font-size-sm); }