/* ============================================================
   GIULIA.CSS — sostituisce lo script cdn.tailwindcss.com
   ============================================================
   La pagina Giulia.html usava lo script "cdn.tailwindcss.com",
   che genera il CSS via JavaScript nel browser dell'utente ad
   ogni caricamento: è comodo in fase di bozza, ma la stessa
   documentazione di Tailwind sconsiglia di usarlo in un sito
   pubblicato (più lento, dipende da un servizio esterno,
   nessuna cache reale). Questo file contiene solo le classi
   Tailwind effettivamente usate in Giulia.html, scritte come
   CSS normale: stesso risultato visivo, nessuno script esterno
   da scaricare ed eseguire. Se in futuro aggiungi nuove classi
   "utility" (es. "mb-5", "text-yellow-400") a Giulia.html,
   ricordati di aggiungerle anche qui — altrimenti non avranno
   effetto. Vedi MINIGUIDA_AMMINISTRAZIONE.md.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: #0a0a0a;
  color: #f1f1f1;
  scroll-behavior: smooth;
}
.font-sans { font-family: 'Cormorant Garamond', serif; }

/* Layout */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.w-full { width: 100%; }
.w-56 { width: 14rem; }
.h-56 { height: 14rem; }
.h-96 { height: 24rem; }
.w-fit { width: fit-content; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.-mt-16 { margin-top: -4rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Tipografia */
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }
.leading-relaxed { line-height: 1.625; }
.text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }

/* Sfondi */
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }

/* Bordi e ombre */
.border { border-width: 1px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-gray-600 { border-color: #4b5563; }
.border-gray-700 { border-color: #374151; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.35); }

/* Immagini */
.object-cover { object-fit: cover; }

/* Interazioni / transizioni */
.transition { transition: all 0.2s ease; }
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
.duration-300 { transition-duration: 0.3s; }
.hover\:bg-gray-600:hover { background-color: #4b5563; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px rgba(0,0,0,0.4); }
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-4:focus { box-shadow: 0 0 0 4px rgba(107,114,128,0.5); }
.focus\:ring-gray-500:focus { box-shadow: 0 0 0 4px rgba(107,114,128,0.5); }

/* Icone (dimensione allineata alle classi FontAwesome usate qui) */
.text-2xl.social-icon { font-size: 1.5rem; }

/* Componenti specifici della pagina (già presenti prima) */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(139, 138, 138, 0.3), rgba(0, 0, 0, 0.579));
}
.social-icon {
  transition: all 0.3s ease;
}
.social-icon:hover {
  transform: translateY(-3px);
  color: #e4d7f0;
}
.gradient-text {
  background: linear-gradient(45deg, #303030, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-bg {
  background-color: rgba(26,26,26,0.7);
}

/* ===== VARIANTI RESPONSIVE (breakpoint "md" di Tailwind = 768px) ===== */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:items-start { align-items: flex-start; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-5xl { font-size: 3rem; }
}