/* ==========================================================================
   DESIGNER EDITION - HEADER CARDS CON FUSIONE DI FIORI & RETI DINAMICHE
   - Nessun logo ripetuto sulla testata delle card.
   - Composizione artistica con 2 o 3 veri fiori ufficiali fusi armoniosamente
     (diverse dimensioni, rotazioni, sfumature di trasparenza e sovrapposizioni).
   - Reti geometriche/neurali completamente DIVERSE e uniche per ogni card:
     * Card 1: Network a costellazione fluida (connessione didattica docenti)
     * Card 2: Rete neurale ad albero/data flow (formazione e tech)
     * Card 3: Nodi ad arco circolare e onde di diffusione (brand e partnership)
     * Card 4: Reticolo geometrico poligonale creativo (editoria e scrittura)
     * Card 5 (Risorse 1): Rete a matrice prismatica (geometria e calcolo)
     * Card 6 (Risorse 2): Costellazione ad anelli concentrici (sfide e problem solving)
     * Card 7 (Risorse 3): Onde organiche armoniche e nodi di calma (mindfulness)
     * Card 8 (Risorse 4): Struttura molecolare a nido d'ape (scienze e laboratorio)
   ========================================================================== */

/* Header Card: altezza generosa e posizionamento relativo */
.designer-header {
  height: 215px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 20px;
}

/* Palette Gradienti Morbidi e Raffinati per l'Header */
.grad-coral-sun {
  background: linear-gradient(135deg, #FF6B8B 0%, #FFA07A 50%, #48CAE4 100%);
}

.grad-teal-mint {
  background: linear-gradient(135deg, #00B4D8 0%, #00C49F 50%, #52B788 100%);
}

.grad-yellow-peach {
  background: linear-gradient(135deg, #FFB703 0%, #FB8500 45%, #FF758C 100%);
}

.grad-violet-magenta {
  background: linear-gradient(135deg, #7209B7 0%, #D80064 50%, #FF6B8B 100%);
}

.grad-cyan-azure {
  background: linear-gradient(135deg, #1D70B8 0%, #00B4D8 50%, #48E5C2 100%);
}

.grad-pink-rose {
  background: linear-gradient(135deg, #FF758C 0%, #FF7EB3 50%, #70A6FF 100%);
}

.grad-emerald-leaf {
  background: linear-gradient(135deg, #2D6A4F 0%, #52B788 50%, #74C69D 100%);
}

.grad-amber-orange {
  background: linear-gradient(135deg, #F77F00 0%, #FCBF49 50%, #EAE2B7 100%);
}

/* --- Fusione Armonica di Fiori Ufficiali --- */
.flower-cluster-left {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 210px;
  height: 210px;
  pointer-events: none;
  z-index: 1;
}

/* Fiore primario grande */
.flower-cluster-left .fl-primary {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 0;
  left: 0;
  object-fit: contain;
  opacity: 0.88;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
  transform: rotate(-10deg);
}

/* Secondo fiore fuso e sovrapposto a contrasto */
.flower-cluster-left .fl-secondary {
  position: absolute;
  width: 105px;
  height: 105px;
  bottom: 0px;
  right: 0px;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  transform: rotate(25deg);
}

/* Terzo fiorellino d'accento che spunta */
.flower-cluster-left .fl-tertiary {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 15px;
  right: 25px;
  object-fit: contain;
  opacity: 0.8;
  transform: rotate(45deg);
}

/* Fiorellino d'accento fluttuante in alto a destra */
.fl-accent-topright {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 55px;
  height: 55px;
  object-fit: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* --- Reti Neurali & Geometriche Vettoriali SVG Differenziate --- */
.neural-network-svg {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 190px;
  height: 155px;
  pointer-events: none;
  z-index: 1;
}

.neural-network-svg circle {
  fill: #ffffff;
  transition: r 0.3s ease;
}

.neural-network-svg line {
  stroke: #ffffff;
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.45;
}

.neural-network-svg path {
  stroke: #ffffff;
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  opacity: 0.45;
}

/* Effetto interattivo al passaggio del mouse sull'header */
.canva-post-card:hover .neural-network-svg line,
.canva-post-card:hover .neural-network-svg path {
  opacity: 0.75;
}

.canva-post-card:hover .flower-cluster-left .fl-primary {
  transform: rotate(-4deg) scale(1.04);
}

.canva-post-card:hover .flower-cluster-left .fl-secondary {
  transform: rotate(32deg) scale(1.08);
}