/* ===========================================================================
   AJS KAPITAL — responsive behaviour
   Layouts are recomposed at each step rather than simply stacked.
   Breakpoints: 1200 · 1024 · 860 · 620 · 420
   =========================================================================== */

/* ── ≤1200px ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .explorer { grid-template-columns: 82px minmax(0, 1fr) 246px; }
  .contact__details > div { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ── ≤1024px ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .br-lg { display: none; }
  /* navigation collapses to a sheet under the masthead */
  .nav {
    position: fixed;
    top: 66px;
    left: 0; right: 0;
    display: block;
    padding: clamp(1.4rem, 5vw, 2.4rem) var(--gutter) clamp(2rem, 6vw, 3rem);
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .is-menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__list { display: block; }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__list a {
    display: block;
    padding: 1.05rem 0;
    font-size: .9rem;
    letter-spacing: .13em;
  }
  .nav__list a::after { display: none; }
  .nav__cta { margin-top: 1.6rem; width: 100%; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .nav { max-height: calc(100svh - 66px); overflow-y: auto; overscroll-behavior: contain; }
  /* zatamnjenje ispod otvorenog menija; dodir na njega zatvara meni */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(29, 27, 24, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s;
  }
  body.is-menu-open::after { opacity: 1; visibility: visible; }
  .nav--legal {
    position: static;
    display: flex;
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav--legal .nav__list { display: flex; }
  .nav--legal .nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: .8125rem; }
  .masthead__inner, .masthead.is-solid .masthead__inner { height: 66px; }
  .masthead.is-menu-open-host { background: var(--ivory); }
  .hero { padding-top: 66px; }

  /* editorial compositions relax to two even columns */
  .project__head,
  .architecture__head,
  .residences__head { grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
  .project__head .display,
  .architecture__head .display { max-width: 18ch; }
  .project__text { max-width: 62ch; }

  .composition--project { align-items: start; }
  .composition__main { grid-column: 1 / -1; }
  .composition__aside {
    grid-column: 1 / 7;
    grid-row: auto;
    margin-bottom: 0;
    margin-top: clamp(-3rem, -6vw, -6rem);
    padding-left: 0;
  }

  .gallery__item--lead { grid-column: 1 / -1; }
  .gallery__item--tall { grid-column: 1 / 7; }
  .gallery__item--wide { grid-column: 7 / -1; align-self: end; }
  .gallery__item--wide img { aspect-ratio: 4 / 5; }

  .progress__top,
  .progress__update,
  .interiors__body,
  .location__body,
  .page-head__body,
  .contact__inner { grid-template-columns: minmax(0, 1fr); }
  .page-head__body { gap: 1.2rem; }
  .page-head__body:has(.flats-facts) { grid-template-columns: minmax(0, 1fr); }

  .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .residences__teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); }
  .progress__top { gap: clamp(2rem, 5vw, 3rem); }
  .progress__shots { margin-top: 2rem; }
  .interiors__wide { margin-left: 0; }

  .closing__inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .closing__eyebrow { grid-column: 1; }
  .closing__content { gap: 1.25rem; }

  /* floor explorer: plan first, floors as a horizontal rail */
  .explorer {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 2.4rem);
  }
  .explorer__floors { order: -1; }
  .explorer__floors-label { margin-bottom: .8rem; }
  .floors {
    display: flex;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .floors::-webkit-scrollbar { display: none; }
  .floors li { flex: 1 0 auto; }
  .floor-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    min-width: 5.6rem;
    padding: .8rem 1rem .85rem;
    border-bottom: 0;
    border-left: 0;
    border-top: 2px solid transparent;
  }
  .floor-btn.is-on { border-left-color: transparent; border-top-color: var(--accent); }

  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }

  /* stranica stana */
  .unit-hero__inner,
  .unit-spec__inner,
  .unit-about__inner,
  .unit-offer__inner { grid-template-columns: minmax(0, 1fr); }
  .unit-hero__inner { gap: clamp(1.8rem, 4vw, 2.6rem); }
  .unit-hero__visual { max-width: 44rem; }
  .unit-plan__layout,
  .unit-location__layout { grid-template-columns: minmax(0, 1fr); }
  .unit-plan__rooms { position: static; }
  .unit-about__lead { max-width: 62ch; }
  .unit-offer__inner { gap: 2rem; align-items: start; }

  .contact-page__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "details"; }
  .contact-page__heading { max-width: 22ch; }

}

/* ── ≤860px ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .unit-spec__columns { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* The hero is recomposed rather than stacked: the render takes the upper
     band, the title sits below it on clean ivory so the copy stays legible. */
  .hero { display: block; min-height: 0; overflow: visible; }
  .hero__media { position: relative; inset: auto; height: min(46svh, 380px); overflow: hidden; }
  .hero__media::after {
    background: linear-gradient(to top,
      rgba(250, 247, 242, .92) 0%,
      rgba(250, 247, 242, .16) 26%,
      rgba(250, 247, 242, 0) 48%);
  }
  .hero__body { padding: clamp(1.4rem, 4vw, 2.2rem) 0 clamp(2.2rem, 6vw, 3rem); }
  .hero__place { margin-bottom: 1rem; }
  .hero__facts {
    position: relative;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .hero__fact { flex-direction: column; gap: .35rem; padding-right: .6rem; }
  .hero__fact + .hero__fact { padding-left: clamp(.7rem, 3vw, 1.4rem); }

  .stats__row { grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 4vw, 2.4rem) 0; }
  .stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats__item:nth-child(even) { padding-left: clamp(1.2rem, 4vw, 2rem); }

  .interiors__hero img { aspect-ratio: 16 / 10; }
  .interiors__pair figure:last-child { margin-top: 0; }

  .timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .timeline__item {
    padding: 0 0 1.6rem 1.6rem;
    border-left: 1px solid var(--line);
  }
  .timeline__item + .timeline__item { padding-left: 1.6rem; }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__item::before,
  .timeline__item + .timeline__item::before { left: -4px; top: .45rem; }
  .timeline__year { font-size: 1.45rem; }
  .timeline__label { margin-top: .2rem; }

  /* najava stanova: 3D prikaz iznad teksta */
  .residences__teaser { grid-template-columns: minmax(0, 1fr); }
  .residences__media { order: -1; }

  /* prekidač jezika ostaje vidljiv pored dugmeta Meni; dugmad su 44×44px,
     pa unutrašnji razmak već daje vazduh do linije */
  .lang { padding-left: .15rem; }
  .lang__btn { font-size: .8125rem; letter-spacing: .1em; padding-left: .1em; }
  .masthead__end { gap: .6rem; }

  .page { padding-top: 66px; }
  .page-head { padding-top: clamp(1.6rem, 6vw, 2.4rem); }

  /* tekstualne veze: nevidljiva površina za dodir, izgled ostaje isti */
  .link { position: relative; }
  .link::before { content: ""; position: absolute; inset: -.8rem -.4rem; }

  /* sprat: vodoravna traka na dodir, preko cele širine */
  .results-bar { display: contents; }
  /* redosled ostaje pored dugmeta Filteri, a broj ispod njih */
  .results-bar .units__showing,
  .results-bar .units__sort { order: 0; }
  .results-bar .units__sort { margin-left: 0; }
  .results-bar .floor-rail { flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; }
  .floor-rail__label { width: 100%; }
  .floor-rail__list {
    flex-wrap: nowrap;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .floor-rail__list::-webkit-scrollbar { display: none; }
  .floor-chip { flex: none; min-height: 44px; }
  .active-chip { min-height: 44px; }
  .unit-group { scroll-margin-top: 190px; }
  .page-jump { gap: 0 1.6rem; }
  .page-jump a { padding-block: .95rem; min-height: 2.75rem; }

  .filters { gap: 1.6rem; }
  .filters__group--selects { margin-left: 0; width: 100%; }

  /* spisak stanova: filteri u panelu, redosled i broj u lepljivoj traci */
  .filters.is-collapsible { display: none; }
  .filters.is-collapsible.is-open {
    position: fixed;
    inset: 66px 0 0 0;
    z-index: 85;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.8rem;
    margin: 0;
    padding: 1.2rem var(--gutter) 0;
    border: 0;
    background: var(--ivory);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;                  /* zaglavlje, dugme i linije u punoj širini */
    animation: sheetIn .32s var(--ease) both;
  }
  @keyframes sheetIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .filters.is-open .filters__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .filters__close { width: 2.75rem; height: 2.75rem; margin-right: -.6rem; font-size: 1.8rem; line-height: 1; }
  .filters.is-open .filters__sheet-foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
    background: var(--ivory);
    border-top: 1px solid var(--line);
  }
  .filters__done { width: 100%; justify-content: center; }
  .filters.is-open .chip { min-height: 44px; padding: .55em 1.1em; font-size: .75rem; }
  .filters.is-open .filters__label { font-size: .75rem; }
  .filters__reset { display: inline-flex; align-items: flex-end; min-height: 44px; }
  body.is-filters-open { overflow: hidden; }

  .units__bar {
    position: sticky;
    top: 66px;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem .8rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: .7rem var(--gutter);
    background: rgba(250, 247, 242, .97);
    border-bottom: 1px solid var(--line);
  }
  .units__filter-toggle:not([hidden]) { display: inline-flex; }
  .units__bar .units__sort { justify-self: end; width: auto; min-width: 0; }
  .units__bar .units__sort .label { display: none; }
  .units__bar .units__sort select { min-width: 0; width: 100%; max-width: 15rem; padding-block: .62em; }
  .units__bar .units__showing { grid-column: 1 / -1; order: 1; font-size: .75rem; }

  /* stranica stana: cela osnova staje u širinu, a uvećana se lista vodoravno */
  .plan-frame { padding: .8rem; overscroll-behavior-x: contain; }

  /* lepljivi poziv na dnu ekrana, iznad sigurne zone telefona */
  .has-unit-bar { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .unit-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem max(var(--gutter), env(safe-area-inset-right))
             calc(.7rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: rgba(250, 247, 242, .97);
    backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line-strong);
    transition: transform .35s var(--ease), visibility .35s;
  }
  .unit-bar.is-away { transform: translateY(110%); visibility: hidden; }
  .unit-bar__info { display: grid; gap: .15rem; min-width: 0; }
  .unit-bar__price {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .unit-bar__status {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .unit-bar__cta { flex: none; padding: .95em 1.2em; letter-spacing: .12em; }
  .is-menu-open .unit-bar, .is-filters-open .unit-bar { visibility: hidden; }
  .unit-plan__head { gap: 1rem; }
  .plan-tool--download { margin-left: 0; }
  .unit-gallery { grid-template-columns: minmax(0, 1fr); }
  .unit-nav__inner { min-height: 4.5rem; }
  .unit-nav__link { font-size: .8rem; }
  .unit-nav__link, .unit-nav__all { min-height: 44px; }
  .unit-jump__list a { font-size: .8125rem; padding-block: .95rem; }
  .unit-jump.has-more-right::after {
    content: "→";
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 100%;
    padding-left: .6rem;
    background: linear-gradient(to right, rgba(250, 247, 242, 0), var(--ivory) 42%);
    color: var(--accent);
    font-size: 1rem;
    pointer-events: none;
  }
  .units__showing { color: var(--ink-2); }
  .field--inline { flex: 1 1 9rem; }
  .field--inline select { min-width: 0; }


}

/* ── ≤620px ──────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  :root { --section: clamp(58px, 13vw, 84px); }

  .nav--legal { display: none; }
  .legal { padding-top: calc(66px + 1.5rem); }
  .legal__back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    margin-bottom: clamp(1.5rem, 5vw, 2.2rem);
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .closing__actions { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .closing__actions .btn { justify-content: center; }

  /* sitna verzalna slova su na telefonu malo veća i ređe razmaknuta */
  .label { font-size: .75rem; letter-spacing: .14em; }
  .unit-card__k { font-size: .8125rem; letter-spacing: .14em; }
  .unit-card__status, .unit-card__go { font-size: .8125rem; letter-spacing: .13em; }
  .unit-hero__facts dt, .spec dt, .field > label, .field > .label { font-size: .8125rem; letter-spacing: .14em; }
  .page-jump a { font-size: .8125rem; letter-spacing: .14em; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__col p + p { margin-top: 0; }

  /* the floor plate is physically small here, so its lettering scales up */
  .plan-id { font-size: 24px; }
  .plan-area { font-size: 19px; }
  .plan-note { font-size: .8125rem; line-height: 1.5; letter-spacing: 0; }
  .plan-outline { stroke-width: 3.4; }
  .plan-corridor, .plan-party { stroke-width: 2.4; }
  /* osnova iz kataloga je ovde široka ~330px, pa bi slova bila sitna (6–9px):
     broj stana se uvećava, a površina i oznaka „Ovaj stan" se sklanjaju —
     površina stoji u spisku ispod, a istaknut stan objašnjava legenda */
  .plan-svg--catalog .plan-id { font-size: 84px; stroke-width: 14px; transform: translateY(26px); }
  .plan-svg--catalog .plan-area,
  .plan-svg--catalog .plan-self { display: none; }

  .hero { min-height: 92svh; }
  .hero__title { font-size: clamp(2.9rem, 15vw, 4.4rem); }
  .hero__lead { max-width: 26ch; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__facts { grid-template-columns: repeat(3, 1fr); }
  .hero__fact dt { font-size: 1.35rem; }
  .hero__fact dd { font-size: .75rem; letter-spacing: .08em; }

  .composition--project { gap: 1rem; }
  .composition__aside { grid-column: 1 / 9; margin-top: -2.4rem; }

  .gallery { gap: 1.6rem 1rem; }
  .gallery__item--tall,
  .gallery__item--wide { grid-column: 1 / -1; }
  .gallery__item--wide img { aspect-ratio: 3 / 2; }
  .gallery__item--wide { margin-top: 0; }

  .unit-grid { grid-template-columns: minmax(0, 1fr); }
  .units__sort { width: 100%; }
  .units__sort select { flex: 1; min-width: 0; }

  .progress__update { gap: 1.8rem; }
  .progress__shots { grid-template-columns: minmax(0, 1fr); }
  .shot img { aspect-ratio: 16 / 10; }

  .materials__item { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .unit-spec__equipment .materials__item { grid-template-columns: minmax(0, 1fr); }
  .interiors__pair { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .interiors__pair img { aspect-ratio: 4 / 3; }

  .point { grid-template-columns: 4.8rem minmax(0, 1fr); }
  .point__distance { font-size: 1.55rem; }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .form__foot { gap: 1rem; }
  .form__foot .btn { width: 100%; justify-content: center; }

  .contact__details > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }

  /* Kratak uvod i forma pre dodatnih kontakt podataka. */
  .contact-page-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .contact-page__main { padding-top: 1.5rem; }
  .contact-page__pending { margin-top: 1.5rem; }
  .contact-page__details > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .contact-page__form-card { padding: 1.5rem 1.1rem; }
  .contact-page__selected-link { margin-left: 0; }

  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer__base { flex-direction: column; gap: .4rem; }

  /* stanovi: sažetak kao tri kratka reda */
  .flats-facts { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .flats-facts > div,
  .flats-facts > div + div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .2rem 1rem;
    padding: .7rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .flats-facts dd { margin-top: 0; font-size: 1.3rem; text-align: right; }
  .flats-facts__note { font-size: .875rem; }

  /* stranica stana: na telefonu dovoljna je veza „Svi stanovi" */
  .unit-topbar .crumbs { display: none; }
  .unit-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .9rem; }
  .crumbs { font-size: .8125rem; letter-spacing: .12em; gap: .5em; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .unit-hero__facts { gap: .6rem; }
  .unit-hero__facts dd { font-size: .875rem; }
  .unit-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .unit-gallery__item:first-child img { aspect-ratio: 4 / 3; }
  .unit-offer__price { font-size: 2.2rem; }
  .unit-offer__action .btn { width: 100%; justify-content: center; }
  .unit-nav__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
    padding-block: 1.4rem;
  }
  .unit-nav__all { grid-column: 1 / -1; order: 1; justify-content: flex-start; }
  .plan-tools { width: 100%; }
  .plan-tool--download { margin-left: auto; }
}

/* ── ≤420px ──────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .masthead .wordmark__logo { width: 132px; }
  .nav-toggle__label { display: none; }
  .lang { padding-left: .1rem; }
  .masthead__end { gap: .25rem; }
  .hero__fact { padding-right: .35rem; }
  .hero__fact + .hero__fact { padding-left: .7rem; }
  .stats__row { grid-template-columns: minmax(0, 1fr); }
  .stats__item, .stats__item:nth-child(even) {
    padding-left: 0;
    border-left: 0;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
  }
  .stats__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .stats__note { max-width: none; }
  .chip { padding-inline: .85em; letter-spacing: .1em; }
}

@media (max-width: 340px) {
  .masthead__inner { gap: .5rem; }
  .masthead .wordmark__logo { width: 112px; }
}

/* ── wide screens ────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --max: 1500px; }
  .hero__title { font-size: 8.6rem; }
}

@media (max-width: 860px) {
  .filters--layouts .filters__group--selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters--layouts .field--inline select { min-width: 0; }
  .filters--layouts .availability-switch { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .layout-grid { grid-template-columns: minmax(0, 1fr); }
  .layout-card .unit-card__media { aspect-ratio: 3 / 2; }
  .layout-unit { gap: .6rem; }
}