/* ========================================================================
   BLITZ — ABOUT PAGE v1
   YOOtheme Pro 5.0.36
   File consigliato: /wp-content/themes/blitz/css/about.css
   ======================================================================== */

:root {
  --blitz-about-blue: #2559cb;
  --blitz-about-blue-dark: #061b59;
  --blitz-about-card-stage: 72svh;
}

/* ------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------ */



/* ------------------------------------------------------------------------
   2. INTRO
   ------------------------------------------------------------------------ */

.blitz-about-intro {
  padding-block: clamp(62px, 7vw, 105px) !important;
  background: #fff;
}

.blitz-about-intro-column {
  max-width: 1020px;
  margin-inline: auto;
}

.blitz-about-intro-text {
  color: #1846ad !important;
  font-family: var(--blitz-font-condensed, "Arial Narrow", sans-serif) !important;
}

.blitz-about-intro-text p {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* ------------------------------------------------------------------------
   3. DESKTOP — TRE CARD CON HOVER
   ------------------------------------------------------------------------ */

.blitz-about-stories-desktop {
  padding: 0 !important;
  overflow: hidden;
  background: #061b59;
}

.blitz-about-stories-desktop > .uk-container,
.blitz-about-stories-desktop > .uk-container-expand {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.blitz-about-hover-grid {
  margin: 0 !important;
}

.blitz-about-hover-grid > * {
  padding-left: 0 !important;
}

.blitz-about-hover-column {
  overflow: hidden;
}

.blitz-about-hover-card {
  position: relative;
  height: clamp(590px, 58vw, 860px);
  margin: 0 !important;
  overflow: hidden;
  background: #0a1f61;
  isolation: isolate;
}

.blitz-about-hover-card picture,
.blitz-about-hover-card img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.blitz-about-hover-card img {
  object-fit: cover;
  transition:
    transform .8s cubic-bezier(.18,.78,.22,1),
    filter .55s ease;
}

.blitz-about-hover-card--court img {
  object-position: 40% center;
}

.blitz-about-hover-card--woman img {
  object-position: 50% center;
}

.blitz-about-hover-card--friends img {
  object-position: 55% center;
}

.blitz-about-hover-card .uk-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  min-height: 48%;
  padding: clamp(34px, 3.4vw, 58px) clamp(26px, 3vw, 50px) !important;
  background:
    linear-gradient(180deg, rgba(43, 91, 211, .95) 0%, rgba(5, 27, 89, .98) 100%) !important;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform .68s cubic-bezier(.18,.78,.22,1),
    opacity .4s ease;
}

.blitz-about-hover-card .el-title,
.blitz-about-hover-card h2,
.blitz-about-hover-card h3 {
  margin: 0 0 28px !important;
  color: #fff !important;
  font-family: var(--blitz-font-display, Impact, sans-serif) !important;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.blitz-about-hover-card .el-content,
.blitz-about-hover-card .uk-panel {
  color: #fff !important;
  font-family: var(--blitz-font-condensed, "Arial Narrow", sans-serif) !important;
}

.blitz-about-hover-card .el-content p {
  margin: 0 !important;
}

.blitz-about-hover-card:hover img,
.blitz-about-hover-card:focus-within img {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.03);
}

.blitz-about-hover-card:hover .uk-overlay,
.blitz-about-hover-card:focus-within .uk-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------------------
   4. MOBILE — STACK STICKY IMMAGINE > TESTO
   Ogni pannello ricopre completamente quello precedente.
   ------------------------------------------------------------------------ */

.blitz-about-stories-mobile {
  position: relative;
  padding: 0 !important;
  overflow: visible !important;
  background: #fff;
  isolation: isolate;
}

.blitz-about-stories-mobile > .uk-container,
.blitz-about-stories-mobile > .uk-container-expand {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/*
 * Rimuove dal layout il wrapper YOOtheme della singola storia.
 *
 * La sequenza effettiva diventa:
 * immagine 1
 * testo 1
 * immagine 2
 * testo 2
 * immagine 3
 * testo 3
 */
.blitz-about-mobile-story {
  display: contents !important;
}

/* Azzera spazi e padding introdotti dalla griglia YOOtheme. */
.blitz-about-mobile-story > * {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding-left: 0 !important;
}

/*
 * Ogni immagine e ogni card di testo occupano l’intera viewport
 * e restano bloccate in alto.
 */
.blitz-about-mobile-image,
.blitz-about-mobile-copy {
  position: sticky !important;
  top: 0;
  box-sizing: border-box;
  width: 100% !important;
  height: var(--blitz-about-card-stage);
  min-height: var(--blitz-about-card-stage);
  margin: 0 !important;
  overflow: hidden;
}

/*
 * Ordine di sovrapposizione:
 * ogni nuovo pannello ricopre completamente quello precedente.
 */
.blitz-about-mobile-story-1 > .blitz-about-mobile-image {
  z-index: 1;
}

.blitz-about-mobile-story-1 > .blitz-about-mobile-copy {
  z-index: 2;
}

.blitz-about-mobile-story-2 > .blitz-about-mobile-image {
  z-index: 3;
}

.blitz-about-mobile-story-2 > .blitz-about-mobile-copy {
  z-index: 4;
}

.blitz-about-mobile-story-3 > .blitz-about-mobile-image {
  z-index: 5;
}

.blitz-about-mobile-story-3 > .blitz-about-mobile-copy {
  z-index: 6;
}

/* ------------------------------------------------------------------------
   IMMAGINI
   ------------------------------------------------------------------------ */

.blitz-about-mobile-image {
  background: #101010;
}

.blitz-about-mobile-photo {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.blitz-about-mobile-photo picture,
.blitz-about-mobile-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.blitz-about-mobile-photo img {
  object-fit: cover;
}

.blitz-about-mobile-photo--court img {
  object-position: 42% center;
}

.blitz-about-mobile-photo--woman img {
  object-position: 50% center;
}

.blitz-about-mobile-photo--friends img {
  object-position: 54% center;
}

/* ------------------------------------------------------------------------
   CARD TESTUALI
   Fondo completamente opaco per ricoprire l’immagine.
   ------------------------------------------------------------------------ */

.blitz-about-mobile-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(44px, 12vw, 76px)
    clamp(26px, 8vw, 48px) !important;

  color: #fff;

  background:
    radial-gradient(
      ellipse 85% 65% at 35% 3%,
      rgba(52, 103, 228, .98) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      #2c60d3 0%,
      #173f9f 42%,
      #061b59 100%
    );

  box-shadow: none;
}

.blitz-about-mobile-title {
  margin: 0 0 28px !important;
  color: #fff !important;
  font-family:
    var(--blitz-font-display, Impact, sans-serif) !important;
  font-size: clamp(48px, 59.19375px, 68px) !important;
  font-style: italic;
  font-weight: 900;
  line-height: .92 !important;
  text-transform: uppercase;
}

.blitz-about-mobile-text {
  max-width: 520px;
  margin: 0 auto !important;
  color: #fff !important;
  font-family:
    var(--blitz-font-condensed, "Arial Narrow", sans-serif) !important;
  font-size: clamp(21px, 5.7vw, 27px) !important;
}

.blitz-about-mobile-text p {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

/* Elimina definitivamente il margine generato dalla griglia. */
.blitz-about-stories-mobile
.blitz-about-mobile-copy.uk-grid-margin {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------------
   5. MARQUEE
   ------------------------------------------------------------------------ */

.blitz-about-marquee {
  padding: 0 !important;
  overflow: hidden;
  color: #fff;
  background: #e30016;
}

.blitz-about-marquee > .uk-container,
.blitz-about-marquee > .uk-container-expand,
.blitz-about-marquee-row,
.blitz-about-marquee-row > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.blitz-about-marquee-content {
  margin: 0 !important;
  overflow: hidden;
}

.blitz-about-marquee-track {
  display: flex;
  width: max-content;
  min-width: 200%;
  white-space: nowrap;
  animation: blitz-about-marquee 18s linear infinite;
}

.blitz-about-marquee-track span {
  display: block;
  padding: 17px 0 12px;
  color: #fff;
  font-family: var(--blitz-font-display, Impact, sans-serif);
  font-size: clamp(42px, 4vw, 70px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

@keyframes blitz-about-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------------
   6. TABLET / MOBILE
   ------------------------------------------------------------------------ */

@media (max-width: 959px) {
  :root {
    --blitz-about-card-stage: min(74svh, 720px);
  }


  .blitz-about-page.blitz-about-hero.uk-section-primary.uk-position-relative .uk-background-norepeat .uk-position-cover {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(4, 18, 60, .20) 45%, rgba(4, 18, 60, .0) 80%) !important;
  }

  div#about-us.blitz-about-hero .uk-background-cover {
	  padding-top: 100px;
	  align-items: flex-start;
  }

  .blitz-about-hero-copy {
    width: 100% !important;
    text-align: center;
  }

  .blitz-about-hero-title {
    max-width: 620px;
    margin-inline: auto !important;
  }

  .blitz-about-hero-spacer {
    display: none;
  }
  .blitz-about-mobile-story-1.blitz-about-mobile-story--court img {
    object-position: 60% center;
  }
  
  .blitz-about-mobile-photo img {
    transform: translateY(0) scale(1.035);
    transform-origin: center;
  }

  
  
}

@media (max-width: 479px) {
  :root {
    --blitz-about-card-stage: 100vh;
  }
/*
  .blitz-about-hero {
    min-height: 86svh;
    background-position: 59% center !important;
  }
	.blitz-about-hero-row {
    min-height: 86svh;
  }
*/
  
  .blitz-about-mobile-copy {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }
}

/* ------------------------------------------------------------------------
   7. ACCESSIBILITÀ
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .blitz-about-hover-card img,
  .blitz-about-hover-card .uk-overlay,
  .blitz-about-marquee-track {
    transition: none !important;
    animation: none !important;
  }
}