/* Cala Prodani — only the rules that cannot be expressed as inline styles:
   media queries, descendant/pseudo states, keyframes. All base styling is inline. */

/* ---------- responsive helpers ---------- */
@media (max-width: 1180px) {
  [data-desknav] { display: none !important; }
  [data-burger] { display: flex !important; }
}
@media (max-width: 1000px) {
  [data-2col] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-navsplit] { grid-template-columns: 1fr !important; }
  [data-navaside] { display: none !important; }
  [data-3col] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-foot] { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
  [data-swap] { order: -1 !important; }
}
@media (max-width: 760px) {
  [data-rail] { display: none !important; }
  [data-gal] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-gal] > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  [data-3col] { grid-template-columns: 1fr !important; }
  [data-foot] { grid-template-columns: 1fr !important; }
  [data-hide-xs] { display: none !important; }
  [data-logo-text] { display: none !important; }
  [data-stack] { flex-direction: column !important; align-items: flex-start !important; }
  [data-tallband] { height: 62vh !important; }
}
@media (max-width: 520px) {
  [data-gal] { grid-template-columns: 1fr !important; }
}
@media (max-height: 800px) {
  [data-hero-logo] { width: clamp(70px, 8vw, 108px) !important; margin-bottom: 14px !important; }
}
@media (max-height: 660px) {
  [data-hero-logo] { display: none !important; }
}
/* Jacques François is wider than the old serif: keep hero copy clear of the scroll cue */
@media (max-height: 780px) {
  [data-screen-label^="Hero"] h1 { font-size: clamp(36px, 4.4vw, 60px) !important; }
}
@media (max-height: 620px) {
  [data-screen-label^="Hero"] h1 { font-size: clamp(38px, 4.6vw, 44px) !important; }
  [data-screen-label^="Hero"] h1 + p { display: none !important; }
}

/* ---------- mobile / tablet (iOS + Android) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { -webkit-user-drag: none; }
#cp-nav, #cp-lightbox { -webkit-backdrop-filter: blur(8px); }
[data-rail] [data-social] { -webkit-backdrop-filter: blur(6px); }

/* dynamic viewport: full-bleed heroes without the iOS toolbar jump */
@supports (height: 100svh) {
  @media (max-width: 1024px) {
    [data-screen-label^="Hero"] { height: 100svh !important; min-height: 480px !important; }
    [data-screen-label="Hero Contatti"] { height: 72svh !important; }
  }
}

/* tablet */
@media (min-width: 761px) and (max-width: 1024px) {
  [data-gal] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-gal] > * { grid-column: span 1 !important; grid-row: span 1 !important; }
  [data-tallband] { height: 68vh !important; }
}

/* phones */
@media (max-width: 760px) {
  [data-wa] { padding: 18px 11px !important; }
  [data-btn], [data-btn-light] { min-height: 48px !important; padding-top: 15px !important; padding-bottom: 15px !important; }
  [data-stack] > [data-btn], [data-stack] > [data-btn-light] { width: 100% !important; justify-content: space-between !important; }
  [data-navitem-link] { padding: 6px 0 !important; }
  [data-foot] > * { min-width: 0 !important; }
  form { grid-template-columns: 1fr !important; }
  form label[style*="span 2"], form > div { grid-column: span 1 !important; }
  form input, form select, form textarea { font-size: 16px !important; }
  [data-card] { padding: 30px 24px !important; }
}

/* notch / home-indicator safe areas */
@supports (padding: max(0px)) {
  #site-header { padding-left: max(clamp(18px, 4vw, 60px), env(safe-area-inset-left)) !important; padding-right: max(clamp(18px, 4vw, 60px), env(safe-area-inset-right)) !important; }
  [data-wa] { margin-right: env(safe-area-inset-right); }
  footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* pointer devices only: no sticky hover states on touch */
@media (hover: none) {
  [data-tile] [data-tilecap] { opacity: 1 !important; transform: none !important; }
  [data-card]:hover { transform: none !important; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- interaction states that need descendant selectors ---------- */
[data-navlink]:hover em { transform: scaleX(1) !important; }
[data-tile]:hover img { transform: scale(1.055) !important; }
[data-tile]:hover [data-tilecap] { opacity: 1 !important; transform: none !important; }
[data-card]:hover { border-color: rgba(129, 129, 129, 0.55) !important; transform: translateY(-7px) !important; }
[data-card]:hover [data-arrow] { transform: translateX(7px) !important; }
[data-btn]:hover { background: #818181 !important; color: #fff !important; border-color: #818181 !important; }
[data-btn]:hover span { transform: translateX(5px) !important; }
[data-btn-light]:hover { background: #fff !important; color: #2b2b2b !important; border-color: #fff !important; }
[data-btn-light]:hover span { transform: translateX(5px) !important; }
[data-navitem-link]:hover { color: #1f1f1f !important; }
[data-navitem-link]:hover i { width: 46px !important; opacity: 1 !important; }
[data-social]:hover { background: #818181 !important; color: #fff !important; border-color: #818181 !important; }
[data-wa]:hover { background: #2b2b2b !important; border-color: #2b2b2b !important; }
[data-footlink]:hover { color: #2b2b2b !important; padding-left: 8px !important; }
[data-rev]:hover { border-color: rgba(129, 129, 129, 0.5) !important; }

/* ---------- keyframes ---------- */
@keyframes cpPulse { 0% { transform: scale(1); opacity: .5 } 70% { transform: scale(2.1); opacity: 0 } 100% { opacity: 0 } }
@keyframes cpScrollCue { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }
@keyframes cpMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes cpFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }