/*
 * Banner concorso "Vinci una casa con Gruppo Tempocasa"
 * CSS puro, nessuna dipendenza (font: Lato 400/700 da Google Fonts).
 *
 * Struttura:
 *   .contest-banner-wrap      contenitore: box verde + disclaimer sotto
 *     .contest-banner         box verde a 3 colonne: logo | pacco regalo | testo + CTA
 *     .contest-banner__disclaimer  nota normativa fuori dal box
 *
 * Il pacco (vinci-una-casa-regalo.webp, 1236x1140) sborda sopra e sotto il box di una quantita fissa.
 * L'immagine ha bordi trasparenti (~2% della larghezza sopra, ~4% sotto): i margini negativi li compensano.
 * Per ogni breakpoint basta cambiare le custom property su .contest-banner-wrap.
 *
 * Colori: primario #0099CD, bianco #FFFFFF, grigio testo #6D7278.
 */

/* ---------- token ---------- */
:root {
  --tc-primary: #0099CD;
  --tc-white: #FFFFFF;
  --tc-grey-text: #6D7278;
  --tc-radius-default: 10px;
  --tc-radius-min: 5px;
}

/* ---------- base demo (non fa parte del componente, rimuovibile) ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--tc-grey-text);
  font-family: 'Lato', sans-serif;
}

.demo-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 12px;
  overflow-x: hidden; /* il pacco puo invadere leggermente i lati su schermi stretti */
}

@media (max-width: 1399px) { .demo-container { max-width: 1140px; } }
@media (max-width: 1199px) { .demo-container { max-width: 960px; } }
@media (max-width: 991px)  { .demo-container { max-width: 720px; } }
@media (max-width: 767px)  { .demo-container { max-width: 540px; } }

/* ---------- utility (equivalenti Bootstrap 5) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.btn {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* pulsante verde con bordo bianco, hover invertito */
.green-btn-outline {
  text-transform: uppercase;
  padding: 10px 20px;
  background-color: var(--tc-primary);
  border: 1px solid var(--tc-white);
  color: var(--tc-white);
}

.green-btn-outline:hover {
  background-color: var(--tc-white);
  color: var(--tc-primary) !important;
}

/* ---------- componente ---------- */

/* Variabili sul wrap: servono sia al wrap sia al box verde.
   - --cb-out-top/--cb-out-bottom: quanto il pacco esce sopra/sotto il box.
   - --cb-pad-x/--cb-grid-cols: il wrap e una griglia con le STESSE colonne e lo STESSO padding
     del box, cosi il disclaimer (fuori dal box) si aggancia alla colonna del testo.
   - --cb-visual-w: larghezza del pacco. */
.contest-banner-wrap {
  --cb-out-top: 56px;
  --cb-out-bottom: 44px;
  --cb-pad-x: 48px;
  --cb-visual-w: 480px;
  --cb-grid-cols: minmax(0, .6fr) minmax(0, 1.15fr) minmax(0, 1.55fr);

  display: grid;
  grid-template-columns: var(--cb-grid-cols);
  column-gap: 24px;
  margin: calc(var(--cb-out-top) + 24px) 0 calc(var(--cb-out-bottom) + 24px);
  padding: 0 var(--cb-pad-x);
}

.contest-banner {
  --cb-pad: 48px;          /* padding verticale */
  --cb-rays-x: 37.3%;      /* centro dei raggi di luce (sul pacco) */
  --cb-rays-y: 55%;
  --cb-rays-r: 480px;      /* raggio della sfumatura dei raggi */

  position: relative;
  isolation: isolate;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--cb-grid-cols);
  grid-template-areas: "logo visual text";
  align-items: center;
  column-gap: 24px;
  margin-right: calc(-1 * var(--cb-pad-x));
  margin-left: calc(-1 * var(--cb-pad-x));
  padding: var(--cb-pad) var(--cb-pad-x);
  border-radius: var(--tc-radius-default);
  background-color: var(--tc-primary);
  color: var(--tc-white);
}

/* raggi di luce dietro al pacco: solo gradienti CSS, nessuna immagine */
.contest-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--cb-rays-x) var(--cb-rays-y), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%),
    repeating-conic-gradient(
      from -3deg at var(--cb-rays-x) var(--cb-rays-y),
      rgba(255, 255, 255, .11) 0deg 5deg,
      rgba(255, 255, 255, 0) 5.6deg 14.4deg,
      rgba(255, 255, 255, .11) 15deg
    );
  -webkit-mask-image: radial-gradient(circle var(--cb-rays-r) at var(--cb-rays-x) var(--cb-rays-y), #000 25%, transparent 100%);
  mask-image: radial-gradient(circle var(--cb-rays-r) at var(--cb-rays-x) var(--cb-rays-y), #000 25%, transparent 100%);
  pointer-events: none;
}

.contest-banner__logo {
  grid-area: logo;
}

.contest-banner__logo img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.contest-banner__visual {
  grid-area: visual;
  display: flex;
  justify-content: center;
}

/* larghezza fissa per breakpoint: il pacco puo invadere le colonne vicine, il box non lo taglia */
.contest-banner__visual img {
  display: block;
  flex-shrink: 0;
  width: var(--cb-visual-w);
  max-width: none;
  height: auto;
  margin-top: calc(-1 * (var(--cb-out-top) + var(--cb-pad)) - var(--cb-visual-w) * .02);
  margin-bottom: calc(-1 * (var(--cb-out-bottom) + var(--cb-pad)) - var(--cb-visual-w) * .04);
  /* spostamento a sinistra con la proprieta translate (non transform), cosi si somma allo scale dell'animazione */
  translate: calc(var(--cb-visual-w) * -.1) 0;
}

.contest-banner__text {
  grid-area: text;
}

/* 32-36px bold e 24px regular = "testo grande" WCAG: bianco su #0099CD (3.26:1) supera 3:1 */
.contest-banner__title {
  margin: 0 0 12px;
  color: var(--tc-white);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.contest-banner__subtitle {
  margin: 0 0 32px;
  font-size: 1.5rem;
  line-height: 1.3;
}

.contest-banner__cta {
  border-radius: var(--tc-radius-min);
  font-size: .875rem;
  font-weight: 700;
}

.contest-banner__cta:focus-visible {
  outline: 2px solid var(--tc-white);
  outline-offset: 3px;
}

/* disclaimer: fuori dal box verde, sotto, allineato a destra, parte subito dopo il centro del pacco.
   #6D7278 su bianco = ~4.86:1, supera WCAG AA 4.5:1 */
.contest-banner__disclaimer {
  grid-column: -2;
  margin: 8px calc(-1 * var(--cb-pad-x)) 0 calc(var(--cb-visual-w) * -.41);
  color: var(--tc-grey-text);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
}

.contest-banner__disclaimer a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- animazione zoom-in (classi aggiunte da js/contest-banner.js) ---------- */
.contest-banner--zoom .contest-banner__visual img {
  opacity: 0;
  transform: scale(.6);
  transform-origin: 50% 65%;
}

.contest-banner--zoom-in .contest-banner__visual img {
  animation: contest-banner-zoom-in .8s cubic-bezier(.34, 1.45, .64, 1) both;
}

@keyframes contest-banner-zoom-in {
  from { opacity: 0; transform: scale(.6); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .contest-banner--zoom .contest-banner__visual img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- responsive ---------- */

/* container 1140px */
@media (max-width: 1399px) {
  .contest-banner-wrap { --cb-visual-w: 420px; }
  .contest-banner__title { font-size: 2rem; }
}

/* container 960px */
@media (max-width: 1199px) {
  .contest-banner-wrap {
    --cb-pad-x: 32px;
    --cb-visual-w: 360px;
  }

  .contest-banner { --cb-pad: 40px; }
  .contest-banner__title { font-size: 1.75rem; }
  .contest-banner__subtitle { margin-bottom: 24px; }
}

/* tablet: pacco a sinistra su due righe, logo sopra il testo */
@media (max-width: 991px) and (min-width: 48em) {
  .contest-banner-wrap {
    --cb-out-top: 48px;
    --cb-out-bottom: 36px;
    --cb-grid-cols: minmax(0, 1fr) minmax(0, 1.3fr);
    --cb-visual-w: 330px;
  }

  .contest-banner__disclaimer {
    grid-column: 1 / -1;
    margin-left: calc(-1 * var(--cb-pad-x));
  }

  .contest-banner {
    --cb-rays-x: 25%;
    --cb-rays-y: 50%;
    --cb-rays-r: 380px;

    grid-template-areas:
      "visual logo"
      "visual text";
    row-gap: 16px;
  }

  .contest-banner__logo img { max-width: 190px; }
}

/* mobile: una colonna centrata, il pacco esce solo sopra */
@media (max-width: 47.9375em) {
  .contest-banner-wrap {
    --cb-out-top: 48px;
    --cb-pad-x: 20px;
    --cb-grid-cols: minmax(0, 1fr);
    --cb-visual-w: 270px;

    margin-bottom: 32px;
  }

  .contest-banner__disclaimer {
    margin-left: calc(-1 * var(--cb-pad-x));
    text-align: center;
  }

  .contest-banner {
    --cb-pad: 32px;
    --cb-rays-x: 50%;
    --cb-rays-y: 90px;
    --cb-rays-r: 300px;

    grid-template-areas:
      "visual"
      "logo"
      "text";
    row-gap: 16px;
    text-align: center;
  }

  .contest-banner__logo img {
    max-width: 190px;
    margin: 0 auto;
  }

  .contest-banner__visual img {
    margin-bottom: calc(-1 * var(--cb-visual-w) * .04);
  }

  .contest-banner__title { font-size: 1.5rem; }

  /* 19px bold = testo grande WCAG anche su mobile */
  .contest-banner__subtitle {
    font-size: 1.2rem;
    font-weight: 700;
  }
}