/* =============================================================
   COMPONENTS.CSS — Stili componenti riutilizzabili
   ============================================================= */


/* -------------------------------------------------------------
   TWO-COL — layout a due colonne (usato in layout-chisiamo.php)
   ------------------------------------------------------------- */
@media (min-width: 992px) {
  .two-col {
    column-count: 2;
    column-gap: 2rem;
  }
}


/* -------------------------------------------------------------
   CALLOUT MASCOTTE (cta_mascotte_callout.php)
   ------------------------------------------------------------- */
.mascotte-callout {
  max-width: 120px;
  height: auto;
  position: relative;
  z-index: 2;
}

.custom-callout {
  position: relative;
  background-color: var(--color-brand);
  overflow: visible;
}

/* Freccia mobile: punta verso l'alto verso l'immagine sopra */
.custom-callout::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 24px solid var(--color-brand);
}

/* Freccia desktop: punta a sinistra verso la mascotte */
@media (min-width: 992px) {
  .mascotte-callout {
    margin-right: -10px;
  }

  .custom-callout::before {
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-right: 24px solid var(--color-brand);
    border-left: 0;
  }
}

/* Elemento freccia alternativo (diamond rotated) */
.callout-arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: var(--color-brand);
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}

@media (min-width: 992px) {
  .callout-arrow {
    top: 50%;
    left: -16px;
    transform: translateY(-50%) rotate(45deg);
  }
}

/* Forced colors: bordo esplicito al posto del colore di sfondo */
@media (forced-colors: active) {
  .custom-callout {
    background-color: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  .callout-arrow {
    forced-color-adjust: none;
  }
}


/* -------------------------------------------------------------
   ICONE SVG — .icon-blue, .icon-white
   Usate nel logo SVG inline (header mobile) e in altri contesti
   ------------------------------------------------------------- */
.icon-white { color: var(--bianco) !important; }
.icon-blue  { color: var( --blu-500) !important; }

@media (prefers-color-scheme: dark) {
  .icon-blue  { color: var(--color-text) !important; }
  .icon-white { color: var(--color-text) !important; }
}

@media (forced-colors: active) {
  .icon-blue,
  .icon-white {
    color: ButtonText !important;
    forced-color-adjust: none;
  }
}