/* ==========================================================================
   XILXIL CHILD — INNER PAGES (xil-inner.css)
   Loaded on every view except the front page.

   Contents
   --------
   1.  Breadcrumbs
   2.  Page hero
   3.  Prose (editor content typography)
   4.  Single article
   5.  Post cards + archives + pagination
   6.  Empty states
   7.  Search form
   8.  Closing CTA band
   9.  Contact page
   10. 404
   11. Utilities (edit link, busy state, honeypot)
   12. Motion preferences
   13. Hub pages (child-page cards, archive notes, core buttons, anchors)

   Only `--xil-*` tokens from xil-main.css are used; inside
   .xil-section--dark/--deep every component re-themes automatically.
   ========================================================================== */


/* ==========================================================================
   1. BREADCRUMBS
   ========================================================================== */

.xil-crumbs {
        padding-top: clamp(1.1rem, 2.4vw, 1.6rem);
}

.xil-crumbs ol {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        color: var(--xil-muted);
}

.xil-crumbs li {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
}

.xil-crumbs li + li::before {
        content: '/';
        color: var(--xil-border-strong);
        flex: none;
}

.xil-crumbs a {
        color: var(--xil-muted);
        text-decoration: none;
        transition: color var(--xil-transition);
}

.xil-crumbs a:hover {
        color: var(--xil-text);
}

.xil-crumbs [aria-current='page'] {
        color: var(--xil-text);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 46ch;
}


/* ==========================================================================
   2. PAGE HERO
   ========================================================================== */

.xil-pagehero {
        position: relative;
        isolation: isolate;
        padding-block: clamp(2.2rem, 5.5vw, 4rem) clamp(1.2rem, 3vw, 2rem);
        background: var(--xil-background);
}

.xil-pagehero .xil-container {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.xil-pagehero__title {
        text-wrap: balance;
}

.xil-pagehero .xil-eyebrow {
        margin: 0;
}

.xil-pagehero .xil-lead {
        margin: 0;
}


/* ==========================================================================
   3. PROSE — typography for the_content() (Gutenberg-safe)
   ========================================================================== */

.xil-prose {
        color: var(--xil-text);
        font-size: 1.02rem;
        line-height: 1.75;
}

.xil-prose > * + * {
        margin-top: 1.1em;
}

.xil-prose h1,
.xil-prose h2,
.xil-prose h3,
.xil-prose h4,
.xil-prose h5,
.xil-prose h6 {
        font-family: var(--xil-font-heading);
        color: var(--xil-text);
        letter-spacing: -0.01em;
        margin-top: 1.8em;
        text-wrap: balance;
}

.xil-prose h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.xil-prose h2 {
        font-size: clamp(1.45rem, 2.8vw, 1.9rem);
        padding-bottom: 0.45em;
        border-bottom: 1px solid var(--xil-border);
}
.xil-prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.xil-prose h4 { font-size: 1.05rem; }

.xil-prose h1 + *,
.xil-prose h2 + *,
.xil-prose h3 + *,
.xil-prose h4 + * {
        margin-top: 0.55em;
}

.xil-prose a:not(.xil-btn):not(.xil-chip) {
        color: var(--xil-link);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        transition: color var(--xil-transition);
}

.xil-prose a:not(.xil-btn):not(.xil-chip):hover {
        color: var(--xil-text);
}

.xil-prose ul,
.xil-prose ol {
        padding-left: 1.4em;
        display: grid;
        gap: 0.45em;
}

.xil-prose ul { list-style: disc; }
.xil-prose ol { list-style: decimal; }

.xil-prose li::marker {
        color: var(--xil-primary);
        font-weight: 600;
}

.xil-prose blockquote {
        margin: 0;
        padding: 1.1rem 1.4rem;
        border-left: 3px solid var(--xil-primary);
        border-radius: 0 var(--xil-radius-md) var(--xil-radius-md) 0;
        background: var(--xil-surface-2);
        color: var(--xil-text);
        font-style: normal;
}

.xil-prose blockquote p + p {
        margin-top: 0.7em;
}

.xil-prose blockquote cite {
        display: block;
        margin-top: 0.6em;
        font-size: 0.85rem;
        color: var(--xil-muted);
        font-style: normal;
}

.xil-prose img,
.xil-prose .wp-block-image img {
        border-radius: var(--xil-radius-lg);
        height: auto;
}

.xil-prose figure {
        margin: 0;
}

.xil-prose figcaption {
        margin-top: 0.6em;
        font-size: 0.82rem;
        color: var(--xil-muted);
        text-align: center;
}

.xil-prose pre,
.xil-prose code {
        font-family: var(--xil-font-mono);
        font-size: 0.9em;
}

.xil-prose code {
        background: var(--xil-surface-2);
        border: 1px solid var(--xil-border);
        border-radius: 6px;
        padding: 0.1em 0.4em;
}

.xil-prose pre {
        background: var(--xil-surface-2);
        border: 1px solid var(--xil-border);
        border-radius: var(--xil-radius-md);
        padding: 1.1rem 1.3rem;
        overflow-x: auto;
}

.xil-prose pre code {
        background: none;
        border: 0;
        padding: 0;
}

.xil-prose table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.94rem;
}

.xil-prose th,
.xil-prose td {
        border: 1px solid var(--xil-border);
        padding: 0.65em 0.9em;
        text-align: left;
}

.xil-prose thead th {
        background: var(--xil-surface-2);
        font-weight: 600;
}

.xil-prose hr {
        border: 0;
        height: 1px;
        background: var(--xil-border);
        margin-block: 2.2em;
}

/* Gutenberg alignment + core blocks. */
.xil-prose .alignwide {
        width: min(100%, calc(var(--xil-container) - 48px));
        margin-inline: calc((min(100%, calc(var(--xil-container) - 48px)) - 100%) / -2);
}

.xil-prose .alignfull {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
}

.xil-prose .wp-block-button .wp-block-button__link {
        border-radius: var(--xil-radius-pill);
        font-weight: 600;
}

.xil-prose .wp-block-separator {
        border: 0;
        height: 1px;
        background: var(--xil-border);
}

.xil-prose .wp-block-embed__wrapper iframe,
.xil-prose iframe {
        max-width: 100%;
}

/* Prose inside the contact page intro keeps a tighter rhythm. */
.xil-prose--tight > * + * {
        margin-top: 0.75em;
}

.xil-prose--tight > *:first-child {
        margin-top: 0;
}


/* ==========================================================================
   4. SINGLE ARTICLE
   ========================================================================== */

.xil-single__meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        color: var(--xil-muted);
}

.xil-single__meta svg {
        color: var(--xil-accent);
}

.xil-single__thumb {
        overflow: hidden;
        margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.xil-single__thumb img {
        width: 100%;
        aspect-ratio: 800 / 520;
        object-fit: cover;
        display: block;
}

.xil-single__thumb figcaption {
        padding: 0.8rem 1.2rem;
        font-size: 0.82rem;
        color: var(--xil-muted);
        border-top: 1px solid var(--xil-border);
}

.xil-single__tags {
        margin-top: clamp(1.6rem, 3vw, 2.4rem);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.xil-single__tags a {
        display: inline-flex;
        align-items: center;
        padding: 6px 13px;
        border-radius: var(--xil-radius-pill);
        background: var(--xil-surface-2);
        border: 1px solid var(--xil-border);
        color: var(--xil-muted);
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color var(--xil-transition), color var(--xil-transition);
}

.xil-single__tags a::before {
        content: '#';
        color: var(--xil-primary);
        margin-right: 4px;
}

.xil-single__tags a:hover {
        color: var(--xil-text);
        border-color: var(--xil-border-strong);
}

/* Author card — only rendered when the author wrote a bio. */
.xil-authorcard {
        display: grid;
        gap: 14px;
}

.xil-authorcard__id {
        display: flex;
        align-items: center;
        gap: 14px;
}

.xil-authorcard__id > div {
        display: grid;
        gap: 3px;
}

.xil-authorcard__id .xil-h3 {
        margin: 0;
}

.xil-authorcard__id .xil-label {
        margin: 0;
}

.xil-authorcard .xil-caption {
        margin: 0;
}

.xil-authorcard img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 1px solid var(--xil-border);
}

/* Previous / next article navigation. */
.xil-pagin {
        display: grid;
        gap: 12px;
        border-top: 1px solid var(--xil-border);
        padding-top: clamp(1.4rem, 3vw, 2rem);
}

.xil-pagin__half {
        min-width: 0;
}

.xil-pagin__half--next {
        text-align: right;
}

.xil-pagin__half a {
        display: inline-grid;
        gap: 5px;
        text-decoration: none;
        min-width: 0;
        max-width: 100%;
}

.xil-pagin__half .xil-label {
        color: var(--xil-muted);
}

.xil-pagin__title {
        color: var(--xil-text);
        font-weight: 600;
        font-size: 0.98rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: color var(--xil-transition);
}

.xil-pagin__half a:hover .xil-pagin__title {
        color: var(--xil-link);
}

.xil-single__foot {
        margin-top: clamp(1.6rem, 3vw, 2.4rem);
        padding-top: clamp(1.4rem, 3vw, 2rem);
        border-top: 1px solid var(--xil-border);
}

.xil-single__foot .xil-arrowlink svg {
        transform: rotate(180deg); /* Point back to the archive. */
}

.xil-single__foot .xil-arrowlink:hover svg {
        transform: rotate(180deg) translateX(3px);
}


/* ==========================================================================
   5. POST CARDS, ARCHIVES, PAGINATION
   ========================================================================== */

.xil-archive__grid {
        align-items: stretch;
}

.xil-postcard {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 0;
}

.xil-postcard__media {
        display: block;
        aspect-ratio: 800 / 450;
        overflow: hidden;
        border-bottom: 1px solid var(--xil-border);
        background: var(--xil-surface-2);
}

.xil-postcard__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.45s var(--xil-ease, ease);
}

.xil-postcard:hover .xil-postcard__media img {
        transform: scale(1.04);
}

.xil-postcard__media--empty {
        display: grid;
        place-items: center;
        color: var(--xil-muted);
        background:
                radial-gradient(340px 200px at 85% -20%, var(--xil-glow), transparent 70%),
                var(--xil-surface-2);
}

.xil-postcard__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: clamp(1.2rem, 2.4vw, 1.6rem);
        flex: 1 0 auto;
}

.xil-postcard__body .xil-icon-tile {
        margin-bottom: 2px;
}

.xil-postcard__title {
        margin: 0;
        line-height: 1.3;
}

.xil-postcard__title a {
        color: var(--xil-text);
        text-decoration: none;
        transition: color var(--xil-transition);
}

.xil-postcard__title a:hover {
        color: var(--xil-link);
}

.xil-postcard__excerpt {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.xil-postcard__meta {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: auto;
        padding-top: 6px;
}

.xil-postcard__dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--xil-border-strong);
        flex: none;
}

/* Archive / search pagination. */
.xil-pagination {
        margin-top: clamp(2rem, 4vw, 3rem);
}

.xil-pagination .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
}

.xil-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 42px;
        padding: 0 12px;
        border-radius: var(--xil-radius-md);
        border: 1px solid var(--xil-border);
        color: var(--xil-muted);
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color var(--xil-transition), color var(--xil-transition), background var(--xil-transition);
}

.xil-pagination .page-numbers svg {
        width: 16px;
        height: 16px;
}

.xil-pagination__flip {
        transform: rotate(180deg);
}

.xil-pagination a.page-numbers:hover {
        border-color: var(--xil-primary);
        color: var(--xil-primary);
}

.xil-pagination .page-numbers.current {
        background: var(--xil-primary);
        border-color: var(--xil-primary);
        color: var(--xil-on-primary);
}

.xil-pagination .page-numbers.dots {
        border-color: transparent;
}


/* ==========================================================================
   6. EMPTY STATES (archives, search)
   ========================================================================== */

.xil-empty {
        display: grid;
        justify-items: center;
        gap: 10px;
        padding-block: clamp(2.4rem, 5vw, 3.6rem);
}

.xil-empty .xil-h2,
.xil-empty .xil-h3 {
        margin: 0;
}

.xil-empty__icon {
        width: 34px;
        height: 34px;
        color: var(--xil-accent);
}

.xil-empty .xil-caption {
        max-width: 52ch;
        margin: 0;
}

.xil-empty__links {
        margin-top: 6px;
}

.xil-empty__links .xil-chip {
        text-decoration: none;
}


/* ==========================================================================
   7. SEARCH FORM
   ========================================================================== */

.xil-searchform__row {
        position: relative;
        display: flex;
        gap: 10px;
        align-items: stretch;
}

.xil-searchform__icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--xil-muted);
        pointer-events: none;
        display: grid;
        place-items: center;
}

.xil-searchform__input {
        padding-left: 44px;
        border-radius: var(--xil-radius-pill);
}

.xil-searchform__submit {
        flex: none;
}

.xil-searchpage__form {
        margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}


/* ==========================================================================
   8. CLOSING CTA BAND (inner pages)
   ========================================================================== */

.xil-ctaband .xil-container {
        padding-block: 0; /* .xil-section already provides rhythm. */
}


/* ==========================================================================
   9. CONTACT PAGE
   ========================================================================== */

.xil-contact {
        display: grid;
        gap: clamp(1.6rem, 3.5vw, 3rem);
        align-items: start;
}

@media (min-width: 1024px) {
        .xil-contact {
                grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }
}

/* Channel cards. */
.xil-channel {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
}

.xil-channel__body {
        display: grid;
        gap: 3px;
        min-width: 0;
}

.xil-channel__label {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: var(--xil-tracking-label);
        text-transform: uppercase;
        color: var(--xil-muted);
}

.xil-channel__value {
        font-weight: 600;
        color: var(--xil-text);
        overflow-wrap: anywhere;
}

.xil-channel__go {
        margin-left: auto;
        color: var(--xil-muted);
        transition: transform var(--xil-transition), color var(--xil-transition);
}

a.xil-channel:hover .xil-channel__go {
        transform: translate(2px, -2px);
        color: var(--xil-link);
}

/* Form card. */
.xil-form {
        display: grid;
        gap: clamp(1.1rem, 2.4vw, 1.5rem);
}

.xil-form__grid {
        display: grid;
        gap: clamp(1.1rem, 2.4vw, 1.5rem);
}

@media (min-width: 720px) {
        .xil-form__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .xil-form__full {
                grid-column: 1 / -1;
        }
}

.xil-form__submit {
        justify-self: start;
}

.xil-form__footnote {
        margin: -0.4rem 0 0;
}

/* Status notices (redirect feedback). */
.xil-notice {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: clamp(1.1rem, 2.4vw, 1.5rem);
        border-radius: var(--xil-radius-lg);
        margin-bottom: clamp(1.1rem, 2.4vw, 1.5rem);
}

.xil-notice svg {
        flex: none;
        margin-top: 2px;
}

.xil-notice .xil-h3 {
        margin: 0;
        font-size: 1.08rem;
}

.xil-notice .xil-caption {
        margin: 4px 0 0;
}

.xil-notice--success {
        background: var(--xil-success-tint);
        border: 1px solid var(--xil-success);
}

.xil-notice--success svg {
        color: var(--xil-success);
}

.xil-notice--error {
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid #DC2626;
}

.xil-notice--error svg {
        color: #DC2626;
}


/* ==========================================================================
   10. 404
   ========================================================================== */

.xil-notfound .xil-stack {
        align-items: center;
}

.xil-notfound__code {
        margin: 0;
        font-size: clamp(4.4rem, 12vw, 7.5rem);
        line-height: 1;
        background: linear-gradient(120deg, var(--xil-grad-1), var(--xil-grad-2) 55%, var(--xil-grad-3));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
}

.xil-notfound__search {
        width: 100%;
}

.xil-notfound__links {
        max-width: 640px;
}


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

/* "Edit" links — visible to logged-in editors only. */
.xil-editlink {
        margin-top: 1.2rem;
        font-size: 0.82rem;
}

.xil-editlink a {
        color: var(--xil-muted);
        text-decoration: none;
}

.xil-editlink a:hover {
        color: var(--xil-text);
}

/* Honeypot field — reachable by bots, invisible to humans, never display:none-removed. */
.xil-hp {
        position: absolute !important;
        left: -9999px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        margin: 0;
}

/* Submit busy state (added by xil-main.js while the request runs). */
.xil-btn.is-busy {
        pointer-events: none;
        opacity: 0.75;
}

.xil-btn.is-busy::after {
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: xil-spin 0.7s linear infinite;
}

@keyframes xil-spin {
        to { transform: rotate(360deg); }
}


/* ==========================================================================
   12. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
        .xil-postcard:hover .xil-postcard__media img {
                transform: none;
        }

        .xil-btn.is-busy::after {
                animation-duration: 1.6s;
        }
}


/* ==========================================================================
   13. HUB PAGES — child-page cards, archive notes, core buttons, anchors
   ========================================================================== */

/* Child-page cards (rendered by template-parts/global/child-pages.php). */
.xil-childpages .xil-section-head {
        margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.xil-childcard {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        color: var(--xil-text);
        text-decoration: none;
}

.xil-childcard__title {
        margin: 0;
        line-height: 1.3;
}

.xil-childcard__text {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.xil-childcard .xil-arrowlink {
        margin-top: auto;
}

/* Agents archive — honesty note + CTA row below the grid. */
.xil-archive__note {
        max-width: 70ch;
        margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
        text-align: center;
        color: var(--xil-muted);
        font-size: 0.92rem;
}

.xil-archive__cta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* Knowledge Hub — intro prose above the post grid. */
.xil-hub__intro {
        max-width: var(--xil-maxw-prose, 780px);
        margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Core button blocks seeded into page content — on-brand by default. */
.xil-prose .wp-block-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
}

.xil-prose .wp-block-button .wp-block-button__link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0.8em 1.6em;
        border-radius: var(--xil-radius-pill);
        background: var(--xil-primary);
        color: var(--xil-on-primary);
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.4;
        text-decoration: none;
        transition: filter var(--xil-transition), transform var(--xil-transition);
}

.xil-prose .wp-block-button .wp-block-button__link:hover {
        filter: brightness(1.12);
        transform: translateY(-1px);
}

.xil-prose .wp-block-button.is-style-outline .wp-block-button__link {
        background: transparent;
        color: var(--xil-text);
        border: 1px solid var(--xil-border-strong);
}

.xil-prose .wp-block-button.is-style-outline .wp-block-button__link:hover {
        border-color: var(--xil-primary);
        color: var(--xil-primary);
        filter: none;
}

/* Seeded heading anchors — land below the sticky header, not under it. */
.xil-prose h1[id],
.xil-prose h2[id],
.xil-prose h3[id],
.xil-prose h4[id] {
        scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
        .xil-prose .wp-block-button .wp-block-button__link:hover {
                transform: none;
        }
}