// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

// ============================================================
// DESIGN TOKENS
// ============================================================

:host {
	--hero-h: 240px;
	--card-radius: 20px;
	--item-radius: 14px;
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

// ============================================================
// BARRA COMPATTA MANAGER (header collapsed)
// ============================================================

.mgr-collapsed-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: var(--ion-color-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

	.mgr-collapsed-bar-info {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;

		ion-icon {
			font-size: 18px;
			flex-shrink: 0;
			opacity: 0.92;
		}
	}

	.mgr-collapsed-bar-name {
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mgr-collapsed-bar-action {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		font-weight: 500;
		opacity: 0.92;
		flex-shrink: 0;

		ion-icon {
			font-size: 16px;
		}
	}

	&:active {
		opacity: 0.85;
	}
}

// ============================================================
// HERO
// ============================================================

.hero-section {
	position: relative;
	width: 100%;
	height: var(--hero-h);
	overflow: hidden;

	.hero-image-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		transform: scale(1.04);
	}

	.hero-dark-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.04) 0%,
			rgba(0, 0, 0, 0.12) 40%,
			rgba(0, 0, 0, 0.52) 100%
		);
		pointer-events: none;
	}

	.hero-favorite-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
		--background: rgba(255, 255, 255, 0.2);
		--background-hover: rgba(255, 255, 255, 0.35);
		--border-radius: 50%;
		--padding-start: 8px;
		--padding-end: 8px;
		--box-shadow: none;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.28);

		ion-icon {
			font-size: 22px;
			color: #fff;
			filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));

			&.is-favorite {
				color: #ff3b30;
			}
		}
	}

	.hero-collapse-btn {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 10;
		--background: rgba(0, 0, 0, 0.35);
		--background-hover: rgba(0, 0, 0, 0.5);
		--border-radius: 50%;
		--padding-start: 8px;
		--padding-end: 8px;
		--box-shadow: none;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.28);

		ion-icon {
			font-size: 22px;
			color: #fff;
			filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
		}
	}

	&.hero-fallback {
		background: linear-gradient(135deg,
			var(--ion-color-primary, #1c6ea4) 0%,
			var(--ion-color-primary-shade, #0f4d80) 55%,
			#06335a 100%);

		.hero-image-fallback {
			display: flex;
			align-items: center;
			justify-content: center;
			background:
				radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
				radial-gradient(ellipse at 80% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
				radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.25) 0%, transparent 45%);
			transform: none;
		}

		.hero-fallback-icon {
			font-size: 96px;
			color: rgba(255, 255, 255, 0.92);
			filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
			animation: heroIconIn 0.5s var(--spring) both;
		}
	}
}

@keyframes heroIconIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

// ============================================================
// HOME CONTAINER
// ============================================================

.home-container {
	padding: 0;
	background: var(--ion-background-color, #f8f8f8);

	&.has-hero {
		margin-top: -24px;
		position: relative;
		border-radius: 24px 24px 0 0;
		background: var(--ion-background-color, #f8f8f8);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
		z-index: 1;
	}
}

// ============================================================
// COMPANY HEADER
// ============================================================

.company-header {
	padding: 22px 20px 16px;
}

.company-name {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.6px;
	color: var(--ion-color-dark, #1c1c1e);
	margin: 0 0 5px;
	line-height: 1.1;
}

.company-desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ion-color-medium);
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.info-chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.info-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ion-color-light, #f4f5f8);
	border-radius: 20px;
	padding: 5px 10px 5px 7px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ion-color-dark-shade);
	cursor: pointer;

	ion-icon {
		font-size: 13px;
		color: var(--ion-color-primary);
		flex-shrink: 0;
	}

	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 170px;
	}
}

// ============================================================
// ACTION BUTTONS
// ============================================================

.action-row {
	display: flex;
	gap: 6px;
	padding: 0 16px 20px;
	overflow-x: auto;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.action-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	flex-shrink: 0;
	min-width: 60px;

	span {
		font-size: 11px;
		font-weight: 500;
		color: var(--ion-color-dark-shade);
		white-space: nowrap;
		letter-spacing: 0.1px;
	}
}

.action-pill-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: rgba(var(--ion-color-primary-rgb), 0.07);
	border: 1.5px solid rgba(var(--ion-color-primary-rgb), 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.14s var(--spring), background 0.14s ease;

	ion-icon {
		font-size: 22px;
		color: var(--ion-color-primary);
	}

	.action-pill:active & {
		transform: scale(0.9);
		background: rgba(var(--ion-color-primary-rgb), 0.16);
	}
}

// Tutte le pillole hanno lo stesso stile, come nel target biz-appointments.

// ============================================================
// SEGMENT NAV
// ============================================================

.segment-wrap {
	padding: 0 16px 0;
	border-bottom: 1.5px solid var(--ion-color-light-shade, #e5e6ea);
}

.home-segment {
	--background: transparent;

	ion-segment-button {
		--color: var(--ion-color-medium);
		--color-checked: var(--ion-color-primary);
		--indicator-color: var(--ion-color-primary);
		--indicator-height: 2.5px;
		--border-radius: 0;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.2px;
		min-height: 40px;
		text-transform: uppercase;

		ion-label {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}
	}
}

.seg-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 16px;
	padding: 0 5px;
	border-radius: 8px;
	font-size: 9px;
	font-weight: 800;
	background: rgba(var(--ion-color-primary-rgb), 0.12);
	color: var(--ion-color-primary);
	letter-spacing: 0.3px;
}

// ============================================================
// SECTION HEADER
// ============================================================

.tab-content {
	min-height: 200px;
}

.bookings-section {
	padding: 0;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 16px 12px;
}

.section-title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--ion-color-dark, #1c1c1e);
	margin: 0;
}

.section-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	border-radius: 11px;
	background: var(--ion-color-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 0 8px;
	letter-spacing: 0.2px;
}

// ============================================================
// LOADING + EMPTY STATE
// ============================================================

.loading-wrap {
	display: flex;
	justify-content: center;
	padding: 40px 16px;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 16px 32px;

	.empty-icon-wrap {
		width: 68px;
		height: 68px;
		border-radius: 22px;
		background: var(--ion-color-light, #f4f5f8);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;

		ion-icon {
			font-size: 32px;
			color: var(--ion-color-medium);
		}
	}

	p {
		font-size: 14px;
		color: var(--ion-color-medium);
		margin: 0;
		text-align: center;
		font-weight: 500;
	}
}


.image-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  
 .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; // Nasconde tutte le immagini
    
    &.active {
      display: block; // Mostra solo la attiva
    }
  }

  .arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white; // Colore freccia
    //--background: rgba(0, 0, 0, 0.5); // Sfondo semitrasparente
    --border-radius: 50%;
    z-index: 10;
  }

  .left-arrow {
    left: 5px;
  }

  .right-arrow {
    right: 5px;
  }
}
