/* Wrapper styles moved to style.css */
/* Swiper Stories */
.stories-swiper {
  padding: 0;
}
.stories-swiper .swiper-slide { 
  width: auto; 
  display:flex; 
  justify-content:center; 
  align-items: center;
  margin:0; 
  padding:0; 
  flex-shrink: 0;
  /* La larghezza è calcolata automaticamente da Swiper con slidesPerView numerico */
  box-sizing: border-box;
}
.story-circle {
    width: clamp(44px, 18vw, 92px);
    height: clamp(44px, 18vw, 92px); /* mantiene cerchio e scala col viewport */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: center/cover no-repeat white;
    position: relative;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    overflow: hidden;
    flex: 0 0 auto; /* evita deformazioni nello slider */
    box-sizing: border-box;
    cursor: pointer;
}

/* Desktop + Tablet: icone più grandi e più “presenti” */
@media (min-width: 768px) {
  .story-circle {
    width: clamp(64px, 7vw, 110px);
    height: clamp(64px, 7vw, 110px);
  }
}

.card-swiper { padding: 20px 5px 35px; }
.card-swiper .swiper-slide { width: auto; display:flex; justify-content:center; }
.card-slide {
}
/* Fullscreen stories viewer - Nuovo layout con Swiper wrapper esterno */
.stories-modal .stories-container { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	height: 95vh; 
	max-height: 95vh; 
	box-sizing: border-box; 
	overflow: visible; /* Cambiato da hidden a visible per permettere al contenuto di estendersi */
}

/* Swiper come wrapper esterno - dimensionamento proporzionale */
.stories-modal .stories-viewer { 
    position: relative; 
    width: auto; 
    height: auto; /* Cambiato da 100% ad auto per permettere l'estensione */
    max-height: none; /* Rimosso il limite di 620px per permettere l'estensione completa */
    max-width: 100%; 
    margin: 0 auto; 
    box-sizing: border-box; 
    min-height: 300px;
    background: #e04e39;
    display: flex;
    flex-direction: column;
    /* Aggiungi padding-bottom per includere lo spazio del CTA posizionato assolutamente */
    padding-bottom: 100px; /* Aumentato per garantire spazio sufficiente per CTA (18px bottom + ~62px altezza bottone + margine) */
    /* debug border removed */
}

/* Background per il carosello stesso */
.stories-modal .stories-viewer .swiper-wrapper {
    background: #e04e39;
}

.stories-modal .stories-viewer .swiper-slide { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	height: 100%; 
}

/* Applica il contain solo alle immagini delle slide, non al logo */
.stories-modal .stories-viewer .swiper-slide img { 
    width: 100%; 
    height: 100%; 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* mostra l'intera immagine senza tagli */
    display: block; 
    background: transparent; /* evita effetto sfondo su immagini (es. logo) */
}

/* Stories modal styles moved to style.css */

/* CTA styles moved to style.css */

/* Categories section */
.home-categories { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; width:100%; margin:0 auto; background:transparent; padding:0; }
.home-categories .cat-title { margin:0; font-size:22px; font-weight:700; text-align:center; }
.home-categories .cat-card { display:flex; flex-direction:column; border:none; border-radius:0; overflow:hidden; background:#fff; box-shadow:none; gap:0; }
/* Order: image slider (top), dots, info (bottom). NON usare height:auto/min-height:0 - conflittano con style.css e causano CLS */
.home-categories .cat-swiper { order:1 !important; width:100%; background:transparent; margin:0; padding:0; }
.home-categories .cat-swiper .swiper-wrapper { margin:0; padding:0; }
.home-categories .cat-swiper .swiper-slide { display:flex; align-items:center; justify-content:center; margin:0; padding:0; }
.home-categories .cat-swiper .swiper-slide-active { margin:0; padding:0; }
.home-categories .cat-swiper img { width:100%; height:100%; display:block; object-fit:cover; margin:0; padding:0; }
/* Rimuovi qualsiasi padding/margin dal carosello */
.home-categories .cat-swiper .swiper-container { margin:0; padding:0; }
.home-categories .cat-swiper .swiper-container-initialized { margin:0; padding:0; }
.home-categories .cat-swiper .swiper-slide-active { margin:0 !important; padding:0 !important; }
.home-categories .cat-swiper .swiper-slide-active * { margin:0 !important; padding:0 !important; }
/* Small screens: ensure full cover without height caps */
@media (max-width: 359px) {
  .home-categories .cat-swiper img { max-height:none !important; height:100% !important; object-fit:cover; }
}
.home-categories .cat-cta-block { order:2 !important; background:#e04e39; padding:6px 12px; text-align:center; margin:0; margin-top:0; }
/* Forza rimozione spazio tra carosello e CTA */
.home-categories .cat-swiper + .cat-cta-block { margin-top:0 !important; }
.home-categories .cat-swiper { margin-bottom:0 !important; }
.home-categories .cat-cta-block { margin-top:0 !important; }
/* Slot a dimensione fissa: riserva spazio da subito, overflow:hidden evita che i bullet (aggiunti da Swiper) causino shift */
.home-categories .cat-pagination-slot,
.categoria-page-wrapper .cat-pagination-slot { order:3 !important; margin:6px 0 0; height:26px; min-height:26px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; line-height:0; }
.home-categories .cat-pagination,
.categoria-page-wrapper .cat-pagination { width:100%; text-align:center; padding:0; display:block; pointer-events:auto; position:relative; z-index:2; line-height:0; }
.home-categories .cat-pagination .swiper-pagination-bullet { width:7px; height:7px; background:#f6cac4; border-radius:50%; opacity:1; margin:0 3px; display:inline-block; cursor:pointer; user-select:none; touch-action:manipulation; }
.home-categories .cat-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { cursor:default; }
.home-categories .cat-pagination .swiper-pagination-bullet-active { background:#e04e39; opacity:1; }
.home-categories .cat-cta { color:#fff; text-decoration:none; font-weight:700; font-size:16px; text-transform:uppercase; }
.home-categories .cat-cta:hover { color:#fff; opacity:0.9; }
.home-categories .cat-info { order:4 !important; padding:6px 12px 12px; margin:0; }
.home-categories .cat-service-title { margin:0 0 0; font-size:18px; font-weight:700; color:#111; }
.home-categories .cat-service-desc { margin:0; color:#555; font-size:15px; line-height:1.4; }
@media (min-width: 480px) {
  .home-categories .category-block { width:calc(50% - 10px); }
}
@media (min-width: 768px) {
  .home-categories .category-block { width:calc(33.333% - 14px); }
}

/* Projects section styles moved to style.css */


/* Responsive adjustments per nuovo layout */
@media (max-width: 479px) {
  /* Fullscreen modal swiper on mobile */
  .stories-modal { background:#e04e39 !important; padding:0 !important; }
  .stories-modal .stories-container { background:#e04e39 !important; }
  .stories-modal .stories-viewer { background:#e04e39 !important; }
  .stories-modal .swiper { width:100dvw; height:100dvh; }
  .stories-modal .stories-container { 
    height: 100dvh; 
    max-height: 100dvh; 
    width:100dvw;
    max-width:100dvw;
    padding: 8px 0 0 0 !important; 
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal center in column layout */
    justify-content: flex-start; /* keep items pinned to top */
  }
  .stories-modal .stories-viewer { 
    width:100dvw;
    height:100dvh;
    max-height:100dvh;
    background: transparent;
  }
  .stories-modal .stories-viewer .swiper-wrapper { height:100dvh; width:100dvw; }
  .stories-modal .stories-viewer .swiper-slide img { object-fit: cover !important; }
  /* CTA styles handled in style.css */
}

@media (min-width: 480px) and (max-width: 767px) {
  .stories-modal .stories-container { 
    height: 95vh; 
    max-height: 95vh; 
    padding-top: env(safe-area-inset-top);
    overflow: visible; /* Permette l'estensione del contenuto */
  }
  .stories-modal .stories-viewer { 
    max-height: none; /* Rimuove il limite per permettere l'estensione completa */
    padding-bottom: 100px; /* Aumentato per garantire spazio sufficiente per CTA */
  }
  .stories-modal .stories-viewer .swiper-wrapper {
    background: #e04e39;
  }
  /* Ensure CTA fixed at bottom and solid on mid-mobile widths */
  .stories-modal { background:#e04e39 !important; }
  .stories-modal .stories-container { background:#e04e39 !important; padding:0 !important; }
  .stories-modal .stories-viewer { background:#e04e39 !important; }
  .stories-modal .stories-viewer .swiper-slide img { object-fit: cover !important; }
}

@media (min-width: 768px) {
  .stories-modal .stories-viewer { 
    max-height: none; /* Rimuove il limite per permettere l'estensione completa */
    padding-bottom: 100px; /* Aumentato per garantire spazio sufficiente per CTA */
  }
  .stories-modal .stories-viewer .swiper-wrapper {
    background: #e04e39;
  }
}

/* Pagination as lines for modal viewer */
.swiper-pagination-lines { 
	position: relative; 
	top: auto; 
	bottom: auto; 
	left: auto; 
	right: auto; 
	height: 4px; 
	display: flex; 
	align-items: center; 
	gap: 3px; 
	z-index: 5; 
	width: 100%; 
	margin: 0 auto; 
}

.swiper-pagination-lines .swiper-pagination-bullet { 
	display: block; 
	flex: 1 1 0%; 
	width: auto !important; 
	height: 4px; 
	border-radius: 0; 
	margin: 0 !important; 
	background: #ea8677; 
	opacity: 1; 
}

.swiper-pagination-lines .swiper-pagination-bullet-active { 
	background: #fff; 
}