/* Scheda immobile v2 (proposta "scheda" del 03/11/2026).
   Galleria a mosaico e mappa in alto; sotto due colonne: contenuti (8/12) e prezzo con le azioni (4/12, fisso allo
   scorrimento); il resto a tutta larghezza. Sul telefono "Richiedi informazioni" resta in una barra in basso. */

@layer pages {
  /* Anteprima privata per il proprietario: striscia in alto, sopra la scheda */
  .detail-preview-banner { background: var(--accent-soft, #edf7f2); color: var(--ink, #18352a); border-bottom: 1px solid var(--line, #cfe2d8); padding: .75rem 1rem; text-align: center; font-size: .95rem; }
  /* La barra dei filtri resta visibile in cima ma non segue lo scorrimento: in alto restano testata e barra rapida */
  .top + .filters.bar,
  .filters.bar.detail-bar { position: relative; top: auto; } /* anche nei siti su misura, dove la testata non e' .top */
  html { scroll-padding-top: calc(var(--top-h, 70px) + var(--nav-h, 60px) + 12px); }
  .viewer-open { overflow: hidden; }

  .detail-crumbs { padding: 20px 0 16px; }

  /* ---------- Foto e mappa ---------- */
  .hero-top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: stretch;
  }
  /* Solo in sviluppo (DEBUG): porta alla scheda dell'immobile nel CMS */
  .dev-cms { position: fixed; left: 16px; bottom: 16px; z-index: 50; }
  .gallery-wrap { position: relative; grid-column: 1 / span 8; min-width: 0; }
  .hero-map { position: relative; isolation: isolate; grid-column: 9 / span 4; min-width: 0; min-height: 0; } /* isolation: i comandi sopra la mappa (z-index alto) non passano sopra la testata */

  .gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: clamp(360px, 58vh, 600px);

    & .pic { padding: 0; border: 0; border-radius: var(--r-md); cursor: zoom-in; }
    & .pic picture { display: contents; }
    & .pic img { transition: scale .6s var(--ease); }
    & .pic:hover img { scale: 1.03; }
    & .main { grid-row: span 2; border-radius: var(--r-lg); }
    &.one { grid-template-columns: 1fr; }
    &.empty { grid-template-columns: 1fr; }
    &.empty .main { display: grid; place-items: center; cursor: default; color: var(--ink-soft); }
  }
  /* In basso a destra, dentro la foto grande: posizione e larghezza seguono le colonne 2fr 1fr della galleria */
  .gallery-actions {
    position: absolute;
    right: calc((100% - 10px) / 3 + 10px + 18px);
    bottom: 18px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: calc((100% - 10px) * 2 / 3 - 36px);

    & .icon { width: 18px; height: 18px; }
  }
  .gallery:is(.one, .empty) ~ .gallery-actions { right: 18px; max-width: calc(100% - 36px); }

  .map-box { position: absolute; inset: 0; border-radius: var(--r-lg); }
  .map-box .map-snap { position: absolute; inset: 0; cursor: grab; }
  /* La foto ha gia' disegnato il segnaposto della v1, condivisa e quindi non modificabile da qui: lo copre un tondo sfumato
     della stessa foto preso 56px piu' in la'. Il pin della v2 ci sta sopra. */
  .map-box .map-snap-patch {
    --shift: 56px;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    translate: var(--shift) 0;
    pointer-events: none;
    mask: radial-gradient(circle 22px at calc(50% - var(--shift)) calc(50% - 6px), #000 70%, transparent 100%);
  }
  .map-box .map-snap[hidden] + .map-snap-patch { display: none; }
  .map-live { position: absolute; inset: 0; }
  .map-none { display: grid; place-items: center; padding: 24px; text-align: center; }
  .map-tools { position: absolute; right: 14px; bottom: 24px; z-index: 500; display: flex; gap: 8px; pointer-events: none; } /* sopra i crediti della mappa */
  .map-tools > * { pointer-events: auto; }
  .map-tools .round { background: var(--ground); }
  .map-foot {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    z-index: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: flex-end;
    gap: 8px;
    pointer-events: none;

    & > * { pointer-events: auto; }
    & .btn { margin-left: auto; }
  }

  /* ---------- Titolo e numeri chiave ---------- */
  .title-row { padding-top: 36px; display: grid; gap: 28px; }
  .title-row .title { display: grid; gap: 12px; max-width: 66%; }
  .title-row h1 { font-size: var(--step-head); }
  .address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    color: var(--ink-soft);

    & > span:not(.badges) + span::before { content: "·"; margin-right: 14px; }
  }
  .keys {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; align-content: start; gap: 2px; padding: 16px 18px; border-radius: var(--r-md); background: var(--tint); }
    & .ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 50%; background: var(--ground); color: var(--accent); }
    & .ic .icon { width: 22px; height: 22px; }
    & b { font-family: var(--display); font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
    & span:last-child { font-size: var(--step-small); color: var(--ink-soft); }
  }

  /* ---------- Barra rapida, appiccicata sotto la testata ---------- */
  .quicknav {
    position: sticky;
    top: var(--top-h, 70px);
    transition: top .35s var(--ease);
    z-index: var(--z-bar);
    margin-top: 28px;
    background: var(--ground);

    & ul { flex: 1; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 12px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
    & ul::-webkit-scrollbar { display: none; }
    & ul a { display: block; padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--step-small); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease); }
    & ul a:hover { background: var(--tint); }
    & ul a.is-here { background: var(--ink); color: var(--on-ink); }
  }
  .quicknav-row { display: flex; align-items: center; gap: 16px; box-shadow: inset 0 -1px 0 var(--line); }

  /* Compare quando il pulsante del riquadro prezzo non si vede piu' (detail.js). Sotto i 1080px c'e' la .cta-bar in basso. */
  .quicknav-cta {
    flex: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);

    &.is-on { visibility: visible; opacity: 1; }
    @media (max-width: 1080px) { display: none; }
  }

  /* ---------- Corpo a due colonne ---------- */
  .detail-body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
    padding-top: 40px;
  }
  .detail-body .content { grid-column: 1 / span 8; min-width: 0; display: grid; gap: var(--block); }
  .detail-body .aside {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--top-h, 70px) + var(--nav-h, 60px) + 16px);
    display: grid;
    gap: 14px;
  }
  .block { min-width: 0; }
  .block > h2, .block h2 { font-size: var(--step-lead); margin-bottom: 18px; }
  .full { display: grid; gap: var(--block); padding-top: var(--block); }
  .duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--block) clamp(32px, 4vw, 64px); align-items: start; }

  /* Descrizione */
  .desc .prose { max-width: 70ch; white-space: pre-line; }
  .desc details summary { display: inline-flex; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--accent); list-style: none; cursor: pointer; }
  .desc details summary::-webkit-details-marker { display: none; }
  .desc details[open] .open-label, .desc details:not([open]) .close-label { display: none; }
  .desc details .prose { margin-top: 14px; }
  .desc details[open] summary { order: 2; }
  .desc details[open] { display: flex; flex-direction: column; align-items: start; }

  /* Vicino a te */
  .near {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
    & b { font-family: var(--display); font-size: var(--step-lead); font-weight: 500; }
  }

  /* Servizi e collegamenti: tutto il territorio, chiuso finche' non lo apri */

  /* Scheda tecnica e dotazioni */
  .tech { display: grid; gap: 28px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--tint); }
  .tech .sentences { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; }
  .specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--gap);
    margin: 0;

    & > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--tint-2); }
    & dt { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
    & dd { margin: 0; font-weight: 600; text-align: right; }
    & .energy-row { grid-column: 1 / -1; flex-wrap: wrap; }
    & .energy-row .energy { flex: 1 0 100%; margin-top: 6px; }
  }
  .ic-s { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ground); color: var(--accent); }
  .ic-s .icon { width: 17px; height: 17px; }
  .amenities { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
  .amenities:empty { display: none; }
  .tech .amenities .badge { background: var(--ground); }

  /* Cantiere di nuova costruzione */
  .site {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--line);
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease);

    &:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
    & .site-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
    & .site-text { display: grid; gap: 4px; min-width: 0; }
    & .site-kicker { font-size: var(--step-small); font-weight: 600; color: var(--accent); }
    & b { font-weight: 600; line-height: 1.3; }
    & .site-meta { font-size: var(--step-small); color: var(--ink-soft); }
    &:hover .site-btn { background: var(--accent); color: var(--on-ink); box-shadow: none; }
  }

  /* ---------- Colonna laterale ---------- */
  .price-card {
    display: grid;
    gap: 14px;
    padding: 24px;
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--line);

    & .label { font-size: var(--step-small); font-weight: 600; color: var(--ink-soft); }
    & .price { font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
    & .sep { height: 1px; margin: 6px 0; border: 0; background: var(--line); }
    & form { margin: 0; }
  }
  .write-row, .share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .share { display: flex; gap: 6px; }
  .share .round { width: 40px; height: 40px; }
  .share .icon { width: 18px; height: 18px; }
  .share .is-copied { --round-bg: var(--accent); --round-fg: var(--on-ink); }
  .fav-btn[aria-pressed="true"] { color: var(--heart); box-shadow: inset 0 0 0 1.5px currentColor; }
  .fav-btn[aria-pressed="true"] .icon { fill: currentColor; }
  .agency .agency-ph { grid-row: span 2; display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--r-md); background: var(--ground); color: var(--accent); }
  div.agency:hover { background: var(--tint); box-shadow: none; }
  .plan3d-cta { display: grid; gap: 8px; }
  .plan3d-tip { text-align: center; }

  /* ---------- Servizi ---------- */
  .services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--tint-2); }
    & li.extra { display: none; }
    &.all li.extra { display: grid; }
    & .ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--accent); }
    & .ic .icon { width: 18px; height: 18px; }
    & .what { font-weight: 600; }
    & .dist { font-weight: 600; text-align: right; }
    & .how { grid-column: 2 / -1; font-size: var(--step-small); color: var(--ink-soft); }
  }
  .svc-more { margin-top: 16px; }
  .svc-more[aria-expanded="true"] .open-label, .svc-more[aria-expanded="false"] .close-label { display: none; }
  .svc-more .chev { width: 14px; height: 14px; transition: rotate var(--dur) var(--ease); }
  .svc-more[aria-expanded="true"] .chev { rotate: 180deg; }
  .extras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;

    & > div { display: grid; align-content: start; gap: 8px; padding: 18px; border-radius: var(--r-md); background: var(--tint); }
    & .ic { color: var(--accent); }
    & h3 { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
    & dl { display: grid; gap: 6px; margin: 0; font-size: var(--step-small); }
    & dt { color: var(--ink-soft); }
    & dd { margin: 0; }
  }

  /* ---------- Planimetria e 3D ---------- */
  .plans { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
  .plans.single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .plan-viewer { display: grid; gap: 10px; min-width: 0; }
  .plan-main { display: block; width: 100%; aspect-ratio: 690 / 498; padding: 0; border: 0; background: var(--tint); cursor: zoom-in; }
  .plan-main img { object-fit: contain; }
  .plan-count { position: absolute; right: 14px; top: 14px; }
  .plan-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .plan-thumbs button { flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--tint); cursor: pointer; }
  .plan-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .p3d-block { display: grid; gap: 14px; min-width: 0; }
  .block .p3d-block h2 { margin-bottom: 4px; }

  /* I due modi di entrare in casa (components/p3d_modes.html). Tutta la card e' cliccabile. */
  .p3d-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 640px); }
  .p3d-mode {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--ground);
    box-shadow: var(--shadow-menu);
    transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    & .stage {
      aspect-ratio: auto;
      height: 130px;
      padding-top: 12px;
      border-radius: 0;
      background: radial-gradient(120% 110% at 50% 0%, var(--accent), var(--ink));
    }
    /* la scena spunta dal fondo verde, tagliata dal bordo: al passaggio del mouse sale un poco */
    & .scene { height: 118%; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .28)); transition: translate var(--dur) var(--ease); }
    & h4 { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
    & ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    & li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.35; }
    & li .icon { flex: none; width: 16px; height: 16px; color: var(--accent); }
    & .btn .arrow { transition: translate var(--dur-fast) var(--ease); }
    /* Tutta la card apre la scheda: l'area del pulsante si allarga fino alla card, che fa da riferimento */
    & .btn { position: static; overflow: visible; }
    /* niente effetto alla pressione: rimpicciolendo, il pulsante si riprenderebbe l'area estesa e il clic sulla card andrebbe perso */
    & .btn:active { transform: none; scale: none; translate: none; }
    & .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  }
  @media (hover: hover) {
    .p3d-mode:hover { translate: 0 -4px; box-shadow: 0 0 0 2px var(--accent), 0 24px 48px rgb(16 41 31 / .2); }
    .p3d-mode:hover .scene { translate: 0 -10px; }
    .p3d-mode:hover .btn .arrow { translate: 4px 0; }
  }
  .p3d-mode .scene.iso { height: 100%; }
  /* Colonna della scheda: card una sotto l'altra, scena a sinistra e testo a destra */
  .p3d-modes.row { grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: none; }
  .p3d-modes.row .p3d-mode { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); border-radius: var(--r-md); }
  /* la scena non decide l'altezza: le due card restano uguali */
  .p3d-modes.row .stage { position: relative; height: auto; min-height: 150px; padding: 0; }
  .p3d-modes.row .scene { position: absolute; inset: 12px 8px 0; width: calc(100% - 16px); height: calc(100% - 12px); }
  .p3d-modes.row .p3d-mode-body { align-content: center; padding: 14px; }
  .p3d-modes.row .p3d-mode-body { min-width: 0; }
  .p3d-modes.row .p3d-mode-body > * { min-width: 0; max-width: 100%; }
  /* il pulsante resta dentro la card anche su schermi stretti (iPhone): va a capo invece di uscire a destra */
  .p3d-modes.row .p3d-mode-body .btn { justify-self: stretch; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 8px; }
  .p3d-mode:focus-within { box-shadow: 0 0 0 2px var(--accent), var(--shadow-menu); }
  @media (prefers-reduced-motion: reduce) {
    .p3d-mode, .p3d-mode .scene, .p3d-mode .btn .arrow { transition: none; translate: none !important; }
  }
  .p3d-mode-body { display: grid; gap: 10px; padding: 14px 16px 16px; }
  .p3d-mode-body .btn { margin-top: 4px; }

  /* ---------- FAQ e Continua la ricerca ---------- */
  .duo .qa summary { font-family: var(--font); font-size: var(--step-body); font-weight: 600; letter-spacing: 0; }
  .explore { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
  .explore a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--tint); font-weight: 500; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
  .explore a:hover { background: var(--tint-2); }
  .explore.history li { padding: 12px 18px; border-radius: var(--r-sm); background: var(--tint); font-size: var(--step-small); }

  /* ---------- Simili ---------- */
  .similar { padding-top: var(--section); }
  .similar .section-head h2 { font-size: var(--step-head); }

  /* ---------- Telefono e tablet: barra "Richiedi informazioni" in basso ---------- */
  .cta-bar { display: none; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1080px) {
    .gallery-wrap, .hero-map { grid-column: 1 / -1; }
    /* «Apri in OpenStreetMap» in alto a sinistra (in basso urtava «Vista 3D»), mai al centro sul segnaposto */
    /* Su telefono e tablet «Apri in OpenStreetMap» sta SOTTO la mappa: sopra copriva l'indirizzo del segnaposto */
    .map-foot { top: auto; bottom: -48px; left: 0; right: 0; justify-content: flex-start; }
    .hero-map { margin-bottom: 56px; }
    .gallery { height: clamp(320px, 50vh, 480px); }
    .hero-map { margin-top: 10px; aspect-ratio: 16 / 7; }
    .hero-map { align-self: start; min-height: 200px; }
    .title-row .title { max-width: none; }
    .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .detail-body .content, .detail-body .aside { grid-column: 1 / -1; }
    .detail-body .aside { position: static; order: -1; grid-template-columns: 1fr 1fr; align-items: start; margin-bottom: var(--block); }
    .near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duo { grid-template-columns: 1fr; }

    .cta-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: var(--z-header);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
      background: var(--ground);
      box-shadow: var(--shadow-stuck);
      translate: 0 110%;
      transition: translate var(--dur) var(--ease);

      &.is-on { translate: 0 0; }
      & .price { margin-right: auto; font-family: var(--display); font-size: var(--step-lead); font-weight: 500; }
    }
    .site-foot { padding-bottom: 80px; }
  }

  /* ---------- Telefono ---------- */
  @media (max-width: 640px) {
    .detail-crumbs { display: none; }
    .address { gap: 4px 12px; }
    .address > span:not(.badges) + span::before { content: none; } /* a capo il punto resterebbe a inizio riga */
    .hero-top { padding-top: 12px; }
    .gallery { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
    .gallery .main { aspect-ratio: 4 / 3; grid-row: auto; }
    .gallery > :not(.main) { display: none; }
    /* Come nella lista: sopra la foto restano solo le icone (le scritte nel title), una riga sola */
    .gallery-wrap .gallery-actions { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: nowrap; }
    .gallery-actions .btn { min-width: 40px; height: 40px; padding: 0 12px; justify-content: center; }
    .gallery-actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .hero-map { aspect-ratio: 4 / 3; }
    /* Safari iPhone: senza align-self e altezza minima la mappa poteva collassare a 0 e «Apri in OpenStreetMap» finiva sopra il titolo */
    .hero-map { align-self: start; min-height: 220px; }
    .title-row h1 { font-size: 1.625rem; }
    .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-body .aside { grid-template-columns: 1fr; }
    .specs, .services, .extras, .plans { grid-template-columns: 1fr; }
    .near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site { grid-template-columns: auto minmax(0, 1fr); }
    .site .site-btn { grid-column: 1 / -1; }
  }
}