/**
 * Navard theme — page section and content-block styles.
 *
 * Loaded after frontend.css. Contains styles for individual homepage
 * sections and content blocks: section heads, hero slider, daily prices
 * tabs, service teams slider, about, consultation form, client logos,
 * latest articles, CTA banner, and their empty states.
 *
 * Design tokens live in palette.css.
 *
 * @package Navard
 */

/* ==========================================================================
   Shared section head (used by most sections)
   ========================================================================== */
.navard-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 60px 0 0;
}

.navard-section-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--navard-dark);
	margin: 0 0 8px;
}

.navard-section-sub {
	color: var(--navard-muted);
	font-size: 15px;
	margin: 0;
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.navard-hero {
	position: relative;
	border-radius: var(--navard-radius-lg);
	overflow: hidden;
	margin-top: 24px;
	margin-bottom: 24px;
	height: 480px;
	background: var(--navard-dark);
}

.navard-hero-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.navard-hero-slide,
.navard-hero-slide-item {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.6s ease;
	display: flex;
	align-items: center;
	padding-inline-start: 80px;
	padding-inline-end: 80px;
}

.navard-hero-slide.is-active,
.navard-hero-slide-item.is-active {
	opacity: 1;
	z-index: 2;
}

.navard-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 70%);
}

.navard-hero-content {
	position: relative;
	z-index: 3;
	max-width: 560px;
	color: var(--navard-surface);
}

.navard-hero-title {
	color: var(--navard-surface);
	font-size: 38px;
	font-weight: 800;
	margin: 0 0 12px;
	line-height: 1.2;
}

.navard-hero-subtitle {
	color: #f1f1f1;
	font-size: 18px;
	margin: 0 0 24px;
}

.navard-hero-button {
	display: inline-block;
	background: var(--navard-primary);
	color: var(--navard-surface);
	padding: 12px 32px;
	border-radius: var(--navard-radius);
	font-weight: 700;
	font-size: 15px;
	transition: background 0.2s ease;
}

.navard-hero-button:hover {
	background: var(--navard-primary-dark);
	color: var(--navard-surface);
}

.navard-hero-prev,
.navard-hero-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15);
	color: var(--navard-surface);
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	transition: background 0.2s ease;
}

.navard-hero-prev:hover,
.navard-hero-next:hover {
	background: rgba(255, 255, 255, 0.3);
}

.navard-hero-prev {
	inset-inline-end: 16px;
}

.navard-hero-next {
	inset-inline-start: 16px;
}

.navard-hero-dots {
	position: absolute;
	bottom: 20px;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 4;
}

.navard-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: 0;
	padding: 0;
	transition: all 0.2s ease;
}

.navard-hero-dot.is-active {
	background: var(--navard-primary);
	width: 28px;
	border-radius: 5px;
}

.navard-hero-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--navard-surface);
	border: 1px dashed var(--navard-border);
	border-radius: var(--navard-radius);
	color: var(--navard-muted);
}

/* ==========================================================================
   Daily prices (tabs + tables)
   ========================================================================== */
.navard-tabs-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 24px;
}

.navard-tab {
	background: var(--navard-surface);
	border: 1px solid var(--navard-border);
	color: var(--navard-text);
	padding: 10px 22px;
	border-radius: var(--navard-radius);
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
}

.navard-tab.is-active,
.navard-tab:hover {
	background: var(--navard-primary);
	color: var(--navard-surface);
	border-color: var(--navard-primary);
}

.navard-tabpanel {
	background: var(--navard-surface);
	border: 1px solid var(--navard-border);
	border-radius: var(--navard-radius-lg);
	padding: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.navard-tabpanel::-webkit-scrollbar {
	height: 8px;
}

.navard-tabpanel::-webkit-scrollbar-thumb {
	background: var(--navard-border);
	border-radius: 4px;
}

.navard-tabpanel::-webkit-scrollbar-thumb:hover {
	background: var(--navard-muted);
}

.navard-price-fallback {
	padding: 40px 20px;
	text-align: center;
	color: var(--navard-muted);
	background: var(--navard-background);
	border-radius: var(--navard-radius);
}

.navard-tabpanel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.navard-tabpanel thead th {
	background: var(--navard-dark);
	color: var(--navard-surface);
	padding: 12px 14px;
	text-align: start;
	font-weight: 700;
	white-space: nowrap;
}

.navard-tabpanel tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--navard-border);
	white-space: nowrap;
}

.navard-tabpanel tbody tr:hover {
	background: var(--navard-background);
}

.navard-tabpanel .navard-up {
	color: var(--navard-success);
	font-weight: 700;
}

.navard-tabpanel .navard-down {
	color: var(--navard-danger);
	font-weight: 700;
}

.navard-tabpanel .navard-contact-only {
	color: var(--navard-primary);
	font-weight: 700;
}

/* ==========================================================================
   Service teams slider
   ========================================================================== */
.navard-teams-slider {
	position: relative;
	overflow: visible;
	padding-inline: 8px;
}

.navard-teams-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--navard-surface);
	border: 1px dashed var(--navard-border);
	border-radius: var(--navard-radius);
	color: var(--navard-muted);
}

.navard-teams-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 8px;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.navard-teams-track:active {
	cursor: grabbing;
}

.navard-teams-track::-webkit-scrollbar {
	display: none;
}

.navard-team-card-item,
.navard-team-card {
	flex: 0 0 calc(33.333% - 14px);
	scroll-snap-align: start;
	background: var(--navard-surface);
	border: 1px solid var(--navard-border);
	border-radius: var(--navard-radius-lg);
	overflow: hidden;
	box-shadow: var(--navard-shadow-sm);
	transition: box-shadow 0.2s ease;
}

.navard-team-card-item:hover,
.navard-team-card:hover {
	box-shadow: var(--navard-shadow-md);
}

.navard-team-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.navard-team-image {
	width: 100%;
	height: 220px;
	overflow: hidden;
	background: var(--navard-background);
}

.navard-team-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.navard-team-body {
	padding: 18px;
}

.navard-team-name {
	font-size: 18px;
	margin: 0 0 6px;
	color: var(--navard-dark);
}

.navard-team-desc {
	font-size: 13px;
	color: var(--navard-primary);
	font-weight: 600;
	margin: 0 0 4px;
}

.navard-team-desc2 {
	font-size: 13px;
	color: var(--navard-muted);
	margin: 0;
}

/* Team slider arrows (shared with generic slider arrows in frontend.css) */
.navard-teams-slider .navard-slider-prev,
.navard-teams-slider .navard-slider-next {
	top: 110px;
	transform: none;
}

.navard-teams-slider .navard-slider-prev:hover,
.navard-teams-slider .navard-slider-next:hover {
	transform: scale(1.08);
}

[dir="rtl"] .navard-teams-slider .navard-slider-prev,
[dir="rtl"] .navard-teams-slider .navard-slider-next {
	transform: scaleX(-1);
}

[dir="rtl"] .navard-teams-slider .navard-slider-prev:hover,
[dir="rtl"] .navard-teams-slider .navard-slider-next:hover {
	transform: scaleX(-1) scale(1.08);
}

/* ==========================================================================
   About section
   ========================================================================== */
.navard-about {
	padding-top: 60px;
	padding-bottom: 60px;
}

.navard-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.navard-about-media img {
	width: 100%;
	border-radius: var(--navard-radius-lg);
	display: block;
}

.navard-about-text {
	color: var(--navard-text);
	line-height: 1.9;
	margin-bottom: 0px;
}

.navard-about-features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.navard-about-features li {
	padding: 8px 0;
	padding-inline-start: 28px;
	position: relative;
	color: var(--navard-dark);
	font-weight: 500;
}

.navard-about-features li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-color: var(--navard-primary);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.navard-about-link {
	display: inline-block;
	background: var(--navard-primary);
	color: var(--navard-surface);
	padding: 10px 28px;
	border-radius: var(--navard-radius);
	font-weight: 600;
	transition: background 0.2s ease;
}

.navard-about-link:hover {
	background: var(--navard-primary-dark);
	color: var(--navard-surface);
}

/* ==========================================================================
   Consultation section (shell around the form block)
   ========================================================================== */
.navard-consult-section {
	max-width: 920px;
	margin-inline: auto;
	padding-top: 60px;
	padding-bottom: 60px;
}

/* ==========================================================================
   Client logos
   ========================================================================== */
.navard-clients {
	padding-top: 0;
	padding-bottom: 60px;
}

.navard-clients-track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.navard-client-logo {
	display: inline-block;
	max-width: 180px;
	max-height: 80px;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	filter: grayscale(100%);
}

.navard-client-logo:hover {
	opacity: 1;
	filter: none;
}

.navard-client-logo img {
	max-height: 80px;
	width: auto;
}

.navard-clients-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--navard-surface);
	border: 1px dashed var(--navard-border);
	border-radius: var(--navard-radius);
	color: var(--navard-muted);
}

/* ==========================================================================
   Latest articles
   ========================================================================== */
.navard-articles {
	padding-top: 0;
	padding-bottom: 40px;
}

.navard-articles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.navard-article-card {
	background: var(--navard-surface);
	border: 1px solid var(--navard-border);
	border-radius: var(--navard-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.navard-article-card:hover {
	box-shadow: var(--navard-shadow-md);
	transform: translateY(-2px);
}

.navard-article-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--navard-background);
}

.navard-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.navard-article-card:hover .navard-article-thumb img {
	transform: scale(1.05);
}

.navard-article-body {
	padding: 16px;
}

.navard-article-date {
	color: var(--navard-muted);
	font-size: 12px;
	display: block;
	margin-bottom: 6px;
}

.navard-article-title {
	font-size: 16px;
	margin: 0 0 8px;
	line-height: 1.5;
}

.navard-article-title a {
	color: var(--navard-dark);
}

.navard-article-title a:hover {
	color: var(--navard-primary);
}

.navard-article-excerpt {
	color: var(--navard-muted);
	font-size: 13px;
	margin: 0 0 12px;
	line-height: 1.7;
}

.navard-article-more {
	color: var(--navard-primary);
	font-size: 13px;
	font-weight: 600;
}

.navard-article-more:hover {
	color: var(--navard-primary-dark);
}

.navard-articles-empty {
	padding: 40px 20px;
	text-align: center;
	background: var(--navard-surface);
	border: 1px dashed var(--navard-border);
	border-radius: var(--navard-radius);
	color: var(--navard-muted);
}

@media (max-width: 1024px) {
	.navard-articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	.navard-articles-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Final CTA banner
   ========================================================================== */
.navard-cta {
	background: linear-gradient(135deg, var(--navard-dark) 0%, #3a3a3a 100%);
	color: var(--navard-surface);
	padding: 60px 24px;
	margin-top: 60px;
}

.navard-cta-inner {
	max-width: var(--navard-wide-size);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.navard-cta-title {
	color: var(--navard-surface);
	font-size: 26px;
	margin: 0 0 8px;
}

.navard-cta-sub {
	color: #cccccc;
	margin: 0;
}

.navard-cta-action {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.navard-cta-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--navard-surface);
	padding: 12px 22px;
	border-radius: var(--navard-radius);
	font-size: 20px;
	font-weight: 700;
	direction: ltr;
}

.navard-cta-phone:hover {
	background: rgba(255, 255, 255, 0.18);
	color: var(--navard-surface);
}

.navard-cta-button {
	display: inline-block;
	background: var(--navard-primary);
	color: var(--navard-surface);
	padding: 12px 32px;
	border-radius: var(--navard-radius);
	font-weight: 700;
	transition: background 0.2s ease;
}

.navard-cta-button:hover {
	background: var(--navard-primary-dark);
	color: var(--navard-surface);
}