/* ===== HERO SECTION STYLES ===== */
/* Stili centralizzati per tutti i partial hero - ORIGINALI DA HOME.CSS */

/* ========== MASTHEAD - TUTTE LE PAGINE ========== */
.masthead {
  background: radial-gradient(120% 140% at 100% 0%, #0C46E0 0%, #0A2FA0 42%, #071C61 100%);
  position: relative;
}

/* ========== VARIABILI HERO ========== */
:root{
  --v-left: 12%;
  --v-right: 86%;
  --h-mid: 50%;
  --frame-height: clamp(220px, 26vw, 360px);
  --frame-top:    calc(var(--h-mid) - var(--frame-height) / 2);
  --frame-bottom: calc(var(--h-mid) + var(--frame-height) / 2);
  --line: rgba(255,255,255,.35);
  --gc-cta: #A7F216;
  --gc-cta-ink: #0B0B0E;
  --gc-cta-shadow: color-mix(in oklab, var(--gc-cta), transparent 72%);
}

/* ========== Band Blue - HERO BACKGROUND ========== */
.band.band--blue {
  position: relative;
  color: white;
  padding: 0;
  /* Allow the background video to extend beyond the hero-box without being clipped */
  overflow: visible;
  z-index: 0; /* ensure band creates stacking context above the video */
}

.container-frame {
    position: relative;
    width: 100%;
}

.container-frame.no-padding {
    padding: 0;
    z-index: 1;
}

/* ========== HERO (solo linee) - ORIGINALE ========== */
.hero-box{
  height: 93vh !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Allow child video to extend under header/band without being clipped */
  overflow: visible;
}

  /* initial center for vertical lines */
  .hero-box:not(.hero-open) .v-line{
    left: 50%;
    top: 50%;
    height: 0%;
  }

  /* smooth transitions from center to computed frame positions */
  .hero-box .h-full{
    transition: top 360ms cubic-bezier(.22,.9,.31,1) 520ms;
  }
  .hero-box .v-line{
    transition: left 360ms cubic-bezier(.22,.9,.31,1) 520ms, top 360ms cubic-bezier(.22,.9,.31,1) 520ms, height 360ms cubic-bezier(.22,.9,.31,1) 520ms;
  }

.hero-guard{
  height: max(var(--frame-height), 40vh);
  visibility: hidden;
  pointer-events: none;
}

/* Linee orizzontali full width (top/bottom) */
.h-full{
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: center;
  /* start after the central dot animation */
  animation: growX 650ms ease-out 520ms forwards;
  z-index: 1;
}
.h-full.top    { top: var(--frame-top); }
.h-full.bottom { top: var(--frame-bottom); }

/* Linee verticali */
.v-line{
  position: absolute;
  width: 1px;
  background: var(--line);
  transform: scaleY(0);
  z-index: 1;
}
.v-line.v-left-up{
  left: var(--v-left);
  top: var(--frame-top);
  height: calc(var(--frame-bottom) - var(--frame-top));
  transform-origin: top;
  /* start after the central dot and horizontal line */
  animation: growY 650ms ease-out 700ms forwards;
}
.v-line.v-right-down{
  left: var(--v-right);
  top:  var(--frame-top);
  height: calc(100% - var(--frame-top));
  transform-origin: top;
  animation: growY 650ms ease-out 700ms forwards;
}

/* support alternative class name used in hero-image partial */
.v-line.v-right-up{
  left: var(--v-right);
  top: var(--frame-top);
  height: calc(100% - var(--frame-top));
  transform-origin: top;
  animation: growY 650ms ease-out 700ms forwards;
}

/* Central dot that expands then fades, triggering the grid opening visual */

.hero-box::after{
  content: "";
  position: absolute;
  /* start centered (coincide con lo stato iniziale delle linee) */
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  display: block;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 6;
  pointer-events: none;
  transition: left 520ms cubic-bezier(.22,.9,.31,1), top 520ms cubic-bezier(.22,.9,.31,1), transform 360ms ease;
}

/* When hero opens, move the dot to the right vertical line / top frame position so it's
   fixed to that line. The dot remains visible. */
.hero-box.hero-open::after{
  left: var(--v-right);
  top: var(--frame-top);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Center cross lines that expand from the dot and then disappear (leaving the full grid) */
.hero-box:not(.hero-open) .h-full{ top: 50%; transform-origin: center; transform: scaleX(0); }
.hero-box:not(.hero-open) .v-line{ left: 50%; top: 50%; height: 0%; transform-origin: center; transform: scaleY(0); }

/* Quando .hero-open è presente, le linee transizionano verso le posizioni calcolate */
.hero-box.hero-open .h-full.top{ top: var(--frame-top); transform-origin: center; transform: scaleX(1); }
.hero-box.hero-open .h-full.bottom{ top: var(--frame-bottom); transform-origin: center; transform: scaleX(1); }

.hero-box.hero-open .v-line.v-left-up{ left: var(--v-left); top: var(--frame-top); height: calc(var(--frame-bottom) - var(--frame-top)); transform-origin: top; transform: scaleY(1); }

.h-video .hero-box.hero-open .v-line.v-left-up{ height: var(--frame-bottom) !important; top: 0 !important;}


.hero-box.hero-open .v-line.v-right-down{ left: var(--v-right); top: var(--frame-top); height: calc(100% - var(--frame-top)); transform-origin: top; transform: scaleY(1); }
.hero-box.hero-open .v-line.v-right-up{ left: var(--v-right); top: var(--frame-top); height: calc(100% - var(--frame-top)); transform-origin: top; transform: scaleY(1); }

/* Transizioni continue per top/left/height e scaling */
.hero-box .h-full{ transition: top 520ms cubic-bezier(.22,.9,.31,1), transform 520ms cubic-bezier(.22,.9,.31,1); }
.hero-box .v-line{ transition: left 520ms cubic-bezier(.22,.9,.31,1), top 520ms cubic-bezier(.22,.9,.31,1), height 520ms cubic-bezier(.22,.9,.31,1), transform 520ms cubic-bezier(.22,.9,.31,1); }

/* Testo vincolato dentro l'area delimitata dalle linee */
.hero-text{
  position: absolute;
  /* occupy the frame area so inner content stays centered */
  left:   var(--v-left);
  right:  calc(100% - var(--v-right));
  top:    var(--frame-top);
  bottom: calc(100% - var(--frame-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(8px, 1.6vw, 24px);
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  /* keep text above the video */
  z-index: 4;
  opacity: 0;
  filter: blur(6px);
  animation: textIn 520ms ease 980ms forwards;
}
.hero-text span{
  color: #C4F222 !important;
}
.hero-text a span {
  color: inherit !important;
}
.hero-text h1{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(28px, 4.8vw, 72px);
  line-height: 1.06;
  color: white;
}
.hero-text .sub{ 
  margin: 0;
  opacity: 1;
  font-size: 20px;
  max-width: 648px;
  width: 100%;
}

/* ========== Video full-section ========== */
.hero-video-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep video below the main .container (z-index:2) so text and borders remain above it */
  z-index: 1;
  pointer-events: none;
}
.hero-video-wrap, .hero-image-wrap, .hero-static-wrap { height: 776px; }

.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-video.is-on{ opacity: 1; }

/* static image fallback hidden by default (desktop) */
.hero-static-wrap { display: none; }
.hero-static { display: none; }

/* ========== Alternativa GIF/WebP centrata ========== */
.hero-anim{
  position: absolute;
  left:   var(--v-left);
  right:  calc(100% - var(--v-right));
  top:    var(--frame-top);
  bottom: calc(100% - var(--frame-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.hero-anim img, .hero-anim source{
  max-width: clamp(280px, 70%, 900px);
  width: 100%;
  height: auto;
  display: block;
}

/* ========== Animazioni base ========== */
@keyframes growX { to { transform: scaleX(1); } }
@keyframes growY { to { transform: scaleY(1); } }
@keyframes textIn { to { opacity: 1; filter: blur(0); } }

/* ========== HERO SPLIT 50/50 (hero-image) ========== */
.hero-box--split {
  display: flex;
  align-items: center;
}

.hero-content-split {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 3;
}

.hero-text-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  position: relative;
}

.hero-text-column .hero-text {
  position: static;
  opacity: 1;
  filter: none;
  animation: textIn 520ms ease 980ms forwards;
  text-align: left;
  max-width: 600px;
  width: 100%;
}

/* Stili specifici per hero-image split */
.hero-text-column .hero-text h1 {
  color: var(--White-100, #FFF);
    font-family: var(--Typography-font-family-title, "Space Grotesk");
    font-size: 72px;
    font-style: normal;
    font-weight: 500;
    line-height: 72px;
}
.hero-text-column .hero-text h1 span{
  color:  #C4F222;
}

.hero-text-column .hero-text .sub {
  color: #FFF;
  font-family: var(--Typography-font-family-body, 'Montserrat');
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 130% */
  margin: 0;
}

.hero-image-column {
  width: 50%;
  position: relative;
  overflow: hidden;
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-image-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
  animation: imageIn 800ms ease 1200ms forwards;
  border-left: 1px solid rgba(255, 255, 255, 0.30);
}

@keyframes imageIn {
  to { opacity: 1; }
}

/* ========== NEWS METADATA NELLA COLONNA TESTO ========== */
.hero-news-meta {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-news-date {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
}

.hero-news-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-news-tag {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-text-column .discover {
  position: absolute;
  bottom: clamp(20px, 4vw, 60px);
  left: clamp(20px, 4vw, 60px);
}
/* Dynamic frame positions are computed at runtime and set on the .hero-box element
  using the --frame-top and --frame-bottom custom properties. Fixed pixel overrides
  were removed so the grid adapts to the text size. */
/* ========== Accessibilità / Responsive ========== */
@media (max-width: 900px){
  .hero-box { min-height: 56vh; }
  /* Center absolute-positioned discover button on tablet/mobile */
    .hero-news-index .btn-discover {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 25px !important;
        z-index: 9999;
    }
}

/* Also hide .line-scl when viewport height is small */
@media (max-height:668px) {
  .line-scl { display: none !important; }
}

/* Also apply h1 padding when viewport height is small */
@media (max-height:668px) {
  .hero-content-split .hero-text-column .hero-text h1 {
    padding: 40px 0 40px 0;
  }
}

/* Hide decorative .line-scl under 1200px to avoid layout clutter on smaller screens */
@media (max-width:1200px) {
  .line-scl { display: none !important; }
}

/* Add extra vertical padding to split-hero h1 on narrower screens */
@media (max-width:1200px) {
  .hero-content-split .hero-text-column .hero-text h1 {
    padding: 40px 0 40px 0 !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .h-full, .v-line, .hero-text{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .hero-video{ display: none; }
}
/* Tablet and smaller: use static image instead of video for performance and consistency */
@media (max-width: 768px) {
  /* Keep video visible on tablet/mobile for consistent experience */
  .hero-video { display: block !important; }
  .hero-video-wrap { background: transparent; }

  /* static image fallback is unused on small screens - hide it */
  .hero-static-wrap { display: none !important; }
  .hero-static { display: none !important; }

  /* Slightly reduce the hero height for tablets to avoid overflow */
  .hero-box { height: auto !important; min-height: 44vh; }

  /* Make hero text sizes match responsive rules (titles 30px, text 14px) */
  .hero-text h1 { font-size: 30px !important; line-height: 1.08 !important; }
  .hero-text .sub { font-size: 14px !important; }

  /* Reduce guard spacing */
  .hero-guard { height: max(var(--frame-height), 30vh); }

  /* Staticize the title animation on small screens: show final state, no blur/animation */
  .hero-text { animation: none !important; opacity: 1 !important; filter: none !important; }
  .hero-text h1, .hero-text .sub { transition: none !important; }
  /* Disable line animations and central dot on tablet/mobile for performance and stability */
  .h-full, .v-line { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
  .hero-box::after { transition: none !important; transform: none !important; opacity: 1 !important; }
}
/* ===== Responsive: Make hero-image static with background + text above (<= 992px) ===== */
@media (max-width: 992px) {
  /* disable all line/grid animations and decorative elements */
  .h-full, .v-line, .hero-box::after, .line-scl, .hero-line { display: none !important; opacity: 0 !important; }

  /* ensure hero occupies natural height and is static */
  .hero-box, .hero-box--split { height: auto !important; min-height: 40vh !important; }

  /* move hero-text into normal flow and center it above the image */
  .hero-content-split { position: relative !important; display: block !important; }
  .hero-text-column, .hero-image-column { width: 100% !important; position: relative !important; }
  .hero-text-column .hero-text { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; text-align: center !important; padding: 24px !important; }

  /* hide video on small screens; show fallback static image instead */
  .hero-image-full { display: none !important; }
  .hero-image-fallback { display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; }

  /* alternatively, use the image as background to keep text above - set on wrapper */
  .hero-image-wrap { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }

  /* Force title sizes for mobile */
  .hero-text-column .hero-text h1 { font-size: 28px !important; line-height: 1.08 !important; width: 100% !important; padding: 0 8px !important; }
  .hero-text-column .hero-text .sub { font-size: 15px !important; }

  /* Ensure .sub paragraph is constrained and centered on small screens */
  .hero-content-split .hero-text-column .hero-text .sub {
    max-width: 471px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px;
  }
}

/* Additional mobile fix: hide decorative lines completely and center the hero text */
@media (max-width: 768px) {
  .h-full, .v-line { display: none !important; }
  .hero-box::after { display: none !important; }

  /* Force hero text to remain centered in the viewport */
  .hero-text {
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(8px, 1.6vw, 24px) !important;
    box-sizing: border-box !important;
  }
}
.hero-line{
      position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.30);
    bottom: 60px;
    width: 100%;
    z-index: 2;
}
.site-reports .hero-line, .site-investors .hero-line, .site-corporates .hero-line, .site-report .hero-line, .site-risorse .hero-line{
  width: 50%;
}
.t-mast .hero-line{
  display: none;
  
}
.hero-content-split .hero-text-column .hero-text .sub{
  width: 471px;
}

.hero-text-column .hero-text {
  position: absolute;
  top: auto;
  bottom: 80px;
  height: max-content;
  left: 40px;
  padding: 0;
  align-items: flex-start;
}
.hero-content-split .hero-text-column .hero-text h1 {
  color: var(--White-100, #FFF);
  font-family: var(--Typography-font-family-title, "Space Grotesk");
  font-size: 52px;
  font-style: normal;
  font-weight: 500;
  line-height: 52px;
  width: 550px;
  padding: 40px 0 60px 0;
  margin-bottom: 0;
}

.hero-content-split  .hero-text-column{
  padding: 0;
}
.line-scl{
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.30);
    top: 60px;
    width: 100%;
    z-index: 2;
    left: 0;
    opacity: 0;
    transition: opacity .8s ease;
    animation: imageIn 800ms ease 1200ms forwards;
}
/* removed empty .hero-news-index .hero-content-split rule to satisfy linter */
.hero-news-index.hero-open .v-line.v-right-up{
  left: 45%;
}
.hero-news-index .hero-content-split .hero-text-column .hero-text, .hero-news-index .hero-content-split .hero-text-column .hero-text .sub{
  max-width: 555px;
}

.hero-news-index .hero-line {
    width: 50% !important;
}
.hero-news-index .line-scl, .hero-news-index .v-line.v-right-up, .hero-news-index.hero-open::after{
    display: none !important;
    opacity: 0 !important;
}
.hero-news-index .btn-discover{
    position: absolute;
    left: 20px;
    bottom: 40px;
}
.hero-news-index .hero-text-column .hero-text{
  top: 25%;
  bottom: auto;
}
.hero-news-index .hero-text .sub{
  color: var(--CG-colors-Highlights-White-80, rgba(255, 255, 255, 0.80));

  /* Body 4 */
  font-family: var(--Typography-font-family-body, Montserrat);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 130% */
  width: 461px;
}
.hero-news-index .hero-content-split .hero-text-column .hero-text h1{
  padding: 0px 0 24px 0;
}
.hero-news-index .hero-content-split .hero-text-column .hero-text p{
  margin: 0;
}
/*
.site-index .hero-text {
  top: calc(50% - var(--frame-top)) !important;
  bottom: calc(50% - var(--frame-bottom)) !important;
}*/
.hero-image-full{
   opacity: 1;
  transition: none;
  animation: none;
}

/* --- responsive overrides added by agent: hero-partial view --- */
@media (max-width: 768px) {
  .hero-image { width: 100%; }
  .hero-copy { padding: 16px; }
}
@media (min-width: 350px) and (max-width: 550px) {
  .hero-title { font-size: 20px; }
  .hero-cta { width: 100%; display:block; }
}

.site-careers .hc-cta__label{
  color: #fff;
}
/* Careers page overrides (moved from inline styles in careers.php) */
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:hover,
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:focus {
  color: #000 !important;
}
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:hover .hc-cta__label,
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:focus .hc-cta__label {
  color: #000 !important;
}
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:hover svg,
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:focus svg,
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:hover svg path,
.site-careers .ctc-hero .hc-cta.btn-trasparente-lime:focus svg path {
  stroke: #000 !important;
  color: #000 !important;
}

/* Desktop-only override: reduce hero height on very large screens (>1440px) */
@media (min-width: 1441px) {
  .hero-box {
    max-height: 650px;
  }
  .hero-form-box{
  max-height: 100% !important;
}
}
.hn-grid .hn-follow__text {
  color: #C4F222 !important;
  text-decoration: none !important;
}