/* =====================================================================
   TREATMENT PAGE CSS  —  assets/css/treatment-page.css
   Companion stylesheet for: page-template/treatment-page.php

   PURPOSE
   -------
   This file replaces EVERY inline style that existed on treatment
   pages with proper, reusable CSS class-based rules.

   Loaded ONLY on pages that use the "Treatment Page" template.
   Enqueued after style.css so it can supplement/override as needed.

   NAMING CONVENTION
   -----------------
   All classes follow the existing vd- (ValueDent) prefix and
   BEM-style naming already used in style.css.

   HOW TO USE
   ----------
   Assign the class names listed here to your Gutenberg blocks
   using: Block Sidebar → Advanced → Additional CSS class(es)
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. SECTION — COMMON
   ───────────────────────────────────────────────────────────────────── */

/* Inner section spacing — all major content sections */
.vd-overview,
.vd-benefits,
.vd-eligibility,
.vd-cost,
.vd-timeline,
.vd-gallery,
.vd-faqs,
.vd-inline-cta {
	margin-bottom: 3.5rem;
}

/* Section H2 headings — override to a consistent treatment-page size */
.vd-treatment-content .section-title {
	font-size: 1.75rem;
}

/* Intro paragraphs that appear just below section h2s */
.vd-section-intro {
	color: var(--color-text-muted, #64748b);
	margin-bottom: 1.5rem;
	line-height: 1.7;
}


/* ─────────────────────────────────────────────────────────────────────
   2. HERO — BREADCRUMB BAR
   ───────────────────────────────────────────────────────────────────── */

.vd-breadcrumb-bar {
	position: absolute;
	top: var(--header-height, 80px);
	left: 0;
	width: 100%;
	background: rgba(8, 55, 80, 0.95);
	z-index: 10;
	padding: 0.4rem 0;
}

.vd-breadcrumb-bar .vd-breadcrumb {
	margin-bottom: 0;
	justify-content: center;
}

.vd-breadcrumb-bar .vd-breadcrumb a {
	color: #eee;
	text-decoration: none;
}

.vd-breadcrumb-bar .vd-breadcrumb a:hover {
	color: #fff;
}

.vd-breadcrumb-bar .vd-breadcrumb .sep {
	color: #ccc;
}

.vd-breadcrumb-bar .vd-breadcrumb .current {
	color: #48c1cd;
	font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────────────
   3. HERO — TRUST TICKS (CTA widget area)
   Class: .vd-hero-ticks  on the outer wrapper
   Class: .vd-hero-tick   on each individual tick span (optional)
   ───────────────────────────────────────────────────────────────────── */

.vd-hero-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.vd-hero-ticks span {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
}

/* The green check icon inside each tick */
.vd-hero-ticks .fa-check-circle {
	color: #4ade80;
}


/* ─────────────────────────────────────────────────────────────────────
   4. OVERVIEW SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Class: .vd-overview__text  on the text Group block */
.vd-overview__text {
	font-size: 1.1rem;
	line-height: 1.8;
	margin-top: 1.5rem;
}

.vd-overview__text p {
	margin-bottom: 1.1rem;
}


/* ─────────────────────────────────────────────────────────────────────
   5. BENEFITS SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Force the outer container to be a full-width grid */
.vd-benefits-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1.5rem !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
   Dissolve Gutenberg's arbitrary inner wrappers.
   This guarantees the cards become direct children of the .vd-benefits-grid.
*/
.vd-benefits-grid .wp-block-group__inner-container {
	display: contents !important;
}

/* Ensure the cards themselves behave properly inside the grid */
.vd-benefits-grid .vd-benefit-card {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Class: .vd-benefit-card__title  on the title Paragraph inside each card */
.vd-benefit-card .vd-benefit-card__title {
	font-family: var(--font-heading, var(--font-body, sans-serif));
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-primary, #045e88);
	margin-top: 0;
	margin-bottom: var(--space-1, 0.5rem);
}


/* ─────────────────────────────────────────────────────────────────────
   6. ELIGIBILITY SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Force outer container full width */
.vd-eligibility__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Dissolve both the inner container and any nested flex row the user added */
.vd-eligibility__grid .wp-block-group__inner-container,
.vd-eligibility__grid .wp-block-group.is-layout-flex {
	display: contents !important;
}

.vd-eligibility__grid .vd-eligibility__col {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Class: .vd-eligibility__heading  on the heading Paragraph in each column */
.vd-eligibility__heading {
	font-size: 0.95rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Add this alongside .vd-eligibility__heading for the YES column */
.vd-eligibility__heading--yes {
	color: #15803d;
}

/* Add this alongside .vd-eligibility__heading for the NO column */
.vd-eligibility__heading--no {
	color: #b45309;
}

/* Class: .vd-eligibility__note  on the small disclaimer text */
.vd-eligibility__note {
	font-size: 0.8rem;
	margin-top: 0.75rem;
	color: var(--color-text-muted, #64748b);
}

.vd-eligibility__col--yes ul li,
.vd-eligibility__col--no ul li {
	margin-bottom: 0.4rem;
	line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────────────
   7. COST TABLE SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Class: .vd-cost-note  on the small disclaimer below the table */
.vd-cost-note {
	font-size: 0.78rem;
	color: var(--color-text-muted, #64748b);
	margin-top: 0.75rem;
}


/* ─────────────────────────────────────────────────────────────────────
   8. TREATMENT JOURNEY / TIMELINE SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Class: .vd-step-title  on the title element inside each step */
.vd-step-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-dark, #0c2f45);
	margin-top: 0;
	margin-bottom: 0.3rem;
}


/* ─────────────────────────────────────────────────────────────────────
   9. GALLERY SECTION
   ───────────────────────────────────────────────────────────────────── */

/* Force outer container full width */
.vd-gallery__grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	align-items: start;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Dissolve Gutenberg's inner wrappers */
.vd-gallery__grid .wp-block-group__inner-container {
	display: contents !important;
}

.vd-gallery__grid .vd-gallery__case {
	min-width: 0;
	max-width: none !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Class: .vd-gallery__case  on each individual image wrapper Group */
.vd-gallery__case {
	border-radius: var(--radius-xl, 1rem);
	overflow: hidden;
	box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.1));
}

.vd-gallery__case img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.vd-gallery__case:hover img {
	transform: scale(1.04);
}

/* Class: .vd-gallery-cta  on the "View Full Gallery" link wrapper */
.vd-gallery-cta {
	text-align: center;
	margin-top: 1.5rem;
}


/* ─────────────────────────────────────────────────────────────────────
   10. INLINE CTA SECTION  (widget area — same on all treatments)
   ───────────────────────────────────────────────────────────────────── */

.vd-inline-cta__icon i {
	color: #ffffff;
	font-weight: 900;
}

/* Class: .vd-inline-cta__title  on the bold first line */
.vd-inline-cta__title {
	display: block;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

/* Class: .vd-inline-cta__desc  on the secondary description line */
.vd-inline-cta__desc {
	display: block;
	color: rgba(255, 255, 255, 0.7);
}


/* ─────────────────────────────────────────────────────────────────────
   11. BOTTOM CTA SECTION  (widget area — same on all treatments)
   ───────────────────────────────────────────────────────────────────── */

/* Applied by the template automatically — no class needed from editor */
.vd-cta-section__content {
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Class: .vd-cta-section__desc  on the paragraph inside the bottom CTA */
.vd-cta-section__desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.1rem;
	margin-bottom: 2rem;
}


/* ─────────────────────────────────────────────────────────────────────
   12. RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.vd-treatment-content .section-title {
		font-size: 1.45rem;
	}

	.vd-overview__text {
		font-size: 1rem;
	}
}

@media (max-width: 768px) {
	.vd-overview,
	.vd-benefits,
	.vd-eligibility,
	.vd-cost,
	.vd-timeline,
	.vd-gallery,
	.vd-faqs {
		margin-bottom: 2.5rem;
	}

	/* Keep benefits grid as 2 columns on mobile, but reduce gap slightly */
	.vd-benefits-grid {
		gap: 1rem !important;
	}

	/* Stack other grids to single column on mobile */
	.vd-eligibility__grid,
	.vd-gallery__grid {
		grid-template-columns: 1fr !important;
	}

	.vd-hero-ticks {
		flex-direction: column;
		gap: 0.5rem;
	}

	.vd-treatment-content .section-title {
		font-size: 1.3rem;
	}
}