/**
 * programs.css — programs listing (/Programs), program detail
 * (/Programs/{slug}) and the shared program card (also on the homepage). Design-system tokens + ds- classes only; logical
 * properties only (no left/right). See docs/DESIGN_SYSTEM.md.
 *
 * Breakpoints (copied, CSS vars cannot be used inside @media):
 *   mobile max-width: 767px · tablet 768-1023px · desktop 1024-1439px · wide 1440px+
 */

/* ==========================================================================
   Shared: definition-grid facts (listing card facts row + detail facts strip)
   ========================================================================== */
.program-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    margin: 0;
}
.program-fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}
.program-fact dt,
.program-fact dd {
    margin: 0;
}
/* Opt-in, for amount/date values only (Amount, Term, Validity): the item can
   wrap onto its own row (it's a flex/grid child), but the value text itself
   never does, and it is never clipped either — an amount hidden behind an
   ellipsis would just be a different way of showing the wrong figure. A long
   free-text fact (Target group) must NOT get this: forcing it onto one line
   only makes it overflow its column and overlap the next one. */
.program-fact__value--nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   1. Programs listing (/Programs)
   ========================================================================== */
.programs-grid {
    align-items: stretch;
}

/* Program card (resources/views/programs/_card.blade.php) — listing and
   homepage. */
.program-card .ds-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.program-card__summary {
    margin: 0;
}
/* Card facts: a compact label/value list, not a grid — a 3-up grid squeezes
   an amount range ("1,000,000 - 20,000,000 IQD") into a column far narrower
   than the value needs. */
.program-card .program-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--border-subtle);
}
.program-card .program-fact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}
/* A value that does not fit beside its label (a long amount range in a
   narrow card) drops under it, still aligned to the end, instead of
   running past the card padding. */
.program-card .program-fact dd {
    margin-inline-start: auto;
    text-align: end;
}
.program-card .program-fact dt {
    flex-shrink: 0;
    white-space: nowrap;
}
/* Free text (target group) shares the row and wraps inside its own column. */
.program-card .program-fact dd:not(.program-fact__value--nowrap) {
    flex: 1 1 0;
    min-inline-size: 0;
}
.program-card__actions {
    margin-block-start: var(--space-2);
}
/* Both actions share the row; once they wrap, each takes the full width. */
.program-card__actions > .ds-btn {
    flex: 1 1 auto;
}

/* ==========================================================================
   2. Program detail (/Programs/{slug})
   ========================================================================== */
.program-hero {
    align-items: center;
}
.program-hero__content {
    gap: var(--space-6);
}
.program-hero__actions {
    gap: var(--space-3);
}
.program-hero__media img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* auto-fit, not a fixed column count: an amount range needs more room than a
   short "18-60" age value, so items wrap onto the next row instead of every
   column being forced to the width of the narrowest fact. */
.program-detail-facts {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Tablet: an even 2 x 2 instead of 3 + 1 orphan. */
@media (min-width: 768px) and (max-width: 1023px) {
    .program-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Path to money: Apply -> Decision -> Disbursement -> Repayment. */
.program-path {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.program-path__step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.program-path__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-10);
    block-size: var(--space-10);
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--brand-red-tint);
    color: var(--ink-brand);
    font-family: var(--font-display);
    font-weight: 600;
}
.program-path__label {
    min-inline-size: 0;
}
/* Connector between steps on tablet/desktop, where the 4 steps sit in a row. */
@media (min-width: 768px) {
    .program-path {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }
    .program-path__step {
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        position: relative;
        padding-inline-start: 0;
    }
    /* The rule runs from the end of this step's circle to the next step. */
    .program-path__step:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-inline-start: calc(var(--space-10) + var(--space-3));
        inset-inline-end: calc(-1 * var(--space-4) + var(--space-3));
        inset-block-start: calc(var(--space-10) / 2);
        block-size: 1px;
        background-color: var(--border-default);
    }
}

/* Section titles on the detail page sit a clear step above their content. */
.program-section-title {
    margin-block: 0 var(--space-6);
}

/* Calculator: three fields in a row, the action under them, then the result
   (the monthly installment first, the figures it is based on beside it). */
.program-calculator__form {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    align-items: start;
}
@media (min-width: 768px) {
    .program-calculator__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .program-calculator__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.program-calculator__actions {
    grid-column: 1 / -1;
}
/* The term is read, not typed: text on the section ground, no field frame.
   It keeps a control's height so the three labels and values line up. */
.program-calculator__term-value {
    display: flex;
    align-items: center;
    min-block-size: 62px;
}
@media (max-width: 767px) {
    .program-calculator__term-value { min-block-size: 0; }
}
.program-calculator__error {
    margin-block-start: var(--space-4);
}
.program-calculator__result {
    margin-block-start: var(--space-6);
}
.program-calculator__result:empty {
    margin-block-start: 0;
}
.program-calculator__status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--space-16);
}
.program-calculator__loader {
    flex-shrink: 0;
    inline-size: var(--space-5);
    block-size: var(--space-5);
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    border-block-start-color: var(--brand-red);
    animation: ds-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .program-calculator__loader { animation-duration: 1400ms; }
}

.program-result {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
}
.program-result__lead {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.program-result__lead p,
.program-result__facts,
.program-result__fact dt,
.program-result__fact dd {
    margin: 0;
}
.program-result__facts {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--separator);
}
.program-result__fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
}
.program-result__fact dd {
    margin-inline-start: auto;
    text-align: end;
}
@media (min-width: 1024px) {
    .program-result {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-8);
        align-items: center;
        padding: var(--space-8);
    }
    .program-result__facts {
        padding-block-start: 0;
        padding-inline-start: var(--space-8);
        border-block-start: 0;
        border-inline-start: 1px solid var(--separator);
    }
}
.program-calculator__notes {
    display: grid;
    gap: var(--space-2);
    max-inline-size: 72ch;
    margin-block-start: var(--space-4);
}
.program-calculator__notes p {
    margin: 0;
}

/* FAQ: the shared .ds-accordion (ds.css). */
.program-faq {
    max-inline-size: calc(var(--content-max) * 0.75);
    margin-block-start: var(--space-6);
}