/* =========================================================
   ParisVices — Event detail (DXPR compatible)
   Scope: .pv-event  (n’affecte pas les listes)
   ========================================================= */

/* ---- Tokens / base ---- */
:root{
  --pv-dark:#0b0f1a;
  --pv-text:#e7ecf6;
  --pv-border:rgba(255,255,255,.28);
  --pv-glass:rgba(255,255,255,.10);
}
.pv-event{ color:var(--pv-text); }

/* =========================================================
   HERO (image entière)
   - image affichée en entier (object-fit: contain)
   - overlay léger
   - cartouche + fil d’Ariane en overlay desktop
   ========================================================= */
.pv-event .pv-hero-panorama{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  line-height:0; /* supprime l’espace baseline des images */
}
.pv-event .pv-hero-contain .pv-hero-imgwrap{ position:relative; }

/* Image du hero : neutralise DXPR et force le rendu souhaité */
.pv-event .pv-hero-imgwrap img,
.pv-event .pv-hero-contain img.img-fluid,
.pv-event .pv-hero-contain img.image-style-wide{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  float:none !important;
  object-fit:contain !important;   /* mettre 'cover' si tu préfères recadrer */
  object-position:center !important;
  border:0 !important;
}

/* Certains wrappers DXPR imposent des largeurs/marges */
.pv-event .pv-hero-contain .field--name-field-image,
.pv-event .pv-hero-contain .field__item,
.pv-event .pv-hero-contain figure{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:block;
}

.pv-event .pv-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.34));
  pointer-events:none;
}
.pv-event .pv-hero-sentinel{ position:relative; width:100%; height:1px; }

/* =========================================================
   BREADCRUMB (overlay desktop / au-dessus en mobile)
   ========================================================= */
.pv-event .pv-crumbs{
  position:absolute;
  left:clamp(12px,2vw,20px);
  top:clamp(10px,2vw,16px);
  z-index:3;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px) saturate(120%);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  border-radius:14px;
  padding:4px 10px;
  font-size:.92rem;
  line-height:1.2;
}
.pv-event .pv-crumbs a{ color:#fff; text-decoration:none; }
.pv-event .pv-crumbs a:hover{ text-decoration:underline; }
/* coupe le margin-bottom bootstrap */
.pv-event .pv-crumbs nav.breadcrumb,
.pv-event .pv-crumbs .breadcrumb{ margin-bottom:0 !important; padding-bottom:0 !important; }

/* =========================================================
   CARTOUCHE (titre + date) compact
   ========================================================= */
.pv-event .pv-hero-card{
  position:absolute;
  right:clamp(12px,3vw,24px);
  top:clamp(12px,2.4vw,20px);
  width:min(420px,38%);
  z-index:2;
  background:var(--pv-glass);
  border:1px solid var(--pv-border);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border-radius:16px;
  padding:12px 14px;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.pv-event .pv-title{
  margin:0;
  font-weight:900;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.05;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
/* Date collée sous le titre (aplatis les wrappers Drupal) */
.pv-event .pv-facts{ list-style:none; padding:0; margin:8px 0 0; }
.pv-event .pv-facts li{ margin:4px 0; }
.pv-event .pv-facts .pv-date{ display:block; white-space:nowrap; }
.pv-event .pv-facts .field,
.pv-event .pv-facts .field__items,
.pv-event .pv-facts .field__item,
.pv-event .pv-facts .field--type-timestamp{ display:inline; margin:0; padding:0; }
.pv-event .pv-facts .datetime{ white-space:nowrap; }

/* =========================================================
   CHEVRON (scroll vers descriptif)
   - masqué en mobile
   - visible uniquement dans la zone hero
   ========================================================= */
.pv-event .pv-hero-chevron{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:999px;
  color:#0b0f1a;
  text-decoration:none;
  background:linear-gradient(45deg,#ff48c4,#2bd1fc);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:opacity .2s ease, transform .2s ease;
  opacity:0; pointer-events:none;
}
.pv-event .pv-hero-chevron.is-visible{ opacity:1; pointer-events:auto; }
.pv-event .pv-hero-chevron:hover{ transform:translateX(-50%) translateY(2px); }

/* =========================================================
   ARTICLE + clamp
   ========================================================= */
.pv-event .pv-article-wrap{
  border-radius:16px;
  border:1px solid var(--pv-border);
  background:var(--pv-glass);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  margin-bottom:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.pv-event .pv-article{ padding:18px; line-height:1.7; color:var(--pv-text); }
.pv-event .pv-article img{ max-width:100%; border-radius:12px; }
.pv-event .pv-clamp{
  max-height:18rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 85%, rgba(0,0,0,0));
          mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 85%, rgba(0,0,0,0));
  transition:max-height .35s ease;
}
.pv-event .pv-clamp.is-open{ max-height:200rem; -webkit-mask-image:none; mask-image:none; }
.pv-event .pv-article-cta{ padding:0 18px 16px; }

/* =========================================================
   GALERIE (field_photo)
   ========================================================= */
.pv-event .pv-card.glass{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin:18px 0;
  background:var(--pv-glass);
  border:1px solid var(--pv-border);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.pv-event .pv-card-header{ padding:14px 16px 0 16px; }
.pv-event .pv-card-header h2{ margin:0; font-weight:900; color:#fff; }
.pv-event .pv-gallery-grid{ padding:12px 16px 16px; }
.pv-event .pv-gallery-grid .field__items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.pv-event .pv-gallery-grid .field__item{ display:block; }
.pv-event .pv-gallery-grid img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  display:block;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* =========================================================
   Extras
   ========================================================= */
html{ scroll-behavior:smooth; }
/* Masque le H1 DXPR dans la barre de titre quand on est sur la page event */
.pv-event .page-title-container .page-title{ display:none !important; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 767.98px){
  /* Fil d’Ariane au-dessus (pas overlay) */
  .pv-event .pv-crumbs{
    position:static;
    margin:12px 4px 8px;
    padding:6px 12px;
  }
  /* Cartouche sous le breadcrumb, pleine largeur */
  .pv-event .pv-hero-card{
    position:static;
    width:auto;
    margin:0 4px 10px;
  }
  /* Chevron masqué en mobile */
  .pv-event .pv-hero-chevron{ display:none !important; }
  /* Ajustement baseline */
  .pv-event .pv-hero-panorama{ margin-bottom:16px; }
}