/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/* =========================================================
   MARZIA CLINIC — VIDEO HERO SYSTEM
   CSS COMUNE A TUTTI GLI HERO
   ========================================================= */


/* =========================================================
   HERO GENERALE
   ========================================================= */

.mc-video-hero {
  position: relative;

  /* Colore accent di default.
     Può essere sovrascritto direttamente nell'HTML. */
  --mc-hero-accent: #E92D87;

  width: 100vw;
  max-width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  min-height: 82vh;

  overflow: hidden;

  background: #080808;

  font-family: "Montserrat", Arial, sans-serif;

  box-sizing: border-box;
}


/* =========================================================
   MEDIA
   ========================================================= */

.mc-video-hero__media {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #080808;
}


/* =========================================================
   VIDEO
   ========================================================= */

.mc-video-hero__video {
  position: absolute;
  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   OVERLAY DESKTOP
   ========================================================= */

.mc-video-hero__overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 8, 0.44) 0%,
      rgba(8, 8, 8, 0.27) 28%,
      rgba(8, 8, 8, 0.10) 52%,
      rgba(8, 8, 8, 0.02) 72%,
      rgba(8, 8, 8, 0) 100%
    );
}


/* =========================================================
   LINK OPZIONALE SUL VIDEO
   ========================================================= */

.mc-video-hero__media-link {
  position: absolute;
  inset: 0;

  z-index: 3;

  display: block;

  cursor: pointer;
}


/* =========================================================
   COPY DESKTOP
   ========================================================= */

.mc-video-hero__copy {
  position: relative;

  z-index: 4;

  width: 100%;
  min-height: 82vh;

  display: flex;
  align-items: center;

  pointer-events: none;
}


/*
 * DESKTOP:
 * il copy occupa circa metà schermo / poco oltre.
 *
 * In questo modo non invade tutta la hero
 * ma ha abbastanza spazio per i titoli lunghi.
 */

.mc-video-hero__copy-inner {
  width: min(900px, 58vw);

  margin-left: clamp(36px, 7vw, 145px);

  pointer-events: auto;

  box-sizing: border-box;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.mc-video-hero__eyebrow {
  margin-bottom: 22px;

  color: #ffffff;

  font-size: clamp(11px, 0.9vw, 15px);

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 0.02em;

  text-transform: uppercase;
}


/* =========================================================
   TITOLO
   ========================================================= */

.mc-video-hero__title {
  margin: 0;

  width: 100%;
  max-width: 100%;

  color: #ffffff;

  font-family: "Montserrat", Arial, sans-serif;

  /*
   * Più controllato rispetto a prima.
   * Su monitor grandi cresce,
   * ma non diventa eccessivamente enorme.
   */
  font-size: clamp(48px, 5.2vw, 92px);

  font-weight: 400;

  line-height: 0.96;

  letter-spacing: -0.05em;

  /*
   * IMPORTANTISSIMO:
   * mai spezzare una parola a metà.
   */
  word-break: normal !important;
  overflow-wrap: normal !important;

  hyphens: none;
  -webkit-hyphens: none;

  /*
   * Gli a capo li controlli tu con <br>.
   * Il browser non deve creare spezzature dentro
   * le singole parole.
   */
  white-space: normal;
}


/* Colore accent personalizzabile dall'HTML */

.mc-video-hero__accent {
  color: var(--mc-hero-accent);
}


/* =========================================================
   TESTO
   ========================================================= */

.mc-video-hero__text {
  max-width: 760px;

  margin: 38px 0 0;

  color: rgba(255, 255, 255, 0.92);

  font-size: clamp(14px, 1.05vw, 18px);

  font-weight: 400;

  line-height: 1.65;

  letter-spacing: -0.015em;

  word-break: normal;
  overflow-wrap: normal;

  hyphens: none;
  -webkit-hyphens: none;
}


/* =========================================================
   AREA PULSANTI
   ========================================================= */

.mc-video-hero__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


/* =========================================================
   CTA DESKTOP
   ========================================================= */

.mc-video-hero__button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding: 0 27px;

  border: 1px solid rgba(255, 255, 255, 0.90);

  border-radius: 100px;

  background: transparent;

  color: #ffffff !important;

  font-family: "Montserrat", Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.01em;

  text-decoration: none !important;

  transition:
    background-color 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease;
}


.mc-video-hero__button:hover {
  background: #ffffff;

  border-color: #ffffff;

  color: #080808 !important;
}


/* =========================================================
   PLAY / PAUSA
   SOLO SIMBOLO
   ========================================================= */

.mc-video-hero__control {
  position: absolute;

  right: 28px;
  bottom: 28px;

  z-index: 10;

  width: 44px;
  height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.55);

  border-radius: 50%;

  background: rgba(8, 8, 8, 0.25);

  color: #ffffff;

  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.mc-video-hero__control:hover {
  background: rgba(8, 8, 8, 0.52);

  border-color: rgba(255, 255, 255, 0.90);

  transform: scale(1.04);
}


/* =========================================================
   ICONA PAUSA
   ========================================================= */

.mc-video-hero__pause {
  position: relative;

  display: block;

  width: 8px;
  height: 11px;
}


.mc-video-hero__pause::before,
.mc-video-hero__pause::after {
  content: "";

  position: absolute;

  top: 0;

  width: 2px;
  height: 11px;

  border-radius: 2px;

  background: #ffffff;
}


.mc-video-hero__pause::before {
  left: 0;
}


.mc-video-hero__pause::after {
  right: 0;
}


/* =========================================================
   ICONA PLAY
   ========================================================= */

.mc-video-hero__play {
  display: none;

  width: 0;
  height: 0;

  margin-left: 2px;

  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;

  border-left: 9px solid #ffffff;
}


/* =========================================================
   STATO VIDEO FERMO
   ========================================================= */

.mc-video-hero__control.is-paused .mc-video-hero__pause {
  display: none;
}


.mc-video-hero__control.is-paused .mc-video-hero__play {
  display: block;
}


/* =========================================================
   DESKTOP MEDIO
   1025px — 1500px

   Riduciamo leggermente il titolo prima che
   possa diventare troppo largo.
   ========================================================= */

@media (max-width: 1500px) and (min-width: 1025px) {

  .mc-video-hero__copy-inner {
    width: min(820px, 56vw);
  }


  .mc-video-hero__title {
    font-size: clamp(46px, 4.8vw, 76px);
  }


  .mc-video-hero__text {
    max-width: 700px;

    font-size: 14px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) and (min-width: 768px) {

  .mc-video-hero,
  .mc-video-hero__copy {
    min-height: 74vh;
  }


  .mc-video-hero__copy-inner {
    width: 68vw;

    margin-left: 38px;
  }


  .mc-video-hero__title {
    font-size: clamp(40px, 5.8vw, 60px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.045em;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none;
    -webkit-hyphens: none;
  }


  .mc-video-hero__text {
    max-width: 620px;

    margin-top: 28px;

    font-size: 14px;
  }

}


/* =========================================================
   MOBILE
   VIDEO SOPRA + COPY SOTTO
   ========================================================= */

@media (max-width: 767px) {

  .mc-video-hero {
    width: 100%;
    max-width: 100%;

    margin-left: 0;
    margin-right: 0;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;
  }


  /* =======================================================
     MEDIA MOBILE
     ======================================================= */

  .mc-video-hero__media {
    position: relative;

    inset: auto;

    width: 100%;

    height: 58svh;

    min-height: 430px;
    max-height: 610px;

    flex: 0 0 auto;

    background: #080808;
  }


  .mc-video-hero__video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
  }


  /* Su mobile il testo è sotto */

  .mc-video-hero__overlay {
    display: none;
  }


  /* =======================================================
     COPY MOBILE
     ======================================================= */

  .mc-video-hero__copy {
    position: relative;

    width: 100%;

    min-height: 0;

    display: block;

    background: #ffffff;
  }


  .mc-video-hero__copy-inner {
    width: 100%;

    margin: 0;

    /*
     * Riduciamo il padding laterale
     * per dare più respiro alle parole lunghe.
     */
    padding: 34px 18px 46px;

    box-sizing: border-box;
  }


  /* EYEBROW */

  .mc-video-hero__eyebrow {
    margin-bottom: 15px;

    color: #6b6b6b;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 0.015em;

    word-break: normal;

    overflow-wrap: normal;
  }


  /* =======================================================
     TITOLO MOBILE

     Si riduce molto prima di arrivare a spezzare
     una parola lunga come "riprogrammazione".
     ======================================================= */

  .mc-video-hero__title {
    width: 100%;

    color: #080808;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: clamp(32px, 8.8vw, 46px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.042em;

    word-break: normal !important;
    overflow-wrap: normal !important;

    hyphens: none;
    -webkit-hyphens: none;
  }


  /* Accent mantiene il colore passato dall'HTML */

  .mc-video-hero__accent {
    color: var(--mc-hero-accent);
  }


  /* =======================================================
     TESTO MOBILE
     ======================================================= */

  .mc-video-hero__text {
    max-width: none;

    margin-top: 24px;

    color: #666666;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: -0.01em;

    word-break: normal;
    overflow-wrap: normal;

    hyphens: none;
    -webkit-hyphens: none;
  }


  /* =======================================================
     CTA MOBILE
     ======================================================= */

  .mc-video-hero__actions {
    margin-top: 26px;

    gap: 10px;
  }


  .mc-video-hero__button {
    min-height: 49px;

    padding: 0 25px;

    background: transparent;

    border-color: #080808;

    color: #080808 !important;
  }


  .mc-video-hero__button:hover {
    background: #080808;

    border-color: #080808;

    color: #ffffff !important;
  }


  /* =======================================================
     PLAY / PAUSA MOBILE
     ======================================================= */

  .mc-video-hero__control {
    right: 16px;
    bottom: 16px;

    width: 42px;
    height: 42px;
  }

}


/* =========================================================
   MOBILE MOLTO PICCOLO
   ========================================================= */

@media (max-width: 390px) {

  .mc-video-hero__copy-inner {
    padding-left: 16px;
    padding-right: 16px;
  }


  .mc-video-hero__title {
    font-size: clamp(30px, 8.4vw, 38px);

    letter-spacing: -0.035em;
  }

}


/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mc-video-hero__video {
    animation: none !important;
  }

}