/* =========================================================================
   Serene Aesthetics — Unified Components (.s-*)
   --------------------------------------------------------------------------
   Αντικαθιστά τις pageprefixed διπλοκλάσεις:
     mn-*, prp-*, slt-*, cell-*, cc-*, pdo-*, eco2-*, pico-*, gyn-*, antir-*

   Mapping (παλιό → νέο):
     *-bar-chart       → .s-bar-chart        *-table-wrap     → .s-table-wrap
     *-bar-group       → .s-bar-group        *-table-title    → .s-table-title
     *-bar-label       → .s-bar-label        *-table-overflow → .s-table-overflow
     *-bar-track       → .s-bar-track        *-table          → .s-table
     *-bar             → .s-bar              *-areas-list     → .s-areas-list
     *-bar-secondary   → .s-bar--secondary   *-animate        → .s-animate
     *-chart-grid      → .s-chart-grid
     *-chart-info      → .s-chart-info
     *-chart-visual    → .s-chart-visual
     *-advantages-grid → .s-advantages-grid
     *-advantage-card  → .s-advantage-card
     *-advantage-icon  → .s-advantage-icon
     *-indication-card → .s-advantage-card  (ίδιο component)

   ΣΗΜΕΙΩΣΗ — FAQ:
     Τα *-faq-* ΔΕΝ ενοποιούνται εδώ. Το theme παρέχει ήδη accordion μέσω
     .strevinas-doctor-acc__* (theme.css). Στη μετάπτωση χρησιμοποίησε:

       <div class="strevinas-doctor-acc">
         <div class="strevinas-doctor-acc__item">
           <h3 class="strevinas-doctor-acc__heading">
             <button class="strevinas-doctor-acc__trigger" aria-expanded="false">
               <span class="strevinas-doctor-acc__title">Ερώτηση</span>
               <span class="strevinas-doctor-acc__icon" aria-hidden="true"></span>
             </button>
           </h3>
           <div class="strevinas-doctor-acc__panel">…απάντηση…</div>
         </div>
       </div>

   Φιλοσοφία (ευθυγραμμισμένη με theme.css):
     - Μονόχρωμη παλέτα: μαύρο / άσπρο / γκρι μέσω --foreground/--silver/--bone
     - Καθόλου χρωματιστά accents — η ένταση χτίζεται με opacity & hairlines
     - Cormorant Garamond για headings, Inter (300) για body
     - --ease-cinema / --ease-silk για cinematic motion
     - Hover effects με letter-spacing/inset/transform (όπως .service-card-cta)
     - 1px hairlines αντί heavy borders, soft shadows αντί glows
   ========================================================================= */

/* -----------------------------------------------------------------------
   Component-scoped tokens.
   Αν δεν υπάρχει το theme (standalone preview), τα fallbacks του inline
   stylesheet της preview εξασφαλίζουν σωστή απόδοση.
   ----------------------------------------------------------------------- */
:root {
	/* Surfaces & strokes */
	--s-surface:        hsl(0 0% 100% / 0.025);
	--s-surface-hover:  hsl(0 0% 100% / 0.045);
	--s-stroke:         hsl(0 0% 100% / 0.10);
	--s-stroke-strong:  hsl(0 0% 100% / 0.18);
	--s-stroke-hover:   hsl(0 0% 100% / 0.32);

	/* Bars (μονόχρωμα, πάνε από καθαρό λευκό σε silver) */
	--s-bar-track-bg:   hsl(0 0% 100% / 0.06);
	--s-bar-grad:       linear-gradient(180deg, hsl(0 0% 100% / 0.95) 0%, hsl(0 0% 100% / 0.55) 100%);
	--s-bar-grad-2:     linear-gradient(180deg, hsl(0 0% 100% / 0.45) 0%, hsl(0 0% 100% / 0.18) 100%);

	/* Motion */
	--s-stagger:    70ms;
	--s-anim-fast:  0.45s;
	--s-anim-base:  0.75s;
	--s-anim-slow:  1.1s;
	--s-anim-cinema: 1.6s;
}

/* Animation hook στο container ώστε τα παιδιά να ξέρουν να κινηθούν. */
.s-animate { --s-animate-on: 1; }

/* =======================================================================
   1) BAR CHART
   ======================================================================= */
.s-chart-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 2rem 0;
}

@media (min-width: 768px) {
	.s-chart-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		align-items: center;
		gap: 2.5rem;
	}
}

.s-chart-info {
	color: hsl(var(--silver, 0 0% 70%));
	font-size: 0.95rem;
	line-height: 1.75;
	font-weight: 300;
	letter-spacing: 0.01em;
}

.s-chart-info p { margin: 0 0 0.6rem; }
.s-chart-info p:last-child { margin-bottom: 0; }

.s-chart-visual {
	position: relative;
	padding: 1.5rem 1.25rem 1rem;
	background: var(--s-surface);
	border: 1px solid hsl(var(--border, 0 0% 14%));
	overflow: hidden;
	transition: border-color var(--s-anim-base) var(--ease-silk, cubic-bezier(0.22, 1, 0.36, 1));
}

.s-chart-visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(180deg, hsl(0 0% 100% / 0.03) 0 1px, transparent 1px 25%);
	pointer-events: none;
	opacity: 0.5;
}

.s-chart-visual:hover {
	border-color: hsl(var(--foreground, 0 0% 96%) / 0.28);
}

.s-bar-chart {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.75rem;
	align-items: stretch;
	height: 220px;
}

.s-bar-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.s-bar-track {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 64px;
	background: var(--s-bar-track-bg);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	padding: 0 4px;
}

.s-bar-track::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, hsl(0 0% 0% / 0.35) 0%, transparent 28%);
	pointer-events: none;
}

.s-bar,
.s-bar--secondary {
	position: relative;
	flex: 1;
	min-width: 0;
	height: var(--bar-h, 0%);
	background: var(--s-bar-grad);
	box-shadow:
		0 -8px 18px hsl(0 0% 100% / 0.06),
		inset 0 1px 0 hsl(0 0% 100% / 0.35);
	transition: height var(--s-anim-slow) var(--ease-cinema, cubic-bezier(0.65, 0, 0.35, 1));
}

.s-bar::after,
.s-bar--secondary::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 50%;
	background: linear-gradient(180deg, hsl(0 0% 100% / 0.18), transparent);
	pointer-events: none;
}

.s-bar--secondary {
	background: var(--s-bar-grad-2);
	box-shadow:
		0 -8px 18px hsl(0 0% 100% / 0.04),
		inset 0 1px 0 hsl(0 0% 100% / 0.18);
}

/* Animation 0 → --bar-h με stagger ανά μπάρα. */
.s-bar-chart.s-animate .s-bar,
.s-bar-chart.s-animate .s-bar--secondary {
	animation: s-bar-rise var(--s-anim-cinema) var(--ease-cinema, cubic-bezier(0.65, 0, 0.35, 1)) both;
	animation-delay: calc(var(--s-stagger) * var(--bar-i, 0));
}

@keyframes s-bar-rise {
	from { height: 0; }
	to   { height: var(--bar-h, 50%); }
}

/* Modern: scroll-driven όπου υποστηρίζεται. */
@supports (animation-timeline: view()) {
	.s-bar-chart .s-bar,
	.s-bar-chart .s-bar--secondary {
		animation: s-bar-rise 1s var(--ease-cinema, ease-out) both;
		animation-timeline: view();
		animation-range: entry 10% cover 45%;
	}
}

.s-bar-label {
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	color: hsl(var(--silver, 0 0% 70%));
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	font-weight: 400;
	transition: color var(--s-anim-fast) var(--ease-silk),
	            letter-spacing var(--s-anim-base) var(--ease-silk);
}

.s-bar-group:hover .s-bar-label {
	color: hsl(var(--foreground, 0 0% 96%));
	letter-spacing: 0.4em;
}

/* =======================================================================
   2) ADVANTAGES GRID & CARDS
   ======================================================================= */
.s-advantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1px;
	margin: 1.75rem 0;
	list-style: none;
	padding: 0;
	background: hsl(var(--border, 0 0% 14%));
	border: 1px solid hsl(var(--border, 0 0% 14%));
}

/* Variant με space μεταξύ κάρτες (όχι hairline grid). */
.s-advantages-grid--spaced {
	background: transparent;
	border: 0;
	gap: 0.75rem;
}

.s-advantage-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	background: hsl(var(--background, 0 0% 4%));
	color: hsl(var(--bone, 0 0% 92%));
	font-size: 0.95rem;
	line-height: 1.65;
	font-weight: 300;
	letter-spacing: 0.01em;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform        var(--s-anim-base) var(--ease-silk, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--s-anim-base) var(--ease-silk),
		box-shadow       var(--s-anim-base) var(--ease-silk);
	opacity: 0;
	animation: s-card-in var(--s-anim-base) var(--ease-cinema, cubic-bezier(0.65, 0, 0.35, 1)) both;
	animation-delay: calc(var(--s-stagger) * var(--card-i, 0));
}

.s-advantages-grid--spaced .s-advantage-card {
	border: 1px solid hsl(var(--border, 0 0% 14%));
	background: var(--s-surface);
}

/* Vignette που ακολουθεί τον cursor (subtle, λευκό). */
.s-advantage-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
		                hsl(0 0% 100% / 0.08), transparent 55%);
	opacity: 0;
	transition: opacity var(--s-anim-base) var(--ease-silk);
	pointer-events: none;
	z-index: 0;
}

/* Hairline accent στην αριστερή πλευρά — εμφανίζεται από κάτω προς τα πάνω. */
.s-advantage-card::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 1px;
	background: hsl(var(--foreground, 0 0% 96%));
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--s-anim-base) var(--ease-cinema);
	z-index: 1;
}

.s-advantage-card > * {
	position: relative;
	z-index: 1;
}

.s-advantage-card:hover {
	background: hsl(var(--foreground, 0 0% 96%) / 0.04);
	transform: translateY(-1px);
	box-shadow: 0 30px 80px -40px hsl(0 0% 0% / 0.7);
}

.s-advantages-grid--spaced .s-advantage-card:hover {
	border-color: hsl(var(--foreground, 0 0% 96%) / 0.28);
}

.s-advantage-card:hover::before { opacity: 1; }
.s-advantage-card:hover::after  { transform: scaleY(1); }

.s-advantage-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	color: hsl(var(--foreground, 0 0% 96%) / 0.85);
	font-weight: 400;
	font-size: 0.85rem;
	border: 1px solid hsl(var(--foreground, 0 0% 96%) / 0.32);
	transition:
		transform        var(--s-anim-base) var(--ease-cinema, cubic-bezier(0.65, 0, 0.35, 1)),
		border-color     var(--s-anim-fast) var(--ease-silk),
		color            var(--s-anim-fast) var(--ease-silk),
		background-color var(--s-anim-fast) var(--ease-silk);
}

.s-advantage-card:hover .s-advantage-icon {
	transform: rotate(360deg);
	border-color: hsl(var(--foreground, 0 0% 96%));
	color: hsl(var(--foreground, 0 0% 96%));
	background: hsl(var(--foreground, 0 0% 96%) / 0.06);
}

@keyframes s-card-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =======================================================================
   3) AREAS LIST (chips, hairline-bordered)
   ======================================================================= */
.s-areas-list {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.s-areas-list li {
	position: relative;
	padding: 0.5rem 1.1rem;
	border: 1px solid hsl(var(--border, 0 0% 14%));
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: hsl(var(--silver, 0 0% 70%));
	background: transparent;
	font-weight: 500;
	transition:
		color           var(--s-anim-fast) var(--ease-silk),
		border-color    var(--s-anim-base) var(--ease-silk),
		letter-spacing  var(--s-anim-base) var(--ease-silk),
		background      var(--s-anim-fast) var(--ease-silk);
	opacity: 0;
	animation: s-card-in var(--s-anim-base) var(--ease-cinema) both;
	animation-delay: calc(var(--s-stagger) * var(--card-i, 0));
}

.s-areas-list li:hover {
	color: hsl(var(--foreground, 0 0% 96%));
	border-color: hsl(var(--foreground, 0 0% 96%) / 0.6);
	letter-spacing: 0.4em;
	background: hsl(var(--foreground, 0 0% 96%) / 0.03);
}

/* =======================================================================
   4) TABLE
   ======================================================================= */
.s-table-wrap {
	margin: 2.5rem 0;
}

.s-table-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0 0 1rem;
	letter-spacing: 0.02em;
	color: hsl(var(--bone, 0 0% 92%));
	display: inline-block;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid hsl(var(--foreground, 0 0% 96%) / 0.85);
	position: relative;
}

.s-table-overflow {
	overflow-x: auto;
	border-top: 1px solid hsl(var(--border, 0 0% 14%));
	border-bottom: 1px solid hsl(var(--border, 0 0% 14%));
}

.s-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	font-weight: 300;
}

.s-table th,
.s-table td {
	padding: 1rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid hsl(var(--border, 0 0% 14%));
	vertical-align: top;
}

.s-table th {
	background: transparent;
	font-weight: 500;
	font-size: 0.68rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: hsl(var(--silver, 0 0% 70%));
	border-bottom: 1px solid hsl(var(--foreground, 0 0% 96%) / 0.4);
}

.s-table tbody tr {
	transition: background-color var(--s-anim-base) var(--ease-silk);
}

.s-table tbody tr:hover {
	background: hsl(var(--foreground, 0 0% 96%) / 0.025);
}

.s-table tbody tr:last-child td {
	border-bottom: 0;
}

/* =======================================================================
   5) SECTION TITLE — συμβατό με .hero-brand-* aesthetic
   ======================================================================= */
.s-section-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 3rem 0 1.5rem;
	color: hsl(var(--bone, 0 0% 92%));
}

.s-section-eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	line-height: 1.4;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: hsl(var(--silver, 0 0% 70%));
	margin-bottom: 0.75rem;
}

/* =======================================================================
   6) REDUCED MOTION
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
	.s-bar-chart.s-animate .s-bar,
	.s-bar-chart.s-animate .s-bar--secondary,
	.s-advantage-card,
	.s-areas-list li {
		animation: none !important;
		opacity: 1 !important;
	}
	.s-bar,
	.s-bar--secondary {
		height: var(--bar-h, 50%);
		transition: none;
	}
	.s-advantage-card:hover,
	.s-areas-list li:hover {
		transform: none;
	}
	.s-advantage-card:hover .s-advantage-icon {
		transform: none;
	}
	.s-bar-group:hover .s-bar-label,
	.s-areas-list li:hover {
		letter-spacing: 0.32em;
	}
}