/* =========================================================================
   LOCAL LOCKER — INNER PAGES, responsive
   Base rules live in css/inner-pages.css and this file must load after it:
   these are plain media queries, not higher-specificity selectors, so if the
   base sheet came second it would win and none of this would apply. That is
   exactly what happened when these rules lived at the end of responsive.css,
   which is enqueued before inner-pages.css.

   Breakpoints match style.css / responsive.css:
   mobile 0-480 | tablet 481-768 | laptop 769-1024 | desktop 1025+
   ========================================================================= */

@media (max-width: 1400px) {

    /* Five across is too tight for a product card once the rail narrows. */
    .ll-grid--5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ll-lenders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * The step card gives back a little of its width as the track narrows: a
     * slightly taller frame, a slightly smaller phone, the words moved left to
     * follow it (@media max-width:1400px in lend.css).
     */
    .ll-steps__card {
        aspect-ratio: 920 / 410;
    }

    .ll-steps__shot {
        width: 35%;
    }

    .ll-steps__body {
        left: 48%;
    }
}

@media (max-width: 1180px) {

    .ll-contact__body,
    .ll-request,
    .ll-lhero__grid,
    .ll-final__inner {
        grid-template-columns: 1fr;
        gap: var(--ll-s10);
    }

    /*
     * The owner band stacks where the reference stacks it, and its photograph
     * takes a fixed height once it no longer has a column to fill
     * (@media max-width:1180px in listing.css: .hob{grid-template-columns:1fr}
     * .hob .r{min-height:360px}). The card keeps its zero padding, so the
     * picture still runs edge to edge.
     */
    .ll-owner {
        grid-template-columns: 1fr;
    }

    .ll-owner__art {
        min-height: 360px;
    }

    /*
     * The "ask for it" band stacks here, where the reference stacks it
     * (@media max-width:1180px in listing.css: .band{grid-template-columns:1fr;
     * gap:var(--space-6)}). It had no breakpoint at all, so its second track —
     * sized to "Free · No account needed to ask" at about 208px — went on
     * claiming that width all the way down and squeezed the heading column to
     * 2px on a phone: one word, then one letter, per line.
     */
    .ll-band__card {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ll-s6);
    }

    /* Stacked, the form leads and the details rail follows it. */
    .ll-contact__body > .ll-form {
        order: 1;
    }

    .ll-contact__body > .ll-contact__rail {
        order: 2;
        padding-top: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ll-s9);
    }

    /* The rule between rail blocks belongs above each one only when stacked. */
    .ll-contact__rail > * + * {
        padding-top: 0;
        box-shadow: none;
    }

    .ll-grid--4,
    .ll-grid--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /*
     * The city head goes to one column, where the reference puts it
     * (@media max-width:1180px in listing.css: .headrow{grid-template-columns:1fr;
     * gap:var(--space-6)}). The field drops under the title and spans the rail.
     */
    .ll-phero__row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ll-s6);
    }

    .ll-phero__aside {
        padding-top: 0;
    }

    /*
     * The hero is one column here, so the stack centres instead of hugging the
     * right edge — but it keeps its cap. Dropping the cap stretched the cards to
     * 556px against a 118px photo, and pushed the chip's -30px overhang off the
     * side of the viewport.
     */
    .ll-gstack {
        margin-left: auto;
        margin-right: auto;
    }

    /*
     * Stacked, the final CTA centres — the reference does exactly this once
     * .final-in goes to one column (@media max-width:991.98px in lend.css:
     * text-align:center on the grid and the copy, auto margins on the heading
     * and lead, and the store buttons centred). It is tied to the stack rather
     * than to the reference's own 992px because the grid collapses here, at
     * 1180px, and a stacked-but-left-aligned block was the "iPad view mein yeh
     * section centre aligned hona chaiyeh" report.
     */
    .ll-final__inner {
        text-align: center;
    }

    .ll-final__copy {
        align-items: center;
    }

    .ll-final__copy .ll-page__h2,
    .ll-final__copy .ll-page__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-final .ll-store {
        justify-content: center;
    }

    /*
     * The artwork keeps its cap but has to centre inside the full-width cell,
     * or the phones sit against the left edge of a centred section.
     */
    .ll-final__art {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    /*
     * And again one step further: the card takes more of the track, so the
     * frame grows taller still and the phone smaller
     * (@media max-width:1180px in lend.css).
     */
    .ll-steps__card {
        flex: 0 0 84%;
        aspect-ratio: 880 / 430;
    }

    .ll-steps__shot {
        width: 36%;
    }

    .ll-steps__body {
        left: 46.5%;
    }
}

@media (max-width: 1024px) {

    /* Single-sided, as on desktop — only the value comes down. */
    .ll-section,
    .ll-section--tight {
        padding: 70px 0 0;
    }

    .ll-section--flush {
        padding-top: 40px;
    }

    .ll-page {
        padding-bottom: 80px;
    }

    .ll-strip {
        padding: 60px 0;
    }

    .ll-final {
        padding: 70px 0 0;
    }

    .ll-phero,
    .ll-lhero {
        padding-top: 40px;
    }

    .ll-grid--3,
    .ll-grid--4,
    .ll-grid--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ll-sechead--split {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stacked under the heading, the location pill starts at its left edge. */
    .ll-sechead--split .ll-geo-wrap {
        align-items: flex-start;
        align-self: flex-start;
        margin-left: 0;
    }

    .ll-sechead--split .ll-geo__status {
        text-align: left;
    }

    .ll-cityhead {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ll-s6);
    }

    .ll-stats {
        gap: var(--ll-s7);
    }

    /*
     * The reference stacks the results head at 760px; ours goes at 1024 because
     * our count line carries a second caption under it and the two halves stop
     * fitting one row sooner.
     */
    .ll-results__head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stacked, the toolbar is a row of its own and leads from the left. */
    .ll-filters {
        width: 100%;
        margin-left: 0;
    }

    /*
     * The panel hangs off the right of its pill, and with the toolbar now on
     * the left that would put it off the left edge of the screen. Anchor it to
     * the pill's left instead.
     */
    .ll-fdpanel {
        right: auto;
        left: 0;
    }

    .ll-trustrow {
        justify-content: flex-start;
        gap: var(--ll-s7);
    }

    .ll-trustrow__label {
        font-size: 15px;
    }

    .ll-worry__list li,
    .ll-request__marks li {
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    .ll-phero,
    .ll-lhero {
        padding-top: 28px;
    }

    .ll-section,
    .ll-section--tight {
        padding: 52px 0 0;
    }

    .ll-section--flush {
        padding-top: 28px;
    }

    .ll-page {
        padding-bottom: 60px;
    }

    .ll-final {
        padding: 52px 0 0;
    }

    .ll-grid,
    .ll-grid--2,
    .ll-grid--3,
    .ll-grid--4,
    .ll-grid--5,
    .ll-lenders {
        grid-template-columns: 1fr;
        gap: var(--ll-s6);
    }

    /*
     * One column: the explicit grid areas are dropped so the cards fall in
     * source order, and the earnings chip comes back into the flow — hanging it
     * off the corner at -30/-50 would put it off the side of a phone.
     */
    .ll-gstack {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        max-width: 420px;
        margin: 0 auto;
        padding-bottom: 0;
    }

    .ll-gcard--1,
    .ll-gcard--2,
    .ll-gcard--3 {
        grid-area: auto;
        align-self: auto;
    }

    .ll-gcard__chip {
        position: static;
        margin-top: var(--ll-s4);
        white-space: normal;
    }

    /*
     * A full-width card needs a deeper photograph: 118px across 420px reads as
     * a strip rather than a picture.
     */
    .ll-gcard__shot {
        height: 160px;
    }

    .ll-form__rows {
        grid-template-columns: 1fr;
    }

    .ll-form {
        padding: var(--ll-s6);
    }

    /* The reference tightens the band's own padding here too (.band{padding:20px}). */
    .ll-band__card {
        padding: var(--ll-s6);
    }

    /*
     * The owner band on a phone, as the reference sets it (@media
     * max-width:767.98px in listing.css): a tighter copy column, and the three
     * figures on two rows with the third losing its divider now that it starts
     * a row of its own.
     */
    .ll-owner__copy {
        gap: var(--ll-s6);
        padding: var(--ll-s7);
    }

    .ll-owner__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ll-s5);
        padding-top: var(--ll-s6);
    }

    .ll-owner__stats > div:nth-child(3) {
        padding-left: 0;
        box-shadow: none;
    }

    /* One CTA per row, full width — .hob .acts>*{flex:1 1 100%}. */
    .ll-owner__copy > .ll-btn {
        width: 100%;
        justify-content: center;
    }

    .ll-form__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .ll-form__foot .ll-btn {
        width: 100%;
    }

    .ll-contact__body > .ll-contact__rail {
        grid-template-columns: 1fr;
    }

    /*
     * The reference stops placing the card's contents once the frame is too
     * narrow to hold a phone beside them (@media max-width:1000px in lend.css):
     * the card takes its own height, the phone centres above the copy, and both
     * come back into normal flow.
     */
    .ll-steps__card {
        flex: 0 0 88%;
        aspect-ratio: auto;
        padding: var(--ll-s7) var(--ll-s7) 0;
    }

    .ll-steps__shot {
        position: static;
        width: 210px;
        max-width: 100%;
        margin: 0 auto;
    }

    .ll-steps__body {
        position: static;
        transform: none;
        margin: 0 0 var(--ll-s7);
    }

    .ll-strip__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ll-catpick {
        width: 100%;
    }

    .ll-catpick select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /*
     * One column at this width makes a 21/10 tile about 90px tall, which the
     * label does not fit on. Squarer here, letterbox on the wide grids.
     */
    .ll-tile,
    .ll-tile--cat {
        aspect-ratio: 16 / 9;
    }

    .ll-results__empty {
        padding: var(--ll-s9) var(--ll-s6);
    }

    .ll-trustrow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {

    .ll-page__lead {
        font-size: 17px;
    }

    .ll-stats {
        width: 100%;
        justify-content: space-between;
        gap: var(--ll-s5);
    }

    .ll-stats dd {
        font-size: 26px;
    }

    /*
     * The panel is 340px wide, which is wider than a 300px screen's rail. It
     * already caps at the rail (max-width on .ll-fdpanel), and here the two
     * min/max pairs inside it stack as well — a pair of 42px date fields either
     * side of an arrow does not fit 260px.
     */
    .ll-ffmm {
        flex-direction: column;
        align-items: stretch;
    }

    .ll-ffmm em {
        display: none;
    }

    /*
     * The owner band's figures go one per row here. Two columns inside a 260px
     * rail leaves 78px a cell, and "$5–$40" needs about 80 — it was breaking
     * after the dash. Stacked, each figure has the whole rail, and the hairline
     * between them turns from a vertical rule into a horizontal one.
     */
    .ll-owner__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .ll-owner__stats > div + div,
    /*
     * Named again because the two-column rule above 480px drops this one's
     * divider (it starts a row there), and that selector outranks the sibling
     * one on specificity whatever the source order.
     */
    .ll-owner__stats > div:nth-child(3) {
        padding-top: var(--ll-s5);
        padding-left: 0;
        box-shadow: inset 0 1px 0 0 var(--ll-border-card);
    }

    .ll-modal__panel {
        padding: var(--ll-s7) var(--ll-s6);
    }

    .ll-store__btn img {
        height: 40px;
    }

    .ll-worry {
        padding: var(--ll-s6);
    }

    /*
     * The city picker stacks. A <select> keeps an intrinsic minimum around its
     * longest option (195px here) whatever flex is told, so select + gap +
     * button needed 281px inside a 260px rail at 300px and pushed the page 1px
     * wider than the screen. On its own row it has the whole rail.
     *
     * min-width on the wrapper as well: it is a flex item, so its default
     * min-width:auto would hand its parent that same intrinsic figure.
     */
    .ll-cityswitch {
        width: 100%;
        min-width: 0;
    }

    .ll-catpick {
        flex-wrap: wrap;
    }

    .ll-catpick select,
    .ll-catpick .ll-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ll-ticker {
        margin-top: 36px;
    }

    /* Two marks per row is still legible at 320px; the icons come down a size. */
    .ll-trustrow__icon img {
        width: 30px;
        height: 30px;
    }

    .ll-trustrow__label {
        font-size: 13px;
    }
}

@media (max-width: 1024px) {

    /* The contents rail moves above the prose once the column stacks. */
    .ll-legal {
        grid-template-columns: 1fr;
        gap: var(--ll-s9);
    }

    .ll-legal__toc {
        position: static;
    }

    .ll-legal__toc-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ll-s3) var(--ll-s6);
    }

    .ll-legal__body {
        max-width: none;
    }
}

@media (max-width: 480px) {

    .ll-legal__toc-list {
        grid-template-columns: 1fr;
    }

    .ll-legal__body {
        font-size: var(--ll-fs-meta);
    }
}

/* =========================================================================
   MAP VIEW — responsive
   ========================================================================= */

@media (max-width: 1180px) {

    /*
     * The two panes stop fitting side by side, so they become tabs and only one
     * shows at a time. The rail loses its scroll cap because it is now the whole
     * pane rather than a column beside the map.
     */
    .ll-mv {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ll-mv__tabs {
        display: flex;
        gap: var(--ll-s1);
        margin: var(--ll-s3);
        padding: 4px;
        border-radius: var(--ll-r-full);
        background-color: var(--ll-surface-inset);
        box-shadow: var(--ll-hairline-card);
    }

    .ll-mv__tabs button {
        flex: 1;
        min-height: 40px;
        border: 0;
        border-radius: var(--ll-r-full);
        background: none;
        font-family: var(--ll-font);
        font-size: var(--ll-fs-small);
        font-weight: 500;
        color: var(--ll-text-secondary);
        cursor: pointer;
    }

    .ll-mv__tabs button.is-on {
        background-color: var(--ll-red);
        color: var(--ll-white);
    }

    .ll-mv__side {
        box-shadow: inset 0 -1px 0 0 var(--ll-border-card);
    }

    .ll-mv[data-mv-pane="map"] .ll-mv__side {
        display: none;
    }

    .ll-mv[data-mv-pane="list"] .ll-mv__canvas {
        display: none;
    }

    .ll-mv__list {
        max-height: none;
    }

    .ll-mv__canvas {
        min-height: 460px;
    }

    /* No room for it beside the zoom stack at this width. */
    .ll-mv__hint {
        display: none;
    }
}

@media (max-width: 760px) {

    /* Bigger targets for a thumb. */
    .ll-mv__ctl button {
        width: 44px;
        height: 44px;
    }

    /*
     * The preview docks to the bottom of the canvas rather than chasing its pin
     * — at this width a floating card has nowhere to go without covering the
     * map it is describing.
     */
    .ll-mvprev {
        left: var(--ll-s4) !important;
        right: var(--ll-s4);
        top: auto !important;
        bottom: var(--ll-s4);
        width: auto;
        max-width: none;
    }

    .ll-mvprev__ph {
        width: 84px;
        height: 84px;
    }

    .ll-mvprev__bd {
        padding-right: 0;
    }

    .ll-mv__legend {
        left: var(--ll-s4);
        bottom: var(--ll-s4);
        font-size: 11.5px;
    }

    .ll-mv__fs {
        left: var(--ll-s4);
        top: var(--ll-s4);
    }

    .ll-mv__ctl {
        right: var(--ll-s4);
        top: var(--ll-s4);
    }
}


/* =========================================================================
   Content rail — the reference's stepped container, scoped to the designed
   inner pages (see inner-pages.css for the base values). Bootstrap's steps:
   1320 / 1140 / 960 / 720 / 540 / fluid, each inside 12px gutters.
   ========================================================================= */

@media (max-width: 1399.98px) {
    .page-template-page_templates {
        --ll-container: 1164px; /* 1140 + gutters */
    }
}

@media (max-width: 1199.98px) {
    .page-template-page_templates {
        --ll-container: 984px; /* 960 + gutters */
    }
}

@media (max-width: 991.98px) {
    .page-template-page_templates {
        --ll-container: 744px; /* 720 + gutters */
    }
}

@media (max-width: 767.98px) {
    .page-template-page_templates {
        --ll-container: 564px; /* 540 + gutters */
    }
}

@media (max-width: 575.98px) {
    .page-template-page_templates {
        --ll-container: 100%;
    }
}


/* =========================================================================
   Search results — the empty state and its heading row, at the reference's
   own 768px breakpoint (browse.css). The request form that the empty state's
   button opens has moved to css/request-form.css, which carries its own.
   ========================================================================= */

@media (max-width: 768px) {

    .ll-results-empty {
        padding: var(--ll-s12) var(--ll-s5);
    }

    /* The heading row stacks; "Clear search" tucks under the title. */
    .ll-results-sec .ll-sechead--split {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ll-s4);
    }
}


/* =========================================================================
   "Tell Us What You Need" strip — the reference stacks its two halves at
   900px and the field/button pair at 560px (.rstrip-row / .rstrip-f in
   browse.css); the strip had no narrow rules at all and crushed on a phone.
   ========================================================================= */

@media (max-width: 900px) {

    .ll-askstrip {
        grid-template-columns: 1fr;
        gap: var(--ll-s6);
        padding: var(--ll-s7) var(--ll-s6) var(--ll-s6);
    }

    .ll-askstrip__title {
        font-size: 23px;
    }
}

@media (max-width: 560px) {

    .ll-askstrip__form {
        flex-direction: column;
        align-items: stretch;
    }

    .ll-askstrip__form .ll-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================================
   LEND — responsive, per the reference (lend.css) and the mobile brief:
   the hero card stack leaves at 1000px as the reference does, and below
   760px every section reads centre-aligned.
   ========================================================================= */

@media (max-width: 1000px) {

    /* The reference hides the fanned card stack once the hero stacks. */
    .ll-page--lend .ll-gstack {
        display: none;
    }
}

@media (max-width: 760px) {

    /* Section heads and standalone copy centre on phones. */
    .ll-page--lend .ll-sechead,
    .ll-page--lend .ll-sechead--split {
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-sechead--split {
        flex-direction: column;
    }

    .ll-page--lend .ll-lhero__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-lhero__copy .ll-page__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-page--lend .ll-lhero__actions {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-reason,
    .ll-page--lend .ll-worry {
        text-align: center;
    }

    .ll-page--lend .ll-reason {
        flex-direction: column;
        align-items: center;
    }

    .ll-page--lend .ll-reason__icon {
        margin: 0 auto;
    }

    .ll-page--lend .ll-worry__q {
        justify-content: center;
    }

    .ll-page--lend .ll-worry__list li {
        text-align: left;
    }

    .ll-page--lend .ll-note {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-steps__body {
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-final__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ll-page--lend .ll-final__copy .ll-page__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .ll-page--lend .ll-store {
        justify-content: center;
    }

    .ll-page--lend .ll-lender,
    .ll-page--lend .ll-prod__body {
        text-align: left;
    }
}


/* =========================================================================
   INNER PAGES — the phone reads centred
   The lend page has read centre-aligned on a phone since it was built (the
   block above, at the reference's own 760px). The rest of the site stayed
   left-aligned, which is the difference reported page after page — so the same
   recipe applies to every inner page here: Browse Gear, Contact and both
   listing pages.

   Only the page's own voice centres — the hero, the section heads, a lead, a
   form's introduction. Anything a visitor reads as data keeps its left edge,
   because that is the edge the eye runs down: a form's fields, a card's body,
   a bulleted list. That is the same line the lend page draws.
   ========================================================================= */

@media (max-width: 760px) {

    /* The page hero: crumb, pill, kicker, title, lead. */
    .ll-page .ll-phero__inner {
        align-items: center;
        text-align: center;
    }

    /* Every section head, not only the lend page's. */
    .ll-page .ll-sechead,
    .ll-page .ll-sechead--split {
        align-items: center;
        text-align: center;
    }

    .ll-page .ll-sechead--split {
        flex-direction: column;
    }

    /* A lead has a measure of its own, so centring it means centring the box. */
    .ll-page .ll-page__lead {
        margin-left: auto;
        margin-right: auto;
    }

    /* The trust marks under the search bar, inside their two columns. */
    .ll-page .ll-trustrow__item {
        justify-content: center;
    }

    /*
     * A form's introduction centres with the rest of the page; the fields
     * below it do not — centred labels over centred inputs read as decoration
     * rather than as something to fill in, and the submit row keeps the
     * full-width button the narrow blocks give it.
     */
    .ll-page .ll-form__head {
        align-items: center;
        text-align: center;
    }

    .ll-page .ll-form__note {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .ll-page .ll-field {
        text-align: left;
    }

    /* Contact — the "Reach Us Directly" rail beside the form. */
    .ll-page--contact .ll-contact__rail {
        text-align: center;
    }

    .ll-page--contact .ll-way {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: var(--ll-s3);
    }

    .ll-page--contact .ll-way__body {
        align-items: center;
    }
}