/* mobile.css — everything below 1080px. Owner piece: "mobile". Loaded last, so it wins.

   Principle: the phone is not a squeezed desktop. It gets a LARGER display scale,
   taller images, hairline-ruled lists instead of columns, and 44px minimum targets.
   Three breakpoints: 1180 (grid folds), 900 (one column + menu sheet), 620 (phone). */

/* ── 1180 — the 12-column grid folds to halves ────────────────────────────── */

@media (max-width: 1180px) {
  .works .work.size-large { grid-column: span 12; }
  .works .work.size-medium { grid-column: span 6; }
  .works .work.size-small { grid-column: span 6; }
  .timeline-row { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 62px; }
}

/* ── 900 — single column, menu sheet, touch sizing ────────────────────────── */

@media (max-width: 900px) {
  :root {
    --nav-h: 56px;
    /* Gutter honours the notch: viewport-fit=cover is set on every page. */
    --pad: max(clamp(26px, 5vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }

  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 16px;              /* up, not down — 16px is the iOS legibility floor */
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Nav bar ───────────────────────────────────────────────────────────── */

  .nav-inner { gap: 16px; }
  /* 14px/1.55 is a 21px box — the wordmark is a link and has to be thumb-sized. */
  .brand { font-size: 14px; letter-spacing: 0.19em; padding: 12px 0; }

  .burger {
    display: block; width: 44px; height: 44px;
    margin-right: -10px;          /* keep the bars optically on the gutter */
  }
  .burger i { left: 9px; right: 9px; }
  .burger i:first-child { top: 16px; }
  .burger i:last-child { bottom: 16px; }
  .nav.open .burger i:first-child { transform: translateY(5px) rotate(45deg); }
  .nav.open .burger i:last-child { transform: translateY(-6px) rotate(-45deg); }

  /* ── Menu sheet: a ruled index, not a stack of small links ─────────────── */

  .nav-main {
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--paper); color: var(--ink);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0;
    padding: clamp(26px, 7vw, 52px) var(--pad) calc(124px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    /* The sheet is inset from the top by the bar's height, so -101% of its OWN
       height still left ~48px of paper parked over the bar — a blank slab that
       covered the wordmark and the burger on every page. It has to clear its own
       offset as well as itself. */
    transform: translateY(calc(-100% - var(--nav-h) - 1px));
    transition: transform .62s var(--ease);
    z-index: 99;
  }
  .nav.open .nav-main { transform: none; }
  .nav.open { background: var(--paper); color: var(--ink); border-bottom-color: var(--rule); }

  .nav-main a {
    font-size: clamp(27px, 7.6vw, 38px);
    letter-spacing: -0.035em; line-height: 1;
    text-transform: none; opacity: 1;
    padding: 19px 0;                        /* ≈ 76px tall rows */
    border-bottom: 1px solid var(--rule);
  }
  .nav-main a:first-child { border-top: 1px solid var(--rule-strong); }
  .nav-main a[aria-current="page"]::after { display: none; }
  .nav-main a[aria-current="page"] { color: var(--muted); }

  /* The request CTA becomes the sheet's one primary action, pinned at the foot. */
  .nav-cta { display: none; }
  .nav.open .nav-cta {
    display: flex; justify-content: center;
    position: fixed; z-index: 101;
    left: var(--pad); right: var(--pad);
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    color: var(--ink); border-color: var(--rule-strong);
    padding: 18px 24px; font-size: 11px;
  }

  /* ── Section header: the spine collapses to one column ─────────────────── */

  .sec-head {
    grid-template-columns: 1fr; align-items: start;
    gap: 16px; padding-top: 20px; margin-bottom: 32px;
  }
  .sec-head .idx { margin-bottom: 13px; }
  .sec-head p { padding-bottom: 0; }

  .section-foot { margin-top: 30px; justify-content: flex-start; }

  /* ── Hero ──────────────────────────────────────────────────────────────── */

  /* Desktop puts the drawing panel beside the sentence; narrow screens stack the
     same two fields instead of overlapping them. The panel is white and the
     sentence is paper-coloured, so laying one over the other would be invisible
     type — the split is a legibility requirement here, not a preference.

     Flow, not absolute placement. The hero used to be a fixed 540–780px box with
     the panel positioned into it, which meant the sentence had whatever height
     was left over — and once the call to action joined it, a 568px phone had
     less room than the block needed and simply clipped it. Stacked in flow the
     box asks for a screen (capped at 780, so the second beat still arrives in
     one thumb-scroll) and grows past it only when the content genuinely needs
     the room. Nothing is ever cut. */
  .hero {
    height: auto;
    min-height: min(100svh, 780px);
    max-height: none;
    display: flex; flex-direction: column;
    padding-top: var(--nav-h);
  }

  .hero-media {
    position: relative; inset: auto;
    flex: 0 0 auto;
    height: min(46svh, 360px);
  }

  .hero-inner {
    margin-top: auto;               /* pinned to the floor while there is slack */
    padding-top: clamp(26px, 7vw, 48px);
    padding-bottom: calc(clamp(26px, 6vw, 40px) + env(safe-area-inset-bottom, 0px));
  }

  /* The bar carries its own ink ground over the hero (base.css), so it keeps the
     paper colour it has everywhere else and needs no scrim — ink under paper is
     ~16:1 on its own.

     `:not(.open)` because this rule sits below `.nav.open` at equal specificity
     and was quietly winning over it: with the sheet pulled down the bar turned
     paper and this line put paper text back on it, so the wordmark and burger
     disappeared for as long as the menu was open. The open sheet sets its own
     colours; leave them alone. */
  .nav:not(.solid):not(.open) { color: var(--paper); text-shadow: none; }
  .nav:not(.solid):not(.open) :focus-visible { outline-color: var(--paper); }


  /* Slide index becomes a progress rule the width of the text measure. */


  /* ── Services: a ruled editorial list, one column ──────────────────────── */

  .svc {
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 10px 14px;
    padding: 26px 0;
    align-items: start;
  }
  .svc .num  { grid-column: 1; grid-row: 1; font-size: 10px; letter-spacing: 0.2em; padding-top: 0; }
  .svc .name { grid-column: 1; grid-row: 2; font-size: clamp(28px, 7.6vw, 38px); letter-spacing: -0.036em; }
  .svc .desc { grid-column: 1; grid-row: 3; font-size: 15px; max-width: 44ch; padding-top: 2px; }
  .svc .arr  { display: block; grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; font-size: 17px; padding-top: 0; }
  .svc:hover { padding-left: 0; }

  /* ── Featured / works ──────────────────────────────────────────────────── */

  .feat { grid-template-columns: 1fr; gap: 40px; }
  .feat-card .title { margin-top: 15px; font-size: 21px; letter-spacing: -0.028em; }
  .feat-card .meta { font-size: 12px; margin-top: 5px; }

  .works { gap: 40px 14px; }
  .works .work.size-large,
  .works .work.size-medium,
  .works .work.size-small { grid-column: span 12; }
  .work-media,
  .work.size-large .work-media,
  .work.size-medium .work-media { aspect-ratio: 3 / 2; }
  .work-info { padding-top: 13px; margin-top: 12px; }
  .work-info .title { font-size: 18px; }

  .video-strip { grid-template-columns: 1fr; gap: 16px; }
  .video-card .play { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  /* The 44px play target owns the bottom-right corner; the caption stops short
     of it instead of running underneath it. */
  .video-card .label { left: 14px; right: 68px; bottom: 20px; font-size: 10px; line-height: 1.4; }

  /* ── Values / timeline ─────────────────────────────────────────────────── */

  .values { grid-template-columns: 1fr; gap: 30px; }
  .value { padding-top: 18px; }
  .value .title { font-size: 23px; margin: 11px 0 10px; }
  .value .body { font-size: 15px; }

  .timeline-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .timeline-row .title { grid-column: 1; font-size: 22px; padding-top: 0; }
  .timeline-row .desc { grid-column: 1; font-size: 15px; padding-top: 0; }
  .timeline-row .marker { display: none; }

  /* ── Vendita / affitto ─────────────────────────────────────────────────── */

  /* minmax(0, …), never a bare 1fr: `1fr` is minmax(auto, 1fr), so the track
     floors at the card's min-content width. The thumb rail is eight 88px plates
     in a row — 746px — and that floor blew the whole document out to 790px on
     every phone, taking the fixed nav with it. */
  .prop-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  /* Desktop hangs the plate number on the rule beside the gallery. Stacked, the
     gallery starts right under that rule and the number landed on the sky of
     whatever photograph came first. Give it back its own strip. */
  .prop-card > [data-gallery] { margin-top: 24px; }
  .prop-gallery { aspect-ratio: 3 / 2; }
  .prop-gallery .nav-btn { opacity: 1; width: 44px; height: 44px; background: rgba(20, 20, 15, .5); }
  .prop-gallery .counter { bottom: 12px; }

  .prop-thumbs {
    gap: 6px; margin: 6px calc(var(--pad) * -1) 0; padding: 0 var(--pad);
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .prop-thumbs::-webkit-scrollbar { display: none; }
  .prop-thumbs button { width: 88px; scroll-snap-align: start; }

  /* Stacked, the card falls back to source order and the price landed UNDER the
     ledger — the largest number on the object arriving after four small ones.
     Desktop hangs it directly beneath the address; the phone now says the same
     things in the same sequence. */
  .prop-card > [data-gallery] { order: 1; }
  .prop-head    { order: 2; }
  .prop-loc     { order: 3; }
  .prop-price   { order: 4; }
  .prop-details { order: 5; }
  .prop-desc    { order: 6; }
  .prop-sub-head{ order: 7; }
  .prop-units   { order: 8; }
  .prop-cta     { order: 9; }

  .prop-head { margin-top: 20px; }
  .prop-name { font-size: 25px; }
  .prop-desc { font-size: 15px; }
  .prop-detail { padding: 14px; }
  .prop-unit { padding: 16px 14px; }

  /* ── Form ──────────────────────────────────────────────────────────────── */

  .form-layout { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked, every field is a label and a rule with nothing else between them;
     20px let eight of them run together into one grey block. */
  .form-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-group input, .form-group textarea, .form-group select {
    font-size: 16px;              /* below 16px iOS zooms the whole page on focus */
    padding: 13px 0;
  }
  .form-group textarea { min-height: 120px; }
  .form-submit { margin-top: 32px; }
  .form-submit .btn-pill { width: 100%; justify-content: center; }

  /* ── Contact ───────────────────────────────────────────────────────────── */

  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-blocks { grid-template-columns: 1fr 1fr; gap: 22px; }
  .contact-block .val { font-size: 17px; }
  /* Phone and email are the page's whole purpose: 26px of link is not a target.
     The rule rides up with the padding so the underline stays on the baseline. */
  .contact-block .val .link-u { padding: 10px 0; }
  .contact-block .val .link-u::after { bottom: 8px; }
  .contact-caps li { font-size: 15px; }

  /* ── Footer ────────────────────────────────────────────────────────────── */

  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { font-size: 15px; }
  .footer-col ul { gap: 4px; }
  /* 15px/1.5 is a 22px box; 11px of pad each side clears the 44px floor. */
  .footer-col a, .footer-col li { font-size: 15px; display: inline-block; padding: 11px 0; }

  /* ── Buttons: every pill clears 44px ───────────────────────────────────── */

  .btn-pill { padding: 17px 26px; }
}

/* ── 620 — phone: full-bleed imagery, tighter chrome ──────────────────────── */

@media (max-width: 620px) {
  :root { --pad: max(26px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }

  /* Display scale. Every clamp reaches its ceiling by ~372px, so the phone scale
     is a fixed set of sizes rather than a viewport-dependent smear — and the
     em-based measures below decide the line breaks, not the device width. */
  .display { font-size: clamp(38px, 12.8vw, 50px); }
  /* .hero h1 carries its own size in hero.css — beat it here, and set the measure
     in em so the two authored lines always break as Realizziamo / i vostri, /
     investimenti / immobiliari. at every phone width instead of dangling "i". */
  .hero h1 { font-size: clamp(40px, 14.4vw, 54px); max-width: 5em; }
  .page-head h1 { font-size: clamp(38px, 12.6vw, 49px); max-width: 6.4em; }
  .sec-head h2 { font-size: clamp(28px, 10vw, 40px); max-width: 8.4em; }
  .svc .name { font-size: clamp(30px, 10.4vw, 38px); max-width: 9em; }

  /* Measure: a phone line is ~40 characters, never 60. */
  .lede, .body-lg, .sec-head p, .svc .desc, .value .body, .prop-desc,
  .form-intro p, .form-sent p, .timeline-row .desc, .footer-brand p { max-width: 40ch; }
  /* …except the promise, which carries a divider on its top edge: capped at 40ch
     the rule stopped three quarters of the way across and read as a broken line
     rather than as a division. The measure is the border's, the text is short. */
  .form-intro .promise { max-width: none; }

  /* The lead images run edge to edge; only the captions stay on the gutter.
     Exactly cancels .container padding, so nothing overflows the viewport.

     Bleed only — no aspect override. This rule used to force 4:5 as well, which
     was written when the lead plates happened to be vertical phone shots; pointed
     at a 1.9:1 architectural photograph the same crop kept the road and threw the
     building away. The shape of a plate is now decided by the shape of its
     source: 3:2 by default (above), 4:5 for a portrait original (works.css
     [data-ar="p"]). */
  .feat-card .media,
  .work.size-large .work-media { margin-inline: calc(var(--pad) * -1); }
  /* The plate number is positioned inside the media box, so a bled plate drags
     it out to the screen edge with the photograph. Put it back on the gutter —
     the number stands on the same margin as every caption on the page. */
  .work.size-large .work-media .stamp { left: var(--pad); }

  /* Nothing hangs off the right gutter on a phone — metadata stacks under its title. */
  .work-info { flex-direction: column; align-items: flex-start; gap: 3px; }
  .work-info .loc { white-space: normal; }
  .prop-head { flex-direction: column; align-items: flex-start; gap: 9px; }
  .prop-gallery .counter { left: 12px; right: auto; }

  /* The service arrow reads as an affordance under the row, not a lost glyph. */
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc .arr { grid-column: 1; grid-row: 4; justify-self: start; align-self: start; margin-top: 2px; }

  .contact-blocks { grid-template-columns: 1fr; gap: 18px; }
  .prop-details { grid-template-columns: 1fr 1fr; }
  .prop-unit { grid-template-columns: 1fr; }
  .prop-unit .u-price { text-align: left; }

  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* ── Short viewports: the action has to survive the first screen ──────────── */
/* An SE-class phone is 568px tall. A 360px drawing panel plus four lines of
   display serif plus the call to action does not fit in it, and the whole point
   of putting the action in the hero is that it is on the first screen. The panel
   and the type both give ground here; nothing is dropped. */

@media (max-width: 900px) and (max-height: 700px) {
  .hero-media { height: min(32svh, 232px); }
  .hero-inner { padding-top: clamp(16px, 3.4vw, 26px); }
  .hero h1 { font-size: clamp(30px, 10.2vw, 44px); max-width: 7em; }
  .hero-cta { margin-top: clamp(18px, 3vw, 28px); }
}

/* Landscape on a phone: 390px of height with the fields stacked is four screens
   of hero. Below 520px tall the two fields go side by side, the way they do from
   901px up — same decision, reached by flex instead of by absolute placement. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .hero { flex-direction: row; align-items: stretch; padding-top: 0; }
  .hero-media { order: 2; width: 46%; height: auto; margin-top: var(--nav-h); }
  .hero-inner { width: 54%; margin-top: auto; padding-top: var(--nav-h); }
  .hero h1 { font-size: clamp(24px, 4.6vw, 38px); max-width: 8em; }
}

/* ── Touch: hover states must not stick after a tap ───────────────────────── */

@media (hover: none) {
  .work:hover .work-media img { transform: scale(1.02); }
  .svc:hover { background: none; padding-left: 0; }
  .svc:hover .arr { transform: none; color: var(--muted); }
  .btn-pill:hover { background: none; color: inherit; border-color: var(--rule-strong); }
  /* …but the hero pill is paper-on-ink. The rule above would strand it as ink
     text inside an ink border the moment iOS leaves :hover stuck after a tap. */
  .btn-pill.on-ink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .nav-cta:hover { background: none; }
  .prop-unit:hover { background: var(--paper); }
  .link-u:hover::after { transform: scaleX(0); }
  .prop-gallery .nav-btn:hover { background: rgba(20, 20, 15, .5); }

  /* Give the tap its own confirmation instead. */
  .btn-pill:active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn-pill.on-ink:active { background: transparent; color: var(--paper); border-color: var(--paper); }
  .svc:active { background: var(--paper-2); }
  .nav-main a:active { color: var(--muted); }
}

/* 2026-09-23: smaller hero sentence + offer list (beats the older .hero h1 rules above). */
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(26px, 8vw, 38px); max-width: none; }
  .hero-list { font-size: 13.5px; }
  .hero-list li { padding: 7px 0; }
  .hero-sale { padding: 28px var(--pad) 16px; font-size: 10px; }
  .feat { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (max-height: 700px) { .hero h1 { font-size: clamp(24px, 7.2vw, 32px); } }
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) { .hero h1 { font-size: clamp(20px, 3.6vw, 28px); } }
@media (max-width: 900px) { .brand { font-size: 12px; letter-spacing: .08em; } }
@media (max-width: 380px) { .brand { font-size: 11px; letter-spacing: .04em; } }
@media (max-width: 900px) { .prop-badge { white-space: normal; line-height: 1.5; } }