/* ==========================================================================
   SEC 2026 — Inner pages, archives, single posts, editor content
   ========================================================================== */

/* --- Page hero ------------------------------------------------------------ */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 34vh, 400px);
  padding-block: var(--space-9) var(--space-8);
  background: var(--sec-black);
  color: var(--sec-white);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 24, 32, 0.55) 0%, rgba(16, 24, 32, 0.85) 100%);
}
.page-hero--plain { min-height: 0; padding-block: var(--space-8) var(--space-7); }
.page-hero--plain::after { background: none; }

.page-hero__title {
  margin: 0;
  font-size: var(--step-4);
  text-transform: uppercase;
  max-width: 24ch;
}
.page-hero__intro {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  color: var(--color-muted-invert);
  font-size: var(--step-1);
  font-weight: var(--fw-light);
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
  margin-bottom: var(--space-4);
  font-size: var(--step--2);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--sec-gray);
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { padding-inline: var(--space-2); opacity: 0.6; }

/* --- Editor / prose ------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--step-3); text-transform: uppercase; margin-top: var(--space-8); }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-7); }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose img { margin-block: var(--space-6); }
.prose blockquote {
  margin: var(--space-7) 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-ink);
  font-size: var(--step-2);
  font-weight: var(--fw-light);
}
.prose a { text-decoration: underline; }

.alignwide { width: min(100%, var(--container-narrow)); }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }

/* --- Content + aside layout ---------------------------------------------- */
.content-grid { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) { .content-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); } }

.aside-card {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.aside-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.meta-list { margin: 0; }
.meta-list dt {
  font-size: var(--step--2);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.meta-list dd { margin: 0 0 var(--space-4); font-weight: var(--fw-medium); }
.meta-list dd:last-child { margin-bottom: 0; }

/* --- Archive grids -------------------------------------------------------- */
.card-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.filters a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  font-size: var(--step--2);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filters a:hover,
.filters a[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }

/* --- Service detail ------------------------------------------------------- */
.service-intro { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .service-intro { grid-template-columns: 1.3fr 1fr; gap: var(--space-10); } }
.service-figure img { width: 100%; }

.spec-list { margin: 0; padding: 0; list-style: none; }
.spec-list li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.spec-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  background: var(--color-ink);
}

/* --- Pagination ----------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
  justify-content: center;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-line);
  text-decoration: none;
  font-size: var(--step--1);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }

/* --- Search / 404 --------------------------------------------------------- */
.search-form { display: flex; gap: var(--space-2); max-width: 520px; }
.search-form input[type="search"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--color-ink); }

.empty-state {
  padding: var(--space-9) var(--space-5);
  border: 1px solid var(--color-line);
  text-align: center;
  color: var(--color-muted);
}

/* --- WP admin bar offset -------------------------------------------------- */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 1199.98px) {
  .admin-bar .site-nav { inset-block-start: calc(var(--header-h-mobile) + 46px); }
}