/* ==========================================================================
   Detail pages — loan types and site features
   --------------------------------------------------------------------------
   Reading layout for `?page=info&topic=…`. A constrained measure for the prose,
   a sticky aside for the summary, and a card rail to the sibling topics.

   Square throughout — squared.css zeroes radius globally, so nothing here sets
   one. Both themes are handled via tokens rather than hardcoded colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.info-hero {
    background: var(--ls-surface-2);
    border-bottom: 1px solid var(--ls-border);
    padding: var(--ls-space-8) 0;
}

.info-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ls-space-8);
    align-items: center;
}

.info-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--ls-text-xs);
    color: var(--ls-text-muted);
    margin-bottom: var(--ls-space-4);
}

.info-crumbs a { color: var(--ls-text-muted); text-decoration: none; }
.info-crumbs a:hover { color: var(--ls-brand-600); text-decoration: underline; }

.info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ls-text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ls-brand-600);
    margin-bottom: var(--ls-space-3);
}

.info-hero h1 {
    margin: 0 0 var(--ls-space-3);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ls-text);
}

.info-lead {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-text-lg);
    line-height: 1.6;
    color: var(--ls-text-secondary);
    max-width: 52ch;
}

.info-hero-actions { display: flex; flex-wrap: wrap; gap: var(--ls-space-3); }

.info-hero-media { min-width: 0; }

.info-hero-media img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
    border: 1px solid var(--ls-border);
}

/* --------------------------------------------------------------------------
   Live product figures
   -------------------------------------------------------------------------- */

.info-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--ls-border);
    border: 1px solid var(--ls-border);
    margin-top: calc(var(--ls-space-6) * -1);
    position: relative;
    z-index: 1;
}

.info-fact {
    background: var(--ls-surface);
    padding: var(--ls-space-5);
    min-width: 0;
}

.info-fact-label {
    display: block;
    font-size: var(--ls-text-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ls-text-muted);
    margin-bottom: 6px;
}

.info-fact strong {
    font-size: var(--ls-text-2xl);
    font-weight: 650;
    color: var(--ls-text);
    overflow-wrap: anywhere;
}

.info-facts-note {
    margin: var(--ls-space-3) 0 0;
    font-size: var(--ls-text-xs);
    /* --ls-text-muted measures 4.48:1 against this surface in the light theme,
       just under the 4.5:1 AA floor for text this size. The secondary token
       clears it while still reading as fine print. */
    color: var(--ls-text-secondary);
    max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Body + aside
   -------------------------------------------------------------------------- */

.info-body-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--ls-space-8);
    padding-top: var(--ls-space-8);
    padding-bottom: var(--ls-space-8);
    align-items: start;
}

.info-main { min-width: 0; }

.info-intro {
    font-size: var(--ls-text-lg);
    line-height: 1.7;
    color: var(--ls-text);
    margin: 0 0 var(--ls-space-6);
    padding-left: var(--ls-space-4);
    border-left: 3px solid var(--ls-brand-600);
    max-width: 68ch;
}

/* Prose: a comfortable measure beats full width for long-form reading. */
.info-prose { max-width: 68ch; color: var(--ls-text-secondary); }

.info-prose h2 {
    margin: var(--ls-space-7, 1.75rem) 0 var(--ls-space-3);
    font-size: var(--ls-text-xl);
    font-weight: 650;
    color: var(--ls-text);
    letter-spacing: -0.01em;
}

.info-prose h3 {
    margin: var(--ls-space-5) 0 var(--ls-space-2);
    font-size: var(--ls-text-lg);
    color: var(--ls-text);
}

.info-prose p { margin: 0 0 var(--ls-space-4); line-height: 1.75; }
.info-prose ul, .info-prose ol { margin: 0 0 var(--ls-space-4); padding-left: 1.25rem; line-height: 1.75; }
.info-prose li { margin-bottom: 6px; }
.info-prose strong { color: var(--ls-text); font-weight: 650; }
.info-prose a { color: var(--ls-brand-600); }

.info-section-title {
    margin: var(--ls-space-8) 0 var(--ls-space-4);
    font-size: var(--ls-text-xl);
    font-weight: 650;
    color: var(--ls-text);
}

/* --------------------------------------------------------------------------
   FAQs — native <details> so it works without JavaScript
   -------------------------------------------------------------------------- */

.info-faqs { max-width: 68ch; border-top: 1px solid var(--ls-border); }

.info-faq { border-bottom: 1px solid var(--ls-border); }

.info-faq summary {
    cursor: pointer;
    padding: var(--ls-space-4) 2rem var(--ls-space-4) 0;
    font-weight: 600;
    color: var(--ls-text);
    position: relative;
    list-style: none;
}

.info-faq summary::-webkit-details-marker { display: none; }

.info-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--ls-brand-600);
    line-height: 1;
}

.info-faq[open] summary::after { content: "\2212"; }

.info-faq p {
    margin: 0;
    padding: 0 2rem var(--ls-space-4) 0;
    color: var(--ls-text-secondary);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Aside
   -------------------------------------------------------------------------- */

.info-aside {
    position: sticky;
    top: var(--ls-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-4);
    min-width: 0;
}

.info-card {
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    padding: var(--ls-space-5);
}

.info-card h3 {
    margin: 0 0 var(--ls-space-3);
    font-size: var(--ls-text-base);
    font-weight: 650;
    color: var(--ls-text);
}

.info-ticks { list-style: none; margin: 0; padding: 0; }

.info-ticks li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: var(--ls-text-sm);
    line-height: 1.55;
    color: var(--ls-text-secondary);
}

.info-ticks i { color: #10b981; margin-top: 3px; flex: 0 0 auto; font-size: .8rem; }
.info-ticks-plain i { color: var(--ls-brand-600); }

.info-card-cta { background: var(--ls-surface-2); border-color: var(--ls-border-strong); }
.info-card-cta p { font-size: var(--ls-text-sm); color: var(--ls-text-secondary); margin: 0 0 var(--ls-space-4); }

.button-full { display: block; width: 100%; text-align: center; }

.info-aside-link {
    display: block;
    text-align: center;
    margin-top: var(--ls-space-3);
    font-size: var(--ls-text-sm);
    color: var(--ls-text-muted);
}

/* --------------------------------------------------------------------------
   Sibling topics
   -------------------------------------------------------------------------- */

.info-more {
    background: var(--ls-bg-subtle);
    border-top: 1px solid var(--ls-border);
    padding: var(--ls-space-8) 0;
}

.info-more h2 {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-text-xl);
    color: var(--ls-text);
}

.info-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ls-space-4);
}

.info-more-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--ls-space-5);
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    text-decoration: none;
    min-width: 0;
    transition: transform .2s var(--ls-ease, ease), box-shadow .2s var(--ls-ease, ease);
}

.info-more-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ls-shadow-md);
    border-color: var(--ls-brand-600);
}

.info-more-icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--ls-surface-3);
    color: var(--ls-brand-600);
}

.info-more-card strong { color: var(--ls-text); font-size: var(--ls-text-base); }
.info-more-text { font-size: var(--ls-text-sm); color: var(--ls-text-muted); line-height: 1.5; }
.info-more-go { font-size: var(--ls-text-sm); font-weight: 600; color: var(--ls-brand-600); margin-top: 4px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .info-hero-inner { grid-template-columns: 1fr; }
    .info-hero-media { order: -1; }
    .info-hero-media img { height: 220px; }
    .info-body-wrap { grid-template-columns: 1fr; }
    /* Sticky is pointless once the aside is stacked below the article. */
    .info-aside { position: static; }
    .info-facts { margin-top: 0; }
}

@media (max-width: 560px) {
    .info-hero { padding: var(--ls-space-6) 0; }
    .info-hero-actions .button { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Listing card actions
   --------------------------------------------------------------------------
   The services and loan-product cards now carry two actions — read the detail
   page, or apply straight away — instead of a lone "Apply Now". Shared here
   because both listings need identical behaviour and neither had a rule for it.
   -------------------------------------------------------------------------- */

.service-actions,
.loan-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2, .5rem);
    margin-top: auto;
    padding-top: var(--ls-space-3, .75rem);
}

.service-actions .button,
.loan-product-actions .button {
    /* The site has no global border-box rule, so a button's 24px side padding
       is added on top of its flex width. Left as content-box the pair overflows
       the row, wraps to full width, and the bordered one lands 2px narrower
       than its neighbour. Both are fixed by measuring border-box here. */
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

/* The secondary button carries a 1px border and the primary does not, which
   left the pair 2px apart in width. A transparent border on the primary makes
   both boxes identical without changing how either one looks. */
.service-actions .button-primary,
.loan-product-actions .button-primary {
    border: 1px solid transparent;
}

/* Below this the two buttons stop fitting side by side without wrapping mid-word. */
@media (max-width: 420px) {
    .service-actions,
    .loan-product-actions { flex-direction: column; }
}