/* Components: reusable UI pieces used by many blocks/templates. */
@layer components {
  /* Prose — Markdown content */
  .prose { max-width: 46rem; }
  .prose > * + * { margin-top: 1.1em; }
  .prose :is(h2, h3, h4) { margin-top: 1.8em; }
  .prose :is(ul, ol) { padding-left: 1.3em; }
  .prose li + li { margin-top: 0.35em; }
  .prose img { border-radius: var(--maw-radius); }
  .prose--wide { max-width: none; }
  .section--align-center .prose { margin-inline: auto; }

  .eyebrow { display: inline-block; font-size: var(--maw-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maw-accent); }
  .section--bg-accent .eyebrow, .section--bg-dark .eyebrow { color: inherit; opacity: 0.85; }
  .lead { font-size: var(--maw-text-lg); color: var(--maw-text-muted); }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--maw-space-2); padding: 0.7em 1.25em; border-radius: var(--maw-radius); border: 1px solid transparent; font-weight: 650; font-size: var(--maw-text-sm); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background var(--maw-duration) var(--maw-ease), transform var(--maw-duration) var(--maw-ease), border-color var(--maw-duration); }
  .btn:hover { text-decoration: none; transform: translateY(-1px); }
  .btn-primary { background: var(--maw-accent); color: var(--maw-accent-contrast); }
  .btn-primary:hover { background: var(--maw-accent-hover); }
  .btn-secondary { background: var(--maw-surface); color: var(--maw-text); border-color: var(--maw-border); }
  .btn-secondary:hover { border-color: var(--maw-text-muted); }
  .btn-ghost { background: transparent; color: inherit; }
  .btn-ghost:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
  .btn-lg { font-size: var(--maw-text-base); padding: 0.85em 1.5em; }
  .btn-icon { padding: 0.55em; aspect-ratio: 1; }
  .section--bg-accent .btn-primary { background: var(--maw-accent-contrast); color: var(--maw-accent); }
  .button-row { display: flex; flex-wrap: wrap; gap: var(--maw-space-3); margin-top: var(--maw-space-6); }
  .section--align-center .button-row { justify-content: center; }

  /* Cards */
  .card { display: flex; flex-direction: column; background: var(--maw-surface); border: 1px solid var(--maw-border); border-radius: var(--maw-radius-lg); overflow: hidden; color: var(--maw-text); transition: box-shadow var(--maw-duration), transform var(--maw-duration) var(--maw-ease); }
  a.card, .card--link { text-decoration: none; }
  a.card:hover, .card--link:hover { box-shadow: var(--maw-shadow); transform: translateY(-2px); }
  .card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .card__body { padding: var(--maw-space-5); display: flex; flex-direction: column; gap: var(--maw-space-2); flex: 1; }
  .card__meta { font-size: var(--maw-text-xs); color: var(--maw-text-muted); }
  .card__title { font-size: var(--maw-text-lg); }
  .card__text { color: var(--maw-text-muted); font-size: var(--maw-text-sm); }
  .card__footer { margin-top: auto; padding-top: var(--maw-space-3); font-weight: 600; font-size: var(--maw-text-sm); color: var(--maw-link); }

  /* Icons */
  .icon-badge { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--maw-radius); background: var(--maw-accent-soft); color: var(--maw-accent); font-size: 1.15rem; }

  /* Media placeholder when a block has no image yet */
  .media-placeholder { aspect-ratio: 4 / 3; border-radius: var(--maw-radius-lg); background: linear-gradient(135deg, var(--maw-accent-soft), var(--maw-bg-alt)); border: 1px dashed var(--maw-border); }
  .rounded { border-radius: var(--maw-radius-lg); }
  /* Cropped images from ui.image(): always the requested shape, whichever srcset candidate loads */
  .img-crop { display: block; width: 100%; height: auto; aspect-ratio: var(--img-ratio, 4 / 3); object-fit: cover; }

  /* Image with an overlaid caption card (hero split, media-text) */
  .media-frame { position: relative; }
  .media-caption { position: absolute; left: var(--maw-space-4); right: var(--maw-space-4); bottom: var(--maw-space-5); display: flex; flex-direction: column; gap: 0.2rem; max-width: max-content; padding: var(--maw-space-3) var(--maw-space-4); border-radius: var(--maw-radius); background: color-mix(in srgb, var(--maw-surface) 92%, transparent); border: 1px solid var(--maw-accent); box-shadow: var(--maw-shadow); color: var(--maw-link); font-weight: 700; line-height: var(--maw-leading-tight); }
  .media-caption__label { font-size: var(--maw-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
  .media-caption__text { font-size: var(--maw-text-sm); }

  /* Attribution under a quote or story (media-text) */
  .attribution { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
  .attribution__name { color: var(--maw-link); }
  .attribution__role { font-size: var(--maw-text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--maw-accent); }

  /* Tags / taxonomy */
  .tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--maw-space-2); }
  .tag { display: inline-block; font-size: var(--maw-text-xs); padding: 0.2em 0.65em; border-radius: 999px; background: var(--maw-bg-alt); border: 1px solid var(--maw-border); color: var(--maw-text-muted); text-decoration: none; }

  /* Breadcrumbs + pagination */
  .breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--maw-space-2); font-size: var(--maw-text-sm); color: var(--maw-text-muted); }
  .breadcrumbs li + li::before { content: "/"; margin-right: var(--maw-space-2); opacity: 0.5; }
  .breadcrumbs a { color: inherit; }
  .pagination { list-style: none; padding: 0; display: flex; gap: var(--maw-space-2); justify-content: center; margin-top: var(--maw-space-7); }
  .pagination a, .pagination span { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: var(--maw-radius-sm); border: 1px solid var(--maw-border); text-decoration: none; color: var(--maw-text); }
  .pagination .is-current span { background: var(--maw-accent); color: var(--maw-accent-contrast); border-color: transparent; }
  .pagination .is-disabled span { opacity: 0.4; }

  /* Forms (class hooks set in maw-starter.php) */
  .form-field { margin-bottom: var(--maw-space-4); }
  .form-label { display: block; font-weight: 600; font-size: var(--maw-text-sm); margin-bottom: var(--maw-space-1); }
  .form-input { width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--maw-border); border-radius: var(--maw-radius); background: var(--maw-surface); }
  .form-input:focus { outline: 3px solid var(--maw-focus); border-color: var(--maw-accent); }
  textarea.form-input { min-height: 9rem; resize: vertical; }
  .form-errors, .form-messages .error { color: #b42318; }
  .notices { padding: var(--maw-space-4); border-radius: var(--maw-radius); background: var(--maw-accent-soft); margin-bottom: var(--maw-space-5); }

  /* Color-mode toggle */
  .mode-toggle .when-dark { display: none; }
  :root[data-theme="dark"] .mode-toggle .when-dark { display: inline; }
  :root[data-theme="dark"] .mode-toggle .when-light { display: none; }

  /* Reveal on scroll (js/site.js adds .is-visible) */
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--maw-ease), transform 600ms var(--maw-ease); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Checklist (media-text, pricing) */
  .checklist { list-style: none; padding: 0; display: grid; gap: var(--maw-space-2); }
  .checklist li { display: flex; gap: var(--maw-space-2); align-items: flex-start; }
  .checklist svg { flex: none; margin-top: 0.3em; color: var(--maw-accent); }
}