/* Imsouane Travel — Single Listing + Archive Card Styles */

/* ===== Gallery Bento Grid ===== */
.im-hero-gallery { padding-bottom: 1.5rem; }
.im-gallery-bento {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0.5rem;
	border-radius: var(--radius-xl, 1rem);
	overflow: hidden;
	aspect-ratio: 3/2;
}
.im-gallery-bento--5 {
	grid-template-columns: 2fr 1fr;
}
.im-gallery-main {
	overflow: hidden;
	cursor: pointer;
	background: var(--color-dark);
}
.im-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-gallery-side {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0.5rem;
}
.im-gallery-thumb {
	overflow: hidden;
	cursor: pointer;
	position: relative;
	background: var(--color-dark);
}
.im-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-gallery-thumb--last::after {
	content: attr(data-count);
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 46, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 1.25rem;
}
.im-gallery-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 26, 46, 0.55);
	color: white;
	font-weight: 700;
	font-size: 1.25rem;
	pointer-events: none;
	z-index: 2;
}
.im-gallery-single { border-radius: var(--radius-xl, 1rem); overflow: hidden; cursor: pointer; background: var(--color-dark); }
.im-gallery-single img { width: 100%; max-height: 480px; object-fit: cover; display: block; }

/* ===== Lightbox ===== */
.im-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(26, 26, 46, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
.im-lightbox--open { opacity: 1; visibility: visible; }
.im-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1002;
	background: rgba(255,255,255,0.15);
	border: none;
	color: white;
	font-size: 2rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.im-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.im-lightbox-prev,
.im-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1002;
	background: rgba(255,255,255,0.15);
	border: none;
	color: white;
	font-size: 2.5rem;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.im-lightbox-prev { left: 1rem; }
.im-lightbox-next { right: 1rem; }
.im-lightbox-prev:hover,
.im-lightbox-next:hover { background: rgba(255,255,255,0.25); }
.im-lightbox-img-wrap { max-width: 90vw; max-height: 85vh; }
.im-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.im-lightbox-counter {
	color: rgba(255,255,255,0.7);
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

/* ===== Listing Layout (Two Column) ===== */
.im-listing-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: 1.5rem 0 3rem;
}
@media (min-width: 768px) {
	.im-listing-layout {
		grid-template-columns: 1fr 320px;
	}
}
@media (min-width: 1024px) {
	.im-listing-layout {
		grid-template-columns: 1fr 360px;
	}
}

/* ===== Listing Header ===== */
.im-listing-meta-top { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.im-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}
.im-badge--category { background: var(--color-ocean); color: white; }
.im-badge--sub { background: var(--color-sand-100); color: var(--color-dark); }
.im-listing-title {
	font-family: var(--font-display, serif);
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 0.75rem;
	line-height: 1.15;
}
.im-listing-meta-bar {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--color-dark);
	opacity: 0.8;
	margin-bottom: 1.25rem;
}
.im-rating { display: flex; align-items: center; gap: 0.375rem; }
.im-rating strong { font-weight: 600; }
.im-rating-count { opacity: 0.6; }
.im-location-tag { display: flex; align-items: center; gap: 0.25rem; }
.im-price-tag { font-weight: 600; }

/* ===== Quick Actions ===== */
.im-quick-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-sand-200);
}
.im-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.813rem;
	font-weight: 600;
	border: 1px solid var(--color-sand-200);
	background: white;
	color: var(--color-dark);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
}
.im-action-btn:hover { border-color: var(--color-terracotta); color: var(--color-terracotta); background: var(--color-terracotta-50); }
.im-action-btn--whatsapp { background: #25D366; color: white; border-color: #25D366; }
.im-action-btn--whatsapp:hover { background: #20bd5a; border-color: #20bd5a; color: white; }

/* ===== Sections ===== */
.im-section { margin-bottom: 2.5rem; }
.im-section-title {
	font-family: var(--font-display, serif);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--color-dark);
	margin-bottom: 1rem;
}
.im-description { font-size: 0.938rem; line-height: 1.7; color: var(--color-dark); opacity: 0.85; }
.im-description--collapsed { max-height: 200px; overflow: hidden; position: relative; }
.im-description--collapsed::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(transparent, var(--color-cream));
}
.im-read-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-ocean);
	background: none;
	border: none;
	cursor: pointer;
}
.im-read-more-toggle:hover { color: var(--color-terracotta); }
.im-description--collapsed ~ .im-read-more-toggle .im-read-less-text { display: none; }
.im-description:not(.im-description--collapsed) ~ .im-read-more-toggle .im-read-more-text { display: none; }

/* ===== Highlights Grid ===== */
.im-highlights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.im-highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-sand-50);
	border-radius: var(--radius-lg, 0.75rem);
}
.im-highlight-label { display: block; font-size: 0.75rem; color: var(--color-dark); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.05em; }
.im-highlight-value { font-weight: 600; font-size: 0.875rem; color: var(--color-dark); }

/* ===== Amenities Grid ===== */
.im-amenities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.5rem;
}
.im-amenity-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-dark);
	opacity: 0.85;
}

/* ===== Opening Hours ===== */
.im-hours-table { border: 1px solid var(--color-sand-200); border-radius: var(--radius-lg, 0.75rem); overflow: hidden; }
.im-hours-row {
	display: flex;
	justify-content: space-between;
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	border-bottom: 1px solid var(--color-sand-100);
}
.im-hours-row:last-child { border-bottom: none; }
.im-hours-day { font-weight: 600; color: var(--color-dark); }
.im-hours-time { color: var(--color-dark); opacity: 0.7; }

/* ===== Map ===== */
.im-map-address { font-size: 0.875rem; color: var(--color-dark); opacity: 0.6; margin-bottom: 0.5rem; }
.im-map-embed iframe { display: block; }

/* ===== Sidebar ===== */
.im-sidebar-sticky { position: sticky; top: 5rem; }
.im-sidebar-card {
	background: white;
	border: 1px solid var(--color-sand-200);
	border-radius: var(--radius-xl, 1rem);
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.im-sidebar-card--cta { padding: 1.5rem; }
.im-sidebar-price { margin-bottom: 1rem; }
.im-sidebar-price-value { font-size: 1.5rem; font-weight: 700; color: var(--color-dark); }
.im-sidebar-card-title {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.813rem;
	font-weight: 700;
	color: var(--color-dark);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}
.im-sidebar-info-list { display: flex; flex-direction: column; gap: 0.75rem; }
.im-info-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.813rem; color: var(--color-dark); }
.im-info-row a { color: var(--color-ocean); text-decoration: none; }
.im-info-row a:hover { color: var(--color-terracotta); }

/* ===== Buttons ===== */
.im-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.875rem;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
}
.im-btn--primary { background: var(--color-terracotta); color: white; }
.im-btn--primary:hover { background: var(--color-terracotta-600); }
.im-btn--outline { background: transparent; border: 2px solid var(--color-terracotta); color: var(--color-terracotta); }
.im-btn--outline:hover { background: var(--color-terracotta-50); }
.im-btn--ghost { background: transparent; border: 1px solid var(--color-sand-300); color: var(--color-dark); }
.im-btn--ghost:hover { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.im-btn--full { width: 100%; margin-bottom: 0.5rem; }

/* ===== Similar Items ===== */
.im-similar-scroll {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.im-similar-scroll::-webkit-scrollbar { height: 6px; }
.im-similar-scroll::-webkit-scrollbar-track { background: var(--color-sand-100); border-radius: 3px; }
.im-similar-scroll::-webkit-scrollbar-thumb { background: var(--color-sand-300); border-radius: 3px; }
.im-similar-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
	background: white;
	border: 1px solid var(--color-sand-200);
	transition: box-shadow 0.2s;
}
.im-similar-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.im-similar-card a { text-decoration: none; color: inherit; }
.im-similar-card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--color-sand-100); }
.im-similar-card-img img { width: 100%; height: 100%; object-fit: cover; }
.im-similar-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; }
.im-similar-card-body { padding: 0.75rem; }
.im-similar-card-title { font-size: 0.875rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-similar-card-meta { display: flex; gap: 0.75rem; align-items: center; font-size: 0.75rem; }
.im-similar-card-rating { display: flex; align-items: center; gap: 0.25rem; color: var(--color-dark); }
.im-similar-card-price { font-weight: 600; color: var(--color-dark); }

/* ===== Mobile CTA Bar ===== */
.im-mobile-cta-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: white;
	border-top: 1px solid var(--color-sand-200);
	padding: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}
@media (max-width: 767px) {
	.im-mobile-cta-bar { display: flex; }
	.im-listing-content { padding-bottom: 5rem; }
}
.im-mobile-cta-info { display: flex; align-items: center; gap: 0.75rem; }
.im-mobile-cta-price { font-weight: 700; font-size: 1.125rem; }
.im-mobile-cta-rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.813rem; }

/* ===== Archive / Card Grid ===== */
.im-archive-header { border-bottom: 1px solid var(--color-sand-200); }
.im-card {
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
	background: white;
	border: 1px solid var(--color-sand-200);
	transition: box-shadow 0.2s, transform 0.2s;
}
.im-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.im-card a { text-decoration: none; color: inherit; display: block; }
.im-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-sand-100); }
.im-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; }
.im-card-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: 0.688rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: white;
	color: var(--color-dark);
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.im-card-body { padding: 1rem; }
.im-card-title { font-size: 1rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.375rem; line-height: 1.3; }
.im-card-excerpt { font-size: 0.813rem; color: var(--color-dark); opacity: 0.6; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.im-card-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.813rem;
	color: var(--color-dark);
	opacity: 0.8;
	flex-wrap: wrap;
}
.im-card-rating { display: flex; align-items: center; gap: 0.25rem; font-weight: 600; }
.im-card-price { font-weight: 600; }
.im-card-addr { display: flex; align-items: center; gap: 0.25rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.7; }

/* ===== Pagination ===== */
.im-pagination { display: flex; gap: 0.5rem; }
.im-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid var(--color-sand-200);
	color: var(--color-dark);
	text-decoration: none;
	transition: all 0.15s;
}
.im-pagination .page-numbers.current { background: var(--color-terracotta); color: white; border-color: var(--color-terracotta); }
.im-pagination .page-numbers:hover:not(.current) { border-color: var(--color-terracotta); color: var(--color-terracotta); }

/* ===== Empty State ===== */
.im-empty svg { display: block; margin: 0 auto; }