/* =========================================================
   GALLERIA — Chiave del Mare
   ========================================================= */
body.page-galleria { overflow-x:hidden; }
.cdm-gallery-page { background:#f7fbfb; color:#102033; }
.cdm-gallery-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; }

.cdm-gallery-hero { position:relative; min-height:70svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.cdm-gallery-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; z-index:-3; }
.cdm-gallery-hero-video { display:block; background:#062c38; }
.cdm-gallery-hero-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(4,32,43,.18) 0%,rgba(4,32,43,.32) 45%,rgba(4,32,43,.82) 100%); }
.cdm-gallery-hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:100px; background:linear-gradient(to bottom,transparent,#f7fbfb); z-index:-1; }
.cdm-gallery-hero-copy { padding:180px 0 115px; color:#fff; }
.cdm-gallery-hero-copy .cdm-eyebrow { margin:0 0 18px; color:#bceff4; }
.cdm-gallery-hero h1 { margin:0 0 22px; color:#fff; font-size:clamp(58px,7vw,102px); line-height:.96; letter-spacing:-3px; text-shadow:0 5px 28px rgba(0,0,0,.2); }
.cdm-gallery-hero-copy > p:last-child { max-width:720px; margin:0; color:rgba(255,255,255,.94); font-size:19px; line-height:1.75; }

.cdm-gallery-content { padding:90px 0 140px; }
.cdm-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:start; }
.cdm-gallery-card { margin:0; }
.cdm-gallery-card:nth-child(3n+2) { transform:translateY(34px); }
.cdm-gallery-card-button { width:100%; padding:0; border:0; border-radius:28px; overflow:hidden; background:#fff; color:inherit; text-align:left; cursor:pointer; box-shadow:0 18px 50px rgba(12,65,76,.09); transition:transform .35s ease,box-shadow .35s ease; }
.cdm-gallery-card-button:hover,.cdm-gallery-card-button:focus-visible { transform:translateY(-7px); box-shadow:0 26px 68px rgba(12,65,76,.15); }
.cdm-gallery-card-button:focus-visible { outline:3px solid rgba(28,188,216,.52); outline-offset:4px; }
.cdm-gallery-card-media { position:relative; display:block; height:300px; overflow:hidden; background:#d9eaed; }
.cdm-gallery-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.65,.25,1); }
.cdm-gallery-card-button:hover .cdm-gallery-card-media img { transform:scale(1.055); }
.cdm-gallery-card-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,27,38,.06),rgba(1,27,38,.42)); }
.cdm-gallery-card-number { position:absolute; left:22px; top:20px; display:grid; place-items:center; min-width:44px; height:34px; padding:0 11px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(2,37,49,.28); backdrop-filter:blur(9px); color:#fff; font:600 12px/1 Poppins,sans-serif; letter-spacing:1.4px; }
.cdm-gallery-card-open { position:absolute; right:20px; bottom:20px; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.94); color:#0b5364; font:300 30px/1 Arial,sans-serif; box-shadow:0 9px 24px rgba(0,0,0,.15); transition:transform .3s ease; }
.cdm-gallery-card-button:hover .cdm-gallery-card-open { transform:rotate(90deg); }
.cdm-gallery-card-copy { display:block; padding:26px 26px 30px; }
.cdm-gallery-card-title { display:block; margin-bottom:10px; font:700 22px/1.2 Poppins,sans-serif; color:#102033; }
.cdm-gallery-card-description { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:#62777f; font-size:15px; line-height:1.7; }

/* Lightbox */
.cdm-gallery-lightbox[hidden] { display:none !important; }
.cdm-gallery-lightbox { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:32px; }
.cdm-gallery-lightbox-backdrop { position:absolute; inset:0; background:rgba(1,18,26,.87); backdrop-filter:blur(10px); }
.cdm-gallery-lightbox-dialog { position:relative; z-index:2; width:min(1040px,100%); max-height:calc(100svh - 64px); display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); overflow:hidden; border-radius:30px; background:#fff; box-shadow:0 34px 100px rgba(0,0,0,.35); }
.cdm-gallery-lightbox-media { min-height:560px; background:#052b37; }
.cdm-gallery-lightbox-media img { width:100%; height:100%; min-height:560px; object-fit:cover; display:block; }
.cdm-gallery-lightbox-copy { align-self:center; padding:52px 44px; }
.cdm-gallery-lightbox-index { margin:0 0 16px; color:#1cbcd8; font:700 12px/1.3 Poppins,sans-serif; letter-spacing:2px; text-transform:uppercase; }
.cdm-gallery-lightbox-copy h2 { margin:0 0 20px; color:#102033; font-size:clamp(30px,3vw,43px); line-height:1.08; }
.cdm-gallery-lightbox-copy > p:last-child { margin:0; color:#5c737b; font-size:16px; line-height:1.8; }
.cdm-gallery-lightbox-close { position:absolute; right:18px; top:18px; z-index:5; width:46px; height:46px; border:0; border-radius:50%; background:rgba(5,43,55,.9); color:#fff; font:300 31px/1 Arial,sans-serif; cursor:pointer; }
.cdm-gallery-lightbox-nav { position:absolute; top:50%; z-index:5; width:48px; height:58px; transform:translateY(-50%); border:0; background:rgba(3,37,49,.72); color:#fff; font:300 39px/1 Arial,sans-serif; cursor:pointer; backdrop-filter:blur(8px); }
.cdm-gallery-lightbox-prev { left:0; border-radius:0 18px 18px 0; }
.cdm-gallery-lightbox-next { right:0; border-radius:18px 0 0 18px; }
html.cdm-gallery-modal-open,body.cdm-gallery-modal-open { overflow:hidden; }

@media (max-width:1024px) {
  .cdm-gallery-shell { width:min(92%,900px); }
  .cdm-gallery-hero { min-height:64svh; }
  .cdm-gallery-content { padding:75px 0 120px; }
  .cdm-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .cdm-gallery-card:nth-child(3n+2) { transform:none; }
  .cdm-gallery-card:nth-child(even) { transform:translateY(28px); }
  .cdm-gallery-card-media { height:320px; }
  .cdm-gallery-lightbox-dialog { grid-template-columns:1.15fr .85fr; }
  .cdm-gallery-lightbox-media,.cdm-gallery-lightbox-media img { min-height:500px; }
  .cdm-gallery-lightbox-copy { padding:44px 34px; }
}

@media (max-width:782px) {
  .cdm-gallery-shell { width:calc(100% - 40px); }
  .cdm-gallery-hero { min-height:620px; }
  .cdm-gallery-hero-copy { padding:145px 0 92px; }
  .cdm-gallery-hero h1 { font-size:clamp(54px,12vw,82px); }
  .cdm-gallery-hero-copy > p:last-child { font-size:17px; }
  .cdm-gallery-content { padding:65px 0 100px; }
  .cdm-gallery-grid { gap:20px; }
  .cdm-gallery-card-media { height:275px; }
  .cdm-gallery-card-copy { padding:23px 22px 26px; }
  .cdm-gallery-card-title { font-size:20px; }
  .cdm-gallery-lightbox { padding:20px; }
  .cdm-gallery-lightbox-dialog { display:block; max-height:calc(100svh - 40px); overflow:auto; }
  .cdm-gallery-lightbox-media,.cdm-gallery-lightbox-media img { min-height:0; height:min(54svh,520px); }
  .cdm-gallery-lightbox-copy { padding:34px 30px 40px; }
  .cdm-gallery-lightbox-nav { top:27svh; }
}

@media (max-width:520px) {
  .cdm-gallery-shell { width:calc(100% - 32px); }
  .cdm-gallery-hero { min-height:560px; }
  .cdm-gallery-hero-bg { object-position:56% center; }
  .cdm-gallery-hero-video { object-position:center center; }
  .cdm-gallery-hero-copy { padding:138px 0 78px; }
  .cdm-gallery-hero h1 { font-size:clamp(48px,15vw,67px); letter-spacing:-2px; }
  .cdm-gallery-hero-copy > p:last-child { font-size:16px; line-height:1.7; }
  .cdm-gallery-content { padding:52px 0 82px; }
  .cdm-gallery-grid { grid-template-columns:1fr; gap:22px; }
  .cdm-gallery-card:nth-child(even) { transform:none; }
  .cdm-gallery-card-button { border-radius:23px; }
  .cdm-gallery-card-media { height:300px; }
  .cdm-gallery-card-description { -webkit-line-clamp:2; }
  .cdm-gallery-lightbox { padding:12px; }
  .cdm-gallery-lightbox-dialog { max-height:calc(100svh - 24px); border-radius:24px; }
  .cdm-gallery-lightbox-media,.cdm-gallery-lightbox-media img { height:47svh; }
  .cdm-gallery-lightbox-copy { padding:28px 22px 34px; }
  .cdm-gallery-lightbox-copy h2 { font-size:30px; }
  .cdm-gallery-lightbox-copy > p:last-child { font-size:15px; line-height:1.72; }
  .cdm-gallery-lightbox-close { right:12px; top:12px; width:42px; height:42px; }
  .cdm-gallery-lightbox-nav { top:23.5svh; width:42px; height:52px; }
}

@media (prefers-reduced-motion:reduce) {
  .cdm-gallery-card-button,.cdm-gallery-card-media img,.cdm-gallery-card-open { transition:none; }
}

/* === Galleria video: preview leggere + video completo solo all'apertura === */
.cdm-gallery-card-media .cdm-gallery-card-preview {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.65,.25,1);
}
.cdm-gallery-card-button:hover .cdm-gallery-card-preview { transform:scale(1.055); }
.cdm-gallery-card-play {
  position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.90); color:#0b5364; font:700 20px/1 Arial,sans-serif;
  padding-left:4px; box-shadow:0 10px 30px rgba(0,0,0,.22); pointer-events:none;
  transition:transform .25s ease, background .25s ease;
}
.cdm-gallery-card-button:hover .cdm-gallery-card-play { transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.cdm-gallery-lightbox-media { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cdm-gallery-lightbox-media video {
  width:100%; height:100%; min-height:560px; object-fit:contain; display:block; background:#052b37;
}
.cdm-gallery-lightbox-media [hidden] { display:none !important; }
@media (max-width:1024px) {
  .cdm-gallery-lightbox-media video { min-height:500px; }
}
@media (max-width:782px) {
  .cdm-gallery-lightbox-media video { min-height:0; height:min(54svh,520px); }
}
@media (max-width:520px) {
  .cdm-gallery-card-play { width:52px; height:52px; font-size:18px; }
  .cdm-gallery-lightbox-media video { height:47svh; }
}
@media (prefers-reduced-motion:reduce) {
  .cdm-gallery-card-preview { transition:none; }
  .cdm-gallery-card-preview { display:none; }
}

/* === FIX 2026-09-18: struttura card stabile con media di rapporti diversi ===
   Video e immagini restano sempre confinati nell'area media e non possono
   spostare il testo fuori dalla card. */
.cdm-gallery-card,
.cdm-gallery-card-button {
  min-width:0;
}
.cdm-gallery-card-button {
  display:block;
  position:relative;
  box-sizing:border-box;
}
.cdm-gallery-card-media {
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  isolation:isolate;
}
.cdm-gallery-card-media > img,
.cdm-gallery-card-media > video.cdm-gallery-card-preview {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.cdm-gallery-card-shade {
  z-index:1;
  pointer-events:none;
}
.cdm-gallery-card-number,
.cdm-gallery-card-open {
  z-index:4;
}
.cdm-gallery-card-copy {
  position:relative;
  z-index:5;
  width:100%;
  box-sizing:border-box;
  background:#fff;
  overflow:hidden;
}
.cdm-gallery-card-title,
.cdm-gallery-card-description {
  max-width:100%;
  overflow-wrap:break-word;
}

/* === FIX LIGHTBOX VIDEO VERTICALI 2026-09-18 ===
   I video portrait non devono determinare l'altezza della griglia del modal. */
@media (min-width:783px) {
  .cdm-gallery-lightbox-dialog {
    height:min(720px, calc(100svh - 64px));
    max-height:calc(100svh - 64px);
    grid-template-rows:minmax(0,1fr);
  }
  .cdm-gallery-lightbox-media {
    min-width:0;
    min-height:0;
    height:100%;
    align-self:stretch;
  }
  .cdm-gallery-lightbox-media img,
  .cdm-gallery-lightbox-media video {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .cdm-gallery-lightbox-copy {
    min-width:0;
    max-height:100%;
    overflow:auto;
    align-self:center;
  }
}

@media (max-width:782px) {
  .cdm-gallery-lightbox-dialog { height:auto; }
  .cdm-gallery-lightbox-media { width:100%; min-height:0; }
  .cdm-gallery-lightbox-media img,
  .cdm-gallery-lightbox-media video {
    width:100%;
    height:min(54svh,520px);
    min-height:0;
    max-height:min(54svh,520px);
    object-fit:contain;
  }
}

@media (max-width:520px) {
  .cdm-gallery-lightbox-media img,
  .cdm-gallery-lightbox-media video {
    height:47svh;
    max-height:47svh;
  }
}