/**
 * Components CSS per Mauxa
 * Stili per componenti specifici e elementi UI riutilizzabili
 */

/* ========================================
   CARD COMPONENTS
======================================== */

/* Base card styles */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300;
}

.card:hover {
    @apply shadow-lg transform -translate-y-1;
}

/* Card variants */
.card-news {
    @apply card;
}

.card-video {
    @apply card relative;
}

.card-gallery {
    @apply card relative group cursor-pointer;
}

/* Card content areas */
.card-header {
    @apply p-4 border-b border-gray-100;
}

.card-body {
    @apply p-4;
}

.card-footer {
    @apply p-4 border-t border-gray-100 bg-gray-50;
}

/* Card media */
.card-media {
    @apply relative overflow-hidden;
}

.card-media img {
    @apply w-full h-full object-cover transition-transform duration-300;
}

.card-media:hover img {
    @apply scale-105;
}

/* ========================================
   BUTTON COMPONENTS
======================================== */

/* Base button */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

/* Button variants */
.btn-primary {
    @apply btn bg-festival-gold text-white hover:bg-amber-600 focus:ring-festival-gold;
}

.btn-secondary {
    @apply btn bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500;
}

.btn-outline {
    @apply btn border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
}

.btn-ghost {
    @apply btn text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:ring-gray-500;
}

/* Button sizes */
.btn-xs {
    @apply px-2 py-1 text-xs;
}

.btn-sm {
    @apply px-3 py-1.5 text-sm;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

.btn-xl {
    @apply px-8 py-4 text-lg;
}

/* Icon buttons */
.btn-icon {
    @apply w-8 h-8 p-0 rounded-md flex items-center justify-center;
}

.btn-icon-sm {
    @apply w-6 h-6 p-0 rounded text-xs;
}

.btn-icon-lg {
    @apply w-10 h-10 p-0 rounded-lg;
}

/* Navigation buttons (per carousel) */
.nav-btn {
    @apply btn-icon bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900;
}

.nav-btn:disabled {
    @apply opacity-50 cursor-not-allowed hover:bg-gray-100;
}

/* ========================================
   FORM COMPONENTS
======================================== */

/* Base input */
.input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-festival-gold focus:border-festival-gold;
}

/* Input variants */
.input-sm {
    @apply px-2 py-1 text-sm;
}

.input-lg {
    @apply px-4 py-3 text-lg;
}

/* Search input */
.search-input {
    @apply input bg-gray-100 border-transparent focus:bg-white;
}

/* Form groups */
.form-group {
    @apply space-y-1;
}

.form-label {
    @apply block text-sm font-medium text-gray-700;
}

.form-error {
    @apply text-sm text-red-600;
}

.form-help {
    @apply text-sm text-gray-500;
}

/* ========================================
   BADGE COMPONENTS
======================================== */

/* Base badge */
.badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
}

/* Badge variants */
.badge-primary {
    @apply badge bg-festival-gold text-white;
}

.badge-secondary {
    @apply badge bg-gray-100 text-gray-800;
}

.badge-dark {
    @apply badge bg-black text-white;
}

.badge-outline {
    @apply badge border border-gray-300 text-gray-700;
}

/* Category badges */
.badge-category {
    @apply badge-dark backdrop-blur-sm;
}

/* ========================================
   OVERLAY COMPONENTS
======================================== */

/* Base overlay */
.overlay {
    @apply absolute inset-0;
}

/* Gradient overlays */
.overlay-gradient-t {
    @apply overlay bg-gradient-to-t from-black/70 via-transparent to-transparent;
}

.overlay-gradient-b {
    @apply overlay bg-gradient-to-b from-black/70 via-transparent to-transparent;
}

.overlay-dark {
    @apply overlay bg-black/50;
}

.overlay-light {
    @apply overlay bg-white/75 backdrop-blur-sm;
}

/* Hover overlays */
.overlay-hover {
    @apply overlay opacity-0 transition-opacity duration-300;
}

.group:hover .overlay-hover {
    @apply opacity-100;
}

/* ========================================
   NAVIGATION COMPONENTS
======================================== */

/* Main navigation */
.nav-main {
    @apply flex items-center space-x-6;
}

.nav-item {
    @apply text-sm font-medium text-gray-900 hover:text-festival-gold transition-colors;
}

.nav-item.active {
    @apply text-festival-gold;
}

/* Dropdown navigation */
.nav-dropdown {
    @apply absolute top-full mt-2 bg-white rounded-lg shadow-lg border border-gray-200 py-2 min-w-[180px] z-50;
}

.nav-dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:text-festival-gold hover:bg-gray-50 transition-colors;
}

/* Mobile navigation */
.nav-mobile {
    @apply fixed right-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-xl z-50 overflow-y-auto;
}

.nav-mobile-item {
    @apply block py-3 font-medium hover:text-festival-gold transition-colors;
}

/* Breadcrumb navigation */
.breadcrumb {
    @apply flex items-center gap-2 text-sm;
}

.breadcrumb-item {
    @apply font-medium underline hover:text-festival-gold;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* ========================================
   CAROUSEL COMPONENTS
======================================== */

/* Carousel container */
.carousel {
    @apply relative overflow-hidden;
}

/* Carousel track */
.carousel-track {
    @apply flex transition-transform duration-500 ease-out;
}

/* Carousel slide */
.carousel-slide {
    @apply flex-shrink-0;
}

/* Carousel controls */
.carousel-controls {
    @apply flex items-center gap-2;
}

.carousel-nav {
    @apply nav-btn;
}

/* Carousel indicators */
.carousel-indicators {
    @apply flex space-x-1.5;
}

.carousel-indicator {
    @apply w-1.5 h-1.5 rounded-full bg-gray-400 cursor-pointer transition-colors;
}

.carousel-indicator.active {
    @apply bg-gray-800;
}

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

/* Video player container */
.video-player {
    @apply relative w-full aspect-video rounded-lg overflow-hidden shadow-lg group cursor-pointer;
}

/* Video overlay */
.video-overlay {
    @apply overlay-gradient-t;
}

/* Play button */
.play-button {
    @apply absolute inset-0 flex items-center justify-center;
}

.play-button-icon {
    @apply w-16 h-16 md:w-20 md:h-20 bg-white/75 backdrop-blur-sm rounded-full flex items-center justify-center transform group-hover:scale-110 transition-all duration-300 shadow-lg;
}

.play-button-icon i {
    @apply text-2xl md:text-3xl text-festival-gold ml-1;
}

/* Video duration */
.video-duration {
    @apply absolute top-2 right-2 bg-black/60 text-white px-2 py-0.5 rounded text-xs;
}

/* ========================================
   GALLERY COMPONENTS
======================================== */

/* Gallery grid */
.gallery-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
}

/* Gallery item */
.gallery-item {
    @apply relative group cursor-pointer rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all;
}

/* Gallery overlay */
.gallery-overlay {
    @apply overlay-hover flex items-center justify-center;
}

.gallery-icon {
    @apply w-8 h-8 bg-white/75 backdrop-blur-sm rounded-full flex items-center justify-center shadow;
}

/* Gallery count */
.gallery-count {
    @apply absolute top-2 right-2 bg-black/60 text-white px-2 py-0.5 rounded text-xs;
}

/* ========================================
   SIDEBAR COMPONENTS
======================================== */

/* Sidebar container */
.sidebar {
    @apply w-full lg:w-[280px] flex-shrink-0;
}

.sidebar-sticky {
    @apply sticky top-24 space-y-5;
}

/* Sidebar section */
.sidebar-section {
    @apply bg-white rounded-lg shadow-lg p-4;
}

.sidebar-title {
    @apply text-base font-bold mb-3;
}

/* Sidebar article */
.sidebar-article {
    @apply flex gap-2.5;
}

.sidebar-article-image {
    @apply w-14 h-14 flex-shrink-0;
}

.sidebar-article-content {
    @apply flex-1 min-w-0;
}

.sidebar-article-title {
    @apply font-medium text-xs mb-0.5 line-clamp-2;
}

.sidebar-article-excerpt {
    @apply text-xs text-gray-600 line-clamp-2;
}

/* ========================================
   BANNER COMPONENTS
======================================== */

/* Ad banner */
.ad-banner {
    @apply bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500 text-xs font-medium;
}

/* Festival banner */
.festival-banner {
    @apply bg-festival-gold w-full;
}

.festival-banner-content {
    @apply max-w-content mx-auto px-4 sm:px-6 lg:px-8 py-3 text-center;
}

.festival-banner-text {
    @apply text-xs font-bold tracking-[3px] uppercase;
}

/* ========================================
   LOADING COMPONENTS
======================================== */

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-festival-gold;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-6 h-6;
}

.spinner-lg {
    @apply w-8 h-8;
}

/* Loading skeleton */
.skeleton-text {
    @apply skeleton h-4 rounded;
}

.skeleton-title {
    @apply skeleton h-6 rounded;
}

.skeleton-image {
    @apply skeleton aspect-video rounded-lg;
}

/* ========================================
   MODAL COMPONENTS
======================================== */

/* Modal backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-black/50 z-40;
}

/* Modal container */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
}

/* Modal content */
.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply flex items-center justify-between p-6 border-b border-gray-200;
}

.modal-title {
    @apply text-lg font-semibold;
}

.modal-close {
    @apply btn-icon text-gray-400 hover:text-gray-600;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply flex items-center justify-end gap-3 p-6 border-t border-gray-200;
}

/* ========================================
   ALERT COMPONENTS
======================================== */

/* Base alert */
.alert {
    @apply p-4 rounded-lg border;
}

/* Alert variants */
.alert-info {
    @apply alert bg-blue-50 border-blue-200 text-blue-800;
}

.alert-success {
    @apply alert bg-green-50 border-green-200 text-green-800;
}

.alert-warning {
    @apply alert bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-error {
    @apply alert bg-red-50 border-red-200 text-red-800;
}

/* ========================================
   UTILITY COMPONENTS
======================================== */

/* Aspect ratios */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-3-2 {
    aspect-ratio: 3 / 2;
}

/* Content containers */
.content-container {
    @apply max-w-content mx-auto px-4 sm:px-6 lg:px-8;
}

/* Section spacing */
.section {
    @apply py-8;
}

.section-sm {
    @apply py-4;
}

.section-lg {
    @apply py-12;
}

/* Dividers */
.divider {
    @apply border-t border-gray-200 my-6;
}

.divider-vertical {
    @apply border-l border-gray-200 mx-4;
}