/* =============================================================
   DANDREET — MOBILE EXPERIENCE LAYER
   v20260605-m4
   A dedicated, self-contained mobile design system loaded AFTER
   dandreet-site.css. It is intentionally authored as its own
   premium product for phones — not a shrunk desktop — while
   preserving the brand identity (navy #06152f, gold #c9a66b,
   Playfair Display + DM Sans). Desktop styles are untouched:
   everything here lives inside max-width media queries.
   ============================================================= */

/* ---- design tokens scoped to mobile ---- */
@media (max-width: 768px){
  :root{
    --m-pad: 22px;          /* standard page side gutter      */
    --m-gap: 28px;          /* default vertical rhythm unit    */
    --m-sec: 44px;          /* section block padding           */
    --m-radius: 16px;       /* card radius                     */
    --m-touch: 52px;        /* primary touch target height     */
    --m-navy: #06152f;
    --m-navy-2: #0a1f3f;
    --m-gold: #c9a66b;
    --m-off: #f6f4ef;
    --m-ink: #101722;
  }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{ overflow-x:hidden; }
  *{ -webkit-tap-highlight-color: rgba(201,166,107,.18); }
  /* kill any accidental horizontal scroll from full-bleed pieces */
  .page, section, .sec{ max-width:100%; }
  img{ max-width:100%; }

  /* Unified tap feel — the project cards and nav links already give a
     subtle press response; extend the SAME feedback to every primary
     button & arrow-link so the whole UI reacts to touch consistently. */
  .bn,.bw,.sm,.back,.moc-open,.fbtn,.nbtn,.mob-cta button{
    transition:transform .14s cubic-bezier(.22,.61,.36,1),
               background-color .26s ease, color .26s ease,
               border-color .26s ease, box-shadow .26s ease !important;
    will-change:transform;
  }
  .bn:active,.bw:active,.sm:active,.back:active,
  .moc-open:active,.fbtn:active,.mob-cta button:active{
    transform:scale(.98);
  }
}

/* =============================================================
   1 · NAVIGATION BAR
   ============================================================= */
@media (max-width: 768px){
  nav{
    height:62px!important;
    padding:0 18px!important;
    background:rgba(255,255,255,.94)!important;
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid rgba(7,23,51,.07)!important;
  }
  nav.scrolled{ box-shadow:0 6px 24px rgba(6,21,47,.10)!important; }
  /* The logo file is a 1024² square with the wordmark as a thin band in
     the middle, so scaling it small makes the wordmark tiny. Crop to the
     wordmark band with object-fit:cover so it reads as a proper logo. */
  nav > img,
  nav img[onclick]{
    height:30px!important;width:150px!important;max-width:150px!important;
    object-fit:cover!important;object-position:center 50%!important;
  }
  .nl,.nr{ display:none!important; }

  /* hamburger → clean white X on the navy overlay. The base bars are
     position:absolute and stay vertically offset, so re-centre both
     on the button midpoint and cross them. */
  .hbg.open span{ background:#fff!important;box-shadow:none!important; }
  .hbg.open span:nth-child(1),
  .hbg.open span:nth-child(3){
    top:50%!important;left:50%!important;right:auto!important;
    width:24px!important;height:2px!important;margin:-1px 0 0 -12px!important;
    transform-origin:center center!important;
  }
  .hbg.open span:nth-child(1){ transform:rotate(45deg)!important; }
  .hbg.open span:nth-child(2){ opacity:0!important; }
  .hbg.open span:nth-child(3){ transform:rotate(-45deg)!important; }
}

/* =============================================================
   2 · MOBILE MENU (full-screen overlay)
   ============================================================= */
@media (max-width: 768px){
  .mob-nav{
    padding:0 0 40px!important;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(201,166,107,.10), transparent 60%),
      linear-gradient(180deg,#071a39 0%, var(--m-navy) 55%, #04101f 100%)!important;
    z-index:260!important;
  }
  .mob-nav.open{ display:flex!important; }
  /* header row inside the overlay: the REAL logo (natively white → shows
     light on the navy overlay, matching the footer), cropped to its
     wordmark band, so it matches the brand instead of plain text */
  .mob-nav::before{
    content:"";
    position:sticky;top:0;
    height:64px;flex:0 0 auto;
    background:
      url('dandreet-logo.png') 22px center / 150px auto no-repeat,
      linear-gradient(180deg, rgba(6,21,47,.97) 45%, rgba(6,21,47,0) 100%);
    z-index:2;
  }
  /* scrollable link list */
  .mob-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* roomy menu list — extra top/bottom breathing space */
  .mob-nav{ overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:36px!important; }
  /* MAIN items — generous spacing, no busy per-row dividers */
  .mob-nav > a{
    font-family:'DM Sans',sans-serif!important;
    font-size:15px!important;letter-spacing:.16em!important;
    text-transform:uppercase!important;font-weight:500!important;
    color:rgba(255,255,255,.94)!important;
    padding:15px 26px!important;margin:0!important;
    border-bottom:none!important;
    display:flex!important;align-items:center;min-height:50px;
    transition:color .2s ease, padding-left .25s ease;
  }
  /* a little air between the logo header and the first item */
  .mob-nav > a:first-of-type{ margin-top:10px!important; }
  .mob-nav > a:active{ color:var(--m-gold)!important;padding-left:32px!important; }
  /* no chevrons — cleaner, less cluttered */
  .mob-nav > a::after{ display:none!important; }
  /* breathing room around the Projekty sub-group */
  .mob-nav > a:not(.mob-sub) + .mob-sub{ margin-top:6px!important; }
  .mob-nav .mob-sub + a:not(.mob-sub){ margin-top:14px!important; }
  /* SUB items — quiet, indented (the em-dash already marks hierarchy) */
  .mob-nav .mob-sub{
    font-size:11.5px!important;letter-spacing:.14em!important;
    font-weight:400!important;
    color:rgba(255,255,255,.5)!important;
    padding:7px 26px 7px 40px!important;min-height:34px;
    margin:0!important;
    border-bottom:none!important;border-left:none!important;
  }
  /* when the overlay is open, float the nav (and its white X) above it */
  .mob-nav.open + nav{
    z-index:280!important;background:transparent!important;
    border-bottom-color:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .mob-nav.open + nav > img,
  .mob-nav.open + nav img[onclick]{ visibility:hidden!important; } /* avoid navy logo on navy overlay */
  .mob-nav .mob-sub::after{ display:none!important; }
  .mob-nav .mob-sub:active{ color:var(--m-gold)!important; }

  .mob-lang{
    display:flex!important;gap:10px!important;align-items:center;
    margin:22px 22px 0!important;padding-top:20px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }
  .mob-lang a{
    font-size:12px!important;letter-spacing:.16em!important;
    color:rgba(255,255,255,.55)!important;
    padding:9px 16px!important;border:1px solid rgba(255,255,255,.16)!important;
    border-radius:40px;min-height:40px;display:flex;align-items:center;
  }
  .mob-lang a.on{
    color:var(--m-navy)!important;background:var(--m-gold)!important;
    border-color:var(--m-gold)!important;font-weight:600!important;
  }
  .mob-cta{ margin:20px 22px 0!important; }
  .mob-cta button{
    width:100%!important;min-height:var(--m-touch)!important;
    font-size:11.5px!important;letter-spacing:.2em!important;text-transform:uppercase;
    background:var(--m-gold)!important;color:var(--m-navy)!important;
    border:none!important;border-radius:12px;font-weight:600!important;
    box-shadow:0 16px 34px rgba(201,166,107,.24);
  }
}

/* =============================================================
   3 · HERO
   id-scoped (#p-home/#p-en-home) so it reliably beats the
   earlier "#p-home .hero ..." rules (specificity 1,2,0).
   ============================================================= */
@media (max-width: 768px){
  #p-home .hero,#p-en-home .hero{
    height:100svh!important;min-height:560px!important;
    padding:0 var(--m-pad) calc(env(safe-area-inset-bottom,0px) + 96px)!important;
    justify-content:flex-end!important;align-items:stretch!important;
  }
  #p-home .hero .ticker,#p-en-home .hero .ticker{ display:none!important; }

  /* The hero photos are wide landscape shots; on a full-screen portrait
     phone, default center-cover crops them awkwardly (e.g. just sky + a
     strip of foreground). Frame each slide on its building. Slides are the
     first six children of .hero, in a fixed order. (JS only sets
     background-image, never background-position, so these win cleanly.) */
  /* the `.page` qualifier lifts specificity to (1,4,0) so these win over the
     per-slide [data-gt-hero] / [style*="vila-birnbaum"] rules in site.css */
  #p-home.page .hero > .hs:nth-child(1),#p-en-home.page .hero > .hs:nth-child(1){ background-position:50% 58%!important; } /* Galerie Šantovka */
  #p-home.page .hero > .hs:nth-child(2),#p-en-home.page .hero > .hs:nth-child(2){ background-position:50% 33%!important; } /* Galerie Teplice */
  #p-home.page .hero > .hs:nth-child(3),#p-en-home.page .hero > .hs:nth-child(3){ background-position:50% 40%!important; } /* OC Novo Plaza */
  #p-home.page .hero > .hs:nth-child(4),#p-en-home.page .hero > .hs:nth-child(4){ background-position:50% 52%!important; } /* Šantovka Living */
  #p-home.page .hero > .hs:nth-child(5),#p-en-home.page .hero > .hs:nth-child(5){ background-position:50% 44%!important; } /* Rezidence Alejní */
  #p-home.page .hero > .hs:nth-child(6),#p-en-home.page .hero > .hs:nth-child(6){ background-position:50% 42%!important; } /* Vila Birnbaum */

  #p-home .hero .hc,#p-en-home .hero .hc{ width:100%; }
  #p-home .hero .he,#p-en-home .hero .he{
    font-size:9.5px!important;letter-spacing:.2em!important;
    margin-bottom:16px!important;color:rgba(255,255,255,.84)!important;
  }
  #p-home .hero .ht,#p-en-home .hero .ht{
    font-size:clamp(34px,9.6vw,48px)!important;
    line-height:1.06!important;letter-spacing:-.01em;
    margin-bottom:26px!important;max-width:13ch;
    text-shadow:0 10px 38px rgba(0,0,0,.42)!important;
  }
  /* the desktop <br> leaves a phantom empty line on a phone — let the
     headline wrap naturally into evenly-spaced lines instead */
  #p-home .hero .ht br,#p-en-home .hero .ht br{ display:none!important; }
  #p-home .hero .hsub,#p-en-home .hero .hsub{ font-size:14.5px!important;margin-bottom:26px!important; }
  #p-home .hero .hbtns,#p-en-home .hero .hbtns{
    flex-direction:column!important;gap:11px!important;width:100%;max-width:380px;
  }
  #p-home .hero .hbtns button,#p-en-home .hero .hbtns button{
    width:100%!important;min-height:var(--m-touch)!important;
    font-size:11px!important;letter-spacing:.18em!important;border-radius:4px!important;
    display:flex!important;align-items:center;justify-content:center;
  }
  /* primary = gold (navy text vanishes on the dark hero) */
  #p-home .hero .bn,#p-en-home .hero .bn{
    background:var(--m-gold)!important;color:var(--m-navy)!important;
    border:1px solid var(--m-gold)!important;font-weight:700!important;
    box-shadow:0 16px 36px rgba(201,166,107,.26);
  }
  /* secondary = glass outline */
  #p-home .hero .bw,#p-en-home .hero .bw{
    background:rgba(255,255,255,.07)!important;
    border:1px solid rgba(255,255,255,.48)!important;color:#fff!important;
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  }
  /* deepen overlay so headline always reads */
  #p-home .hero .ho,#p-en-home .hero .ho{
    background:linear-gradient(180deg,rgba(3,11,26,.14) 0%,rgba(3,11,26,.36) 40%,rgba(3,11,26,.90) 100%)!important;
  }
  /* bottom running keyword bar — slimmer, refined */
  .hero-bar-track{ gap:22px!important;padding:11px 0!important; }
  .hero-bar-track span{ font-size:10px!important;letter-spacing:.16em!important; }
  .hero-bar-track span::before{ margin-right:22px!important; }
}

/* =============================================================
   4 · SECTION RHYTHM + SHARED TYPOGRAPHY
   ============================================================= */
@media (max-width: 768px){
  .sec{ padding:var(--m-sec) var(--m-pad)!important; }
  /* tighten the doubled padding between stacked sections a touch */
  .sec.sw + .sec.so,.sec.so + .sec.sw{ }
  .sh{
    flex-direction:column;align-items:flex-start;
    gap:12px!important;margin-bottom:26px!important;
  }
  .sec.sw .sh,.sec.so .sh{ padding-bottom:18px!important; }
  .stit{ font-size:clamp(27px,7.4vw,36px)!important;line-height:1.12!important; }
  .eye{ font-size:10px!important;letter-spacing:.26em!important;margin-bottom:12px!important; }
  .alead{ font-size:18px!important;line-height:1.55!important;margin-bottom:16px!important; }
  .abody{ font-size:15px!important;line-height:1.75!important; }
  .sm{ font-size:11px!important;letter-spacing:.16em!important; }
  .gr.g2,.gr.g3,.gr.g4{ grid-template-columns:1fr!important;gap:30px!important; }

  /* About-intro image — premium portrait crop instead of letterbox */
  .aimg{
    aspect-ratio:4/5!important;width:100%!important;
    border-radius:var(--m-radius);overflow:hidden;
  }
  .aimg::after{ border-radius:var(--m-radius); }

  /* Pillars — stacked, clear dividers */
  .pillars{ grid-template-columns:1fr!important;gap:0!important;margin-top:28px!important; }
  .pill{
    padding:18px 0!important;border-top:1px solid rgba(6,21,47,.12)!important;
  }
  .pill:first-child{ border-top:none; }
  .pill::before{ margin-bottom:10px; }
  .pt{ font-size:11px!important; }
  .pd{ font-size:13px!important; }
}

/* =============================================================
   5 · HOME SHOWCASE — rebuilt for mobile as a VERTICAL GALLERY
   ------------------------------------------------------------
   A one-photo-at-a-time carousel with text laid over the image
   reads "cheap" on a phone and hides the photography. On mobile
   we drop the carousel entirely: hide the big slide, and turn the
   existing thumbnails into a clean stacked gallery where every
   project photo is shown in full with its caption BELOW it.
   ============================================================= */
@media (max-width: 768px){
  #p-home .showcase,#p-en-home .showcase{
    padding:8px 0 4px!important;background:var(--m-navy)!important;
  }
  /* hide the carousel stage + arrows entirely */
  #p-home .showcase .sc-main,#p-en-home .showcase .sc-main{ display:none!important; }
  #p-home .showcase .sc-arr,#p-en-home .showcase .sc-arr{ display:none!important; }

  /* thumbnails → full-width stacked photo cards */
  #p-home .showcase .sc-thumbs,#p-en-home .showcase .sc-thumbs{
    display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:max-content!important;
    align-items:start!important;gap:16px!important;
    overflow:visible!important;padding:0 var(--m-pad)!important;background:transparent!important;
    touch-action:auto!important;  /* was pan-x from the old filmstrip → blocked vertical page scroll */
  }
  #p-home .showcase .sc-thumbs .thumb,#p-en-home .showcase .sc-thumbs .thumb{ touch-action:auto!important; }
  /* .sc-thumbs scope raises specificity above the ≤430 width rule */
  #p-home .showcase .sc-thumbs .thumb,#p-en-home .showcase .sc-thumbs .thumb{
    flex:none!important;width:100%!important;min-width:100%!important;max-width:100%!important;
    aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important;
    align-self:start!important;
    display:block!important;position:relative!important;opacity:1!important;
    border-radius:var(--m-radius)!important;overflow:hidden!important;
    background:#0a1f3f!important;outline:none!important;
    box-shadow:0 18px 44px rgba(0,0,0,.30)!important;
  }
  #p-home .showcase .thumb.on,#p-en-home .showcase .thumb.on{ outline:none!important; }
  #p-home .showcase .thumb.on::after,#p-en-home .showcase .thumb.on::after{ display:none!important; }
  #p-home .showcase .sc-thumbs .thumb img,#p-en-home .showcase .sc-thumbs .thumb img{
    width:100%!important;height:auto!important;aspect-ratio:4/3!important;
    object-fit:cover!important;object-position:center 62%!important;display:block!important;
    filter:saturate(1.05) contrast(1.03)!important;
  }
  /* caption shown BELOW the photo — always fully legible */
  #p-home .showcase .sc-thumbs .thumb .tlab,#p-en-home .showcase .sc-thumbs .thumb .tlab{
    display:block!important;position:static!important;inset:auto!important;
    padding:15px 18px 17px!important;background:transparent!important;
  }
  #p-home .showcase .sc-thumbs .tn,#p-en-home .showcase .sc-thumbs .tn{
    font-family:'Playfair Display',serif!important;font-weight:400!important;
    font-size:20px!important;line-height:1.12!important;color:#fff!important;margin-bottom:5px!important;
  }
  #p-home .showcase .sc-thumbs .tc,#p-en-home .showcase .sc-thumbs .tc{
    font-size:11px!important;letter-spacing:.18em!important;text-transform:uppercase!important;
    color:var(--m-gold)!important;
  }
  /* clickable project cards — premium cues + tap feedback */
  #p-home .showcase .sc-thumbs .thumb,#p-en-home .showcase .sc-thumbs .thumb{
    cursor:pointer;border:1px solid rgba(255,255,255,.06)!important;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease!important;
  }
  #p-home .showcase .sc-thumbs .thumb img,#p-en-home .showcase .sc-thumbs .thumb img{
    transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .4s ease!important;
  }
  /* caption gets a gold "open project" arrow on the right */
  #p-home .showcase .sc-thumbs .thumb .tlab,#p-en-home .showcase .sc-thumbs .thumb .tlab{
    position:relative!important;padding-right:62px!important;
  }
  #p-home .showcase .sc-thumbs .thumb .tlab::after,#p-en-home .showcase .sc-thumbs .thumb .tlab::after{
    content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,166,107,.45);
    color:var(--m-gold);display:flex;align-items:center;justify-content:center;
    font-size:17px;line-height:1;transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s ease;
  }
  /* press / active feedback */
  #p-home .showcase .sc-thumbs .thumb:active,#p-en-home .showcase .sc-thumbs .thumb:active{
    transform:scale(.985);border-color:rgba(201,166,107,.4)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.34)!important;
  }
  #p-home .showcase .sc-thumbs .thumb:active img,#p-en-home .showcase .sc-thumbs .thumb:active img{
    transform:scale(1.05);filter:saturate(1.07) contrast(1.03)!important;
  }
  #p-home .showcase .sc-thumbs .thumb:active .tlab::after,#p-en-home .showcase .sc-thumbs .thumb:active .tlab::after{
    background:var(--m-gold);color:var(--m-navy);border-color:var(--m-gold);transform:translateY(-50%) translateX(2px);
  }
}

/* =============================================================
   5b · PORTFOLIO HEADER → GALLERY  (clean transition)
   The Portfolio header used a full-width divider line + ~52px of
   empty white above a hard navy edge → an awkward empty "box".
   Turn it into a clean, balanced colour-block transition.
   ============================================================= */
@media (max-width: 768px){
  #p-home .sec.sw:has(+ .showcase) .sh,
  #p-en-home .sec.sw:has(+ .showcase) .sh{
    border-bottom:none!important;margin-bottom:0!important;padding-bottom:0!important;
  }
  #p-home .sec.sw:has(+ .showcase),
  #p-en-home .sec.sw:has(+ .showcase){
    padding:var(--m-sec) var(--m-pad) 32px!important;
  }
  /* the "Všechny projekty/aktuality" link was stretched full-width by the
     flex column, so its underline looked like a divider — shrink to text */
  .sh .sm{ align-self:flex-start!important;width:auto!important;max-width:max-content!important; }
}
  .vt{ font-size:clamp(27px,7.4vw,36px)!important;line-height:1.12!important; }
  .ve{ font-size:10px!important;letter-spacing:.26em!important; }
  .vb{ font-size:15px!important;line-height:1.75!important; }
  .vlist li{ font-size:14.5px!important;line-height:1.6!important;padding:10px 0; }
  .vimg{ aspect-ratio:4/3!important;border-radius:var(--m-radius);overflow:hidden; }
  .gold-rule{ margin:0; }
}

/* =============================================================
   7 · NEWS CARDS
   ------------------------------------------------------------
   Aktuality page (.ng, plain) — simple uniform stacked cards.
   ============================================================= */
@media (max-width: 768px){
  .ng:not(.news-sync){ grid-template-columns:1fr!important;gap:22px!important; }
  .ng:not(.news-sync) .nc{
    background:#fff!important;border:1px solid rgba(6,21,47,.08)!important;
    border-radius:var(--m-radius)!important;overflow:hidden!important;
    padding:0 0 22px!important;box-shadow:0 18px 40px rgba(6,21,47,.07)!important;
  }
  .ng:not(.news-sync) .nw{ margin-bottom:18px!important; }
  .ng:not(.news-sync) .ni{ aspect-ratio:16/10!important;object-fit:cover;width:100%; }
  .ng:not(.news-sync) .nd,
  .ng:not(.news-sync) .ntit,
  .ng:not(.news-sync) .ne{ padding-left:22px!important;padding-right:22px!important; }
  .ng:not(.news-sync) .nd{ font-size:11px!important;letter-spacing:.18em!important;color:var(--m-gold)!important;margin-bottom:8px; }
  .ng:not(.news-sync) .ntit{ font-size:21px!important;line-height:1.16!important;margin-bottom:10px; }
  .ng:not(.news-sync) .ne{ font-size:14.5px!important;line-height:1.7!important; }
}

/* ------------------------------------------------------------
   Home news (.ng.news-sync) — the desktop "magazine" layout
   (navy featured + horizontal list cards) does not translate to
   a phone. Force ALL four cards into one identical vertical
   card, keeping the newest-first ordering. Selectors match the
   existing #p-home ... :nth-child()/:first-child specificity so
   they reliably win.
   ------------------------------------------------------------ */
@media (max-width: 768px){
  #p-home .ng.news-sync,#p-en-home .ng.news-sync{
    display:grid!important;grid-template-columns:1fr!important;gap:20px!important;margin-top:28px!important;
  }
  /* :not(.nz) is a harmless dummy that lifts specificity to (1,4,0)
     so a SINGLE rule overrides the first-child / nth-child variants */
  #p-home .ng.news-sync .nc:not(.nz),#p-en-home .ng.news-sync .nc:not(.nz){
    display:block!important;grid-template-columns:1fr!important;grid-row:auto!important;
    min-height:0!important;overflow:hidden!important;
    background:#fff!important;color:var(--m-ink)!important;
    border:1px solid rgba(6,21,47,.08)!important;border-radius:var(--m-radius)!important;
    box-shadow:0 18px 40px rgba(6,21,47,.07)!important;transform:none!important;padding:0 0 22px!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .nw,#p-en-home .ng.news-sync .nc:not(.nz) .nw{
    width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:16/10!important;margin:0 0 18px!important;background:#e9e6df!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .ni,#p-en-home .ng.news-sync .nc:not(.nz) .ni{
    width:100%!important;height:100%!important;min-height:0!important;aspect-ratio:16/10!important;object-fit:cover!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .nd,#p-en-home .ng.news-sync .nc:not(.nz) .nd{
    display:block!important;padding:2px 22px 0!important;color:var(--m-ink)!important;justify-content:flex-start!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .ny,#p-en-home .ng.news-sync .nc:not(.nz) .ny,
  #p-home .ng.news-sync .nc:not(.nz) .nd > div:first-child,#p-en-home .ng.news-sync .nc:not(.nz) .nd > div:first-child{
    margin:0 0 8px!important;font-size:11px!important;letter-spacing:.18em!important;color:var(--m-gold)!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .ntit,#p-en-home .ng.news-sync .nc:not(.nz) .ntit{
    margin:0 0 10px!important;padding:0!important;
    font-size:21px!important;line-height:1.16!important;color:var(--m-ink)!important;max-width:none!important;
  }
  #p-home .ng.news-sync .nc:not(.nz) .ne,#p-en-home .ng.news-sync .nc:not(.nz) .ne{
    margin:0!important;padding:0!important;font-size:14.5px!important;line-height:1.7!important;
    color:rgba(16,23,34,.68)!important;max-width:none!important;
  }
}

/* =============================================================
   8 · HOME CONTACT (navy card + form)
   ============================================================= */
@media (max-width: 768px){
  #home-contact{
    padding:56px var(--m-pad)!important;
    background:linear-gradient(180deg,#f8f6f1,#fbfaf7)!important;
  }
  #home-contact:before{ left:var(--m-pad)!important;right:var(--m-pad)!important;top:42px!important; }
  #home-contact > .fade:first-child{
    padding:38px 26px!important;border-radius:var(--m-radius)!important;
    box-shadow:0 24px 56px rgba(6,21,47,.16)!important;
  }
  /* hide the desktop corner accent — it floats awkwardly on a tall card */
  #home-contact > .fade:first-child:after{ display:none!important; }
  #home-contact > .fade:first-child .stit{ margin-bottom:22px!important; }
  #home-contact .ci{
    grid-template-columns:1fr!important;gap:6px!important;padding:16px 0!important;
  }
  #home-contact .cil{ font-size:10px!important; }
  #home-contact .civ,#home-contact .civ a{ font-size:14.5px!important; }
  #home-contact .company-data-small{ font-size:12.5px!important; }

  #home-contact > .fade.fd1{
    margin-left:0!important;margin-top:18px!important;
    padding:34px 24px!important;border-radius:var(--m-radius)!important;
    box-shadow:0 24px 56px rgba(6,21,47,.10)!important;
  }
  #home-contact > .fade.fd1 h3{ font-size:26px!important; }
  #home-contact .frow{ grid-template-columns:1fr!important;gap:0!important; }
  #home-contact .fg{ margin-bottom:18px; }
  #home-contact .fi{ min-height:48px;font-size:16px!important; }     /* 16px → no iOS zoom */
  #home-contact textarea.fi{ min-height:120px; }
  #home-contact .fbtn{
    width:100%!important;min-height:var(--m-touch)!important;
    font-size:11.5px!important;letter-spacing:.18em!important;border-radius:12px!important;
  }
}

/* =============================================================
   9 · GENERIC FORM / BUTTON TOUCH SIZING (all pages)
   ============================================================= */
@media (max-width: 768px){
  .fi{ font-size:16px!important; }            /* prevent iOS auto-zoom */
  .fbtn,.nbtn,.bn,.bw,.bnl,.sm,.contact-chip,.moc-open,.back{ min-height:44px; }
  .frow{ grid-template-columns:1fr!important; }
  .back{
    display:inline-flex;align-items:center;
    min-height:44px;font-size:11px!important;letter-spacing:.14em;
    margin-bottom:8px;
  }
}

/* =============================================================
   10 · FOOTER
   ============================================================= */
@media (max-width: 768px){
  .footer-full{ padding:48px var(--m-pad) 36px!important; }
  .footer-full-top{ flex-direction:column;gap:30px!important; }
  .footer-logo-block{ align-items:flex-start;text-align:left; }
  .footer-logo-block img{
    height:38px!important;width:170px!important;max-width:170px!important;
    object-fit:cover!important;object-position:center 50%!important;
  }
  .footer-copy{ font-size:12px; }
  .footer-cols{ display:grid!important;grid-template-columns:1fr 1fr!important;gap:26px 20px!important; }
  .footer-cols > div:last-child{ grid-column:1/-1; }
  .footer-col-title{ font-size:10px!important;letter-spacing:.18em; }
  .footer-col-val{ font-size:13.5px!important;line-height:1.7; }
  .footer-bottom{ flex-direction:column;gap:16px;align-items:flex-start;text-align:left; }
  .footer-links2{ flex-wrap:wrap;gap:14px 18px;justify-content:flex-start; }
  .footer-links2 a{ min-height:32px;display:inline-flex;align-items:center; }
}

/* =============================================================
   11 · PAGE HEADERS (Reference / Aktuality / inner)
   ============================================================= */
@media (max-width: 768px){
  .page-header{ padding:96px var(--m-pad) 6px!important; }
  .page-header h1{ font-size:clamp(30px,8.4vw,42px)!important;line-height:1.08!important; }
  .page-header p{ font-size:15px!important;line-height:1.7!important;margin-top:14px; }
  /* keep inner pages clear of the fixed 62px nav */
  .page > section:first-child[style*="padding-top:108px"],
  .page > .sec:first-child[style*="padding-top:108px"]{ padding-top:92px!important; }
}

/* =============================================================
   12 · REFERENCE CARDS — rebuilt: photo on top, text below
   ------------------------------------------------------------
   The desktop text-over-photo overlay looked cheap on a phone
   (text lost on busy images) and an aspect-ratio/min-height clash
   even squeezed the cards to ~240px wide. On mobile each reference
   is now a clean full-width card: full photo on top, caption on a
   solid card below — always legible, always full width.
   ============================================================= */
@media (max-width: 768px){
  #p-reference .ref-hero,#p-en-reference .ref-hero,
  #p-reference .ref-row2,#p-en-reference .ref-row2{
    display:grid!important;grid-template-columns:1fr!important;gap:18px!important;margin-bottom:18px!important;
  }
  #p-reference .ref-hero-card,#p-en-reference .ref-hero-card{
    display:flex!important;flex-direction:column!important;
    width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;
    background:#fff!important;border:1px solid rgba(6,21,47,.07)!important;
    border-radius:var(--m-radius)!important;overflow:hidden!important;
    box-shadow:0 18px 44px rgba(6,21,47,.10)!important;
  }
  #p-reference .ref-ph,#p-en-reference .ref-ph{
    position:relative!important;width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:16/10!important;object-fit:cover!important;display:block!important;flex:none!important;
  }
  /* overlay no longer needed — photo is unobstructed */
  #p-reference .ref-overlay,#p-en-reference .ref-overlay{ display:none!important; }
  #p-reference .ref-info,#p-en-reference .ref-info{
    position:static!important;padding:20px 20px 22px!important;text-shadow:none!important;
  }
  #p-reference .ref-num,#p-en-reference .ref-num{
    color:var(--m-gold)!important;font-size:11px!important;letter-spacing:.18em!important;margin-bottom:8px!important;
  }
  #p-reference .ref-title,#p-en-reference .ref-title{
    color:var(--m-ink)!important;font-size:22px!important;line-height:1.18!important;margin-bottom:9px!important;
  }
  #p-reference .ref-desc-static,#p-en-reference .ref-desc-static{
    color:rgba(16,23,34,.7)!important;font-size:14px!important;line-height:1.66!important;
  }
}

/* =============================================================
   13 · PROJECT DETAIL — hero, stats bar, highlights, gallery, map
   ============================================================= */
@media (max-width: 768px){
  /* hero */
  .pdh{ height:auto!important;aspect-ratio:3/4!important;min-height:0!important;max-height:78svh; }
  .pdh img{ width:100%;height:100%;object-fit:cover; }
  /* Villa Époque uses a letterboxed "full-frame" hero on desktop;
     on a phone fill the frame instead of leaving blurred bands */
  #p-epoque .pdh > img,#p-en-epoque .pdh > img{
    object-fit:cover!important;object-position:center 42%!important;
  }
  #p-epoque .pdh::before,#p-en-epoque .pdh::before{ display:none!important; }
  /* Galerie Teplice: on phones the hero swaps (via <picture>) to the
     entrance-focused shot — frame it on the gold "galerie TEPLICE" sign
     and the glass entrance/doors below it. */
  #p-teplice .pdh img,#p-en-teplice .pdh img{ object-position:50% 60%!important; }
  /* Rezidence Alejní shipped with a "contain + blurred fill" hero that
     letterboxes the wide render and shows ugly blurred grey bands on a
     phone (the building all but disappears). Fill the portrait frame with
     the actual photo instead — matching every other project hero — and
     kill the blurred ::before so the render reads sharp and full-bleed. */
  #p-alejni .pdh::before,#p-en-alejni .pdh::before{ display:none!important;content:none!important; }
  #p-alejni .pdh,#p-en-alejni .pdh{ background:var(--m-navy)!important; }
  #p-alejni .pdh > img,#p-en-alejni .pdh > img{
    position:absolute!important;inset:0!important;z-index:0!important;
    width:100%!important;height:100%!important;
    object-fit:cover!important;object-position:38% 42%!important;
    filter:brightness(1.02) contrast(1.04) saturate(1.05)!important;
  }
  .pdh-ov{
    background:linear-gradient(180deg,
      rgba(4,11,22,.10) 0%,
      rgba(4,11,22,.16) 40%,
      rgba(4,11,22,.60) 74%,
      rgba(4,11,22,.92) 100%)!important;
  }
  .pdh-lab{ left:var(--m-pad)!important;right:var(--m-pad)!important;bottom:30px!important; }
  .pdh-tag{
    font-size:10px!important;letter-spacing:.2em!important;color:var(--m-gold)!important;
    text-shadow:0 2px 12px rgba(0,0,0,.5);margin-bottom:10px!important;
  }
  .pdh-name{
    font-size:clamp(30px,8.4vw,42px)!important;line-height:1.06!important;
    text-shadow:0 4px 22px rgba(0,0,0,.5);
  }
  .pdh-addr{ font-size:13.5px!important;color:rgba(255,255,255,.85)!important;text-shadow:0 2px 14px rgba(0,0,0,.5);margin-top:8px; }

  /* stats bar — 2-up, last full width, refined */
  .psb{ grid-template-columns:1fr 1fr!important; }
  .psb .stat{ padding:24px 18px!important;border-color:rgba(255,255,255,.08)!important; }
  .psb .stn{ font-size:clamp(22px,5.6vw,30px)!important; }
  .psb .stl{ font-size:9.5px!important;letter-spacing:.14em!important;line-height:1.35!important; }

  /* highlights cards */
  .feat-grid{ grid-template-columns:1fr!important;gap:12px!important; }
  .fc{ border-radius:14px!important;padding:22px 20px!important; }
  .fc-t{ font-size:17px!important;margin-bottom:8px; }
  .fc-d{ font-size:13.5px!important;line-height:1.66!important; }

  /* gallery — single, generous, rounded */
  .gal{ grid-template-columns:1fr!important;gap:12px!important; }
  .gal img{ border-radius:14px;width:100%;aspect-ratio:4/3;object-fit:cover; }

  /* The Google "output=embed" map renders blank on many phones, leaving
     a big empty void above the card. On mobile we drop the iframe and
     show a clean, self-contained location card with a prominent
     "open in Maps" button (taps straight into the native Maps app). */
  .map-wrap2{
    display:block!important;position:relative;margin:0!important;
    height:auto!important;min-height:0!important;
    padding:6px var(--m-pad) 30px!important;background:var(--m-off)!important;
  }
  .map-embed,.map-wrap2 iframe{ display:none!important; }
  .map-overlay-card{
    position:static!important;inset:auto!important;margin:0!important;width:auto!important;max-width:none!important;
    border-radius:var(--m-radius)!important;padding:30px 24px!important;z-index:1;
    box-shadow:0 20px 48px rgba(6,21,47,.16)!important;
  }
  .moc-eye{ font-size:10px!important;letter-spacing:.2em!important;margin-bottom:12px!important; }
  .moc-title{ font-size:24px!important;margin-bottom:18px!important; }
  .moc-row{ margin-bottom:6px!important; }
  .moc-open{
    display:inline-flex!important;align-items:center;gap:8px;
    margin-top:22px!important;min-height:50px;padding:14px 22px!important;
    background:var(--m-gold)!important;color:var(--m-navy)!important;border-radius:11px!important;
    font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase;font-weight:700!important;
    text-decoration:none!important;border:none!important;
  }
}

/* =============================================================
   14 · ABOUT (O nás) — timeline year alignment + team cards
   ============================================================= */
@media (max-width: 768px){
  /* timeline year was centered while body text was left — make the
     whole row read left-aligned (high specificity to beat the many
     conflicting #p-onas timeline rules) */
  #p-onas .timeline-rail .tr-year,#p-en-onas .timeline-rail .tr-year{
    display:block!important;text-align:left!important;justify-content:flex-start!important;
    justify-self:start!important;width:100%!important;
    font-style:italic!important;color:var(--m-gold)!important;
    font-size:26px!important;margin:0 0 8px!important;padding-left:0!important;text-indent:0!important;
  }
  #p-onas .timeline-rail .tr-label,#p-en-onas .timeline-rail .tr-label,
  #p-onas .timeline-rail .tr-desc,#p-en-onas .timeline-rail .tr-desc{
    text-align:left!important;
  }
  .te-year,.tr-year{ text-align:left!important;justify-content:flex-start!important; }
  .te-label,.te-desc,.tr-label,.tr-desc{ text-align:left!important; }

  /* team grid → single column premium cards (selectors are generic;
     scoped loosely so they apply across team layouts) */
  .team-grid,.tg2,.tm-grid{ grid-template-columns:1fr!important;gap:24px!important; }
}

/* =============================================================
   15 · PROJEKTY LISTING — polish (already strong, light touch)
   ============================================================= */
@media (max-width: 768px){
  .prow-32,.prow-23{ grid-template-columns:1fr!important; }
  .prow-img{ height:auto!important;aspect-ratio:4/3!important;min-height:0!important; }
  .prow-txt{ padding:30px var(--m-pad)!important; }
  .prow-name{ font-size:clamp(28px,7.6vw,38px)!important;line-height:1.08!important; }
  .prow-body{ font-size:15px!important;line-height:1.75!important; }
}

/* =============================================================
   16 · SMALL-PHONE REFINEMENTS  (≤ 430px)
   ============================================================= */
@media (max-width: 430px){
  :root{ --m-pad:18px; --m-sec:52px; }
  .ht{ font-size:clamp(30px,9.4vw,40px)!important; }
  .stit,.vt,.sc-title{ font-size:clamp(25px,7.8vw,32px)!important; }
  .pdh-name,.page-header h1,.ref-title{ }
  .footer-cols{ grid-template-columns:1fr!important; }
  .psb .stn{ font-size:21px!important; }
}

/* =============================================================
   17 · VERY SMALL (≤ 360px)
   ============================================================= */
@media (max-width: 360px){
  .ht{ font-size:30px!important; }
  .sc-title{ font-size:25px!important; }
  .psb{ grid-template-columns:1fr!important; }
}