/* Features page specific styles */

.features-hero {
  background-image: var(--texture-parchment), var(--color-background);
}

/* Layout tweaks for alternating media/content */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
.feature-grid.rev {
  direction: rtl; /* simple reversal without extra markup */
}
.feature-grid.rev > * { direction: ltr; }

.media-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.media-figure img { display: block; width: 100%; height: auto; }

/* Search toolbar */
.search-toolbar .input { min-height: 44px; }
.search-status { color: var(--gray-700); }

/* Palette swatches */
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.swatch {
  background: var(--color-surface);
  border: 1px solid rgba(50,50,50,0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.swatch::before {
  content: "";
  display: inline-block;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--swatch, var(--gray-300));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
  margin-right: var(--space-3);
}
.swatch span { font-weight: 600; font-family: var(--font-sans); }
.swatch code { color: var(--gray-700); font-family: var(--font-sans); }

/* Highlighting for search matches */
mark.search-hit { background: rgba(201, 162, 39, 0.35); padding: 0 0.15em; border-radius: 2px; }

/* Accessibility helpers: text scaling and high contrast */
body.text-scale-110 { font-size: 1.06em; }
body.text-scale-120 { font-size: 1.12em; }

body.contrast-high {
  background-color: #1b1b1b;
  background-image: none;
  color: #f5efe3;
}
body.contrast-high a { color: #ffdf5a; }
body.contrast-high .card,
body.contrast-high .callout,
body.contrast-high .footer,
body.contrast-high .navbar {
  background: #2a2a2a !important;
  color: #f5efe3;
  border-color: #444 !important;
}
body.contrast-high .btn { box-shadow: none; }
body.contrast-high .swatch { background: #2a2a2a; border-color: #444; }

/* Responsive */
@media (min-width: 56rem) {
  .feature-grid { grid-template-columns: 1.1fr 0.9fr; }
}