/* croaziere-header 1.2.0 – Ponant-style photo header for single cruise offers.
   Everything is scoped to .cz-ph / .cz-ph-on, which header.js adds, so without JS the theme header stays as it is. */
.hero.cz-ph{height:auto!important;min-height:100vh;min-height:100svh;background-size:cover!important;background-position:center 40%!important;background-repeat:no-repeat!important;position:relative}
.hero.cz-ph .hero-overlay{min-height:inherit;display:flex;flex-direction:column;position:relative;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.08) 18%,rgba(0,0,0,0) 32%,rgba(10,12,10,.38) 50%,rgba(10,12,10,.74) 70%,rgba(10,12,10,.84) 100%)!important}
.hero.cz-ph .welcome{display:none!important}
.cz-ph-back{position:absolute;left:12px;top:100px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 4px;color:#fff!important;font:400 14px/16px Montserrat,"Helvetica Neue",Arial,sans-serif;text-decoration:none!important}
.cz-ph svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cz-ph-back svg{width:16px;height:16px}
.cz-ph-body{margin-top:auto;padding:150px 12px 24px;color:#fff;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;position:relative}
.cz-ph-labels{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px!important;padding:0!important;list-style:none!important}
.cz-ph-labels li{margin:0!important;font:500 11px/1 Montserrat,sans-serif;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:6px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cz-ph-titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.hero.cz-ph h1.cz-ph-title{margin:0!important;padding:0!important;flex:1 1 auto;max-width:300px;font-weight:400!important;font-size:32px!important;line-height:34px!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important;text-align:left!important;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.hero.cz-ph h1.cz-ph-title--l{font-size:28px!important;line-height:31px!important}
.hero.cz-ph h1.cz-ph-title--xl{font-size:24px!important;line-height:28px!important;max-width:310px}
.cz-ph-title .cz-ph-x{display:none}
.cz-ph-title .cz-ph-main{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.cz-ph-title .cz-ph-main::first-letter{text-transform:uppercase}
.cz-ph-down{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;color:#fff!important}
.cz-ph-down svg{width:18px;height:18px}
.cz-ph-grid{display:grid;grid-template-columns:1.35fr 1fr}
.cz-ph-cell{border-top:1px solid rgba(255,255,255,.28);padding:12px 0;min-width:0}
.cz-ph-cell:nth-child(odd){padding-right:16px}
.cz-ph-cap{display:block;font:400 14px/16px Montserrat,sans-serif;color:rgba(255,255,255,.82);margin-bottom:8px}
.cz-ph-val{display:block;font:600 16px/24px Montserrat,sans-serif;color:#fff!important}
.cz-ph-link{display:inline!important;text-decoration:none!important}
.cz-ph-link .cz-ph-arrow{margin-left:8px;vertical-align:middle;position:relative;top:-1px}
.cz-ph-nw{white-space:nowrap}
.cz-ph-per{font-size:13px;font-weight:500}
.cz-ph-link u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cz-ph-arrow{width:28px;height:28px;border-radius:50%;background:#fff;color:#1C1F1A;display:inline-flex;align-items:center;justify-content:center}
.cz-ph-arrow svg{width:14px;height:14px;stroke-width:2}
.cz-ph-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.cz-ph-ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.cz-ph-ico svg{width:20px;height:20px;stroke-width:1.6}
.cz-ph-outline{flex:1 1 auto;min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.75);color:#fff!important;text-decoration:none!important;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 16px;font:500 13px/16px Montserrat,sans-serif}
.cz-ph-primary{flex:0 0 auto;height:48px;border-radius:999px;background:#fff;color:#1C1F1A!important;text-decoration:none!important;display:flex;align-items:center;gap:10px;padding:0 6px 0 18px;font:600 13px/16px Montserrat,sans-serif;white-space:nowrap}
.cz-ph-dot{width:36px;height:36px;border-radius:50%;background:#1C1F1A;color:#CDD873;display:flex;align-items:center;justify-content:center}
.cz-ph-dot svg{width:14px;height:14px;stroke-width:2.2}
.cz-ph-ico:focus-visible,.cz-ph-outline:focus-visible,.cz-ph-primary:focus-visible,.cz-ph-link:focus-visible,.cz-ph-down:focus-visible,.cz-ph-back:focus-visible{outline:2px solid #CDD873;outline-offset:3px}
.cz-ph-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1C1F1A;color:#fff;font:500 14px/20px Montserrat,sans-serif;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:9999;max-width:90vw;word-break:break-all}
.cz-ph-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* the facts now sit in the photo, so the old summary box and meta lines below are hidden */
.cz-ph-on .section-cruise-details .cruise-info,.cz-ph-on .section-cruise-details .croaziere-labels,.cz-ph-on .section-cruise-details .cruise-meta{display:none!important}
.cz-ph-on .section-cruise-details{padding-top:28px!important}
.cz-ph-on .section-cruise-details .container{margin-top:0!important;top:0!important;transform:none!important}
@media (min-width:768px){
  .cz-ph-back{left:max(24px,calc((100vw - 720px)/2));top:112px}
  .cz-ph-body{width:100%;max-width:720px;margin-left:auto;margin-right:auto;padding:150px 15px 32px}
  .hero.cz-ph h1.cz-ph-title,.hero.cz-ph h1.cz-ph-title--l,.hero.cz-ph h1.cz-ph-title--xl{max-width:560px}
  .cz-ph-actions{justify-content:flex-start}
  .cz-ph-outline{flex:0 0 auto}
}
@media (min-width:992px){
  .hero.cz-ph{min-height:min(88vh,860px)}
  .cz-ph-back{left:max(24px,calc((100vw - 1110px)/2));top:150px}
  .cz-ph-body{max-width:1140px}
  .hero.cz-ph h1.cz-ph-title{font-size:48px!important;line-height:52px!important;max-width:760px}
  .hero.cz-ph h1.cz-ph-title--l{font-size:42px!important;line-height:46px!important;max-width:760px}
  .hero.cz-ph h1.cz-ph-title--xl{font-size:36px!important;line-height:40px!important;max-width:820px}
  .cz-ph-grid{grid-template-columns:1.6fr .7fr 1.1fr .9fr}
  .cz-ph-cell{padding-right:24px}
}
/* before header.js runs (class set in <head>, removed on load if the header was not built) */
html.cz-ph-pre body:not(.cz-ph-on) .hero{min-height:100vh;min-height:100svh}
@media (min-width:992px){html.cz-ph-pre body:not(.cz-ph-on) .hero{min-height:min(88vh,860px)}}
html.cz-ph-pre body:not(.cz-ph-on) .hero .welcome,html.cz-ph-pre body:not(.cz-ph-on) .section-cruise-details .cruise-info{visibility:hidden}
/* v1.0.1: WhatsApp bubble (Joinchat) steps aside while it would cover the hero buttons */
.joinchat .joinchat__button{transition:background-color .2s linear,transform .25s ease}
body.cz-wa-off .joinchat{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
body:not(.cz-wa-off) .joinchat{transition:opacity .25s ease}
body.cz-wa-off .joinchat .joinchat__button{transform:translateY(20px)}
/* v1.0.2: phones – hero button row (share · Solicită ofertă personalizată · Tarife) fits exactly between the same
   edges as the full-width "Scrieți-ne pe WhatsApp" button below: one height (48px), 8px gaps, nothing overflowing */
@media (max-width:767px){
  .cz-ph-actions{display:grid;grid-template-columns:48px minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto;align-items:stretch;gap:8px;width:100%;max-width:100%;box-sizing:border-box}
  .cz-ph-actions>*{box-sizing:border-box;min-width:0;margin:0}
  .cz-ph-ico{width:48px;height:48px}
  .cz-ph-outline{min-height:0;height:48px;padding:0 12px;font-size:12.5px;line-height:15px;letter-spacing:0;overflow:hidden;text-wrap:balance}
  .cz-ph-primary{height:48px;padding:0 6px 0 16px;gap:10px}
}
@media (max-width:359px){
  .cz-ph-outline{font-size:12px;padding:0 10px}
  .cz-ph-primary{padding-left:14px;gap:8px}
}
/* 1.2.0: header in the HTML (PHP). On phones croaziere-share adds "Scrieți-ne pe WhatsApp" (8px gap + 48px) under the
   buttons once its script runs; keep that space from the first paint so nothing moves. */
@media (max-width:767px){body.czh-ssr-wa:not(.czsh-offer) .cz-ph-actions{margin-bottom:56px}}
