/* ==========================================================================
   MINOS HOST — the light main (on request)

   Every page opens on its charcoal hero; everything below it sits on the
   site's cream (--vv-cream, base.css), with cards lifted on --vv-cream-card.
   The sections that were built on charcoal are recoloured here, in one
   place, rather than rewriting each component stylesheet: loaded after
   type.css (Layout.astro), so these win.

   Rules of the palette, as everywhere else on the light grounds:
     - type is charcoal, muted type --vv-gray;
     - gold is fill, line, icon and marker only — never type on the cream
       (it's 2.4:1 there; base.css), so what used to be gold text (eyebrows,
       active states, hover colours) turns charcoal instead;
     - text laid over a photograph keeps its off-white — the photo is its
       ground, not the cream.

   Untouched on purpose: the heroes, the home page's photo-led Films and
   About panels, the footer, the navbar and the menu panel.
   ========================================================================== */

/* ----- Grounds ---------------------------------------------------------- */
.section_vv,
.section_brands,
.section_services,
.services_item,
.section_whyus,
.section_local,
.section_testimonials,
.sv_ticker,
.pr_table,
.pr_details {
	background-color: var(--vv-cream);
}

/* ----- Eyebrows (the small uppercase labels): gray type, gold arrow ------ */
:is(.section_vv, .section_services, .section_whyus, .section_local, .section_testimonials, .pr_table, .pr_details)
	.sv_eyebrow,
.whyus_eyebrow {
	color: var(--vv-gray);
}
:is(.section_services, .section_whyus, .section_local, .section_testimonials, .pr_table, .pr_details) .sv_eyebrow_icon {
	color: var(--vv-gold);
}

/* ----- Home: definitions ("Απευθυνόμαστε σε / Ιδιοκτήτες") --------------- */
.vv_content,
.vv_content_head {
	color: var(--vv-charcoal);
}

/* ----- Home: brand logos — charcoal at rest, their own colours on hover -- */
.section_brands .brands_container {
	border-color: rgba(46, 54, 68, 0.12);
}
.section_brands img {
	filter: brightness(0);
	opacity: 0.5;
}

/* ----- /services: ticker and the service list ---------------------------- */
.sv_ticker {
	border-color: rgba(46, 54, 68, 0.12);
}
.sv_ticker_item {
	color: var(--vv-charcoal);
}
.services_item {
	border-bottom-color: rgba(46, 54, 68, 0.12);
}
.services_item_index,
.services_item_title,
.services_item_text,
.services_item:hover .services_item_index,
.services_item:focus-visible .services_item_index {
	color: var(--vv-charcoal);
}

/* ----- Home: WhyUs deck -------------------------------------------------- */
.whyus_heading,
.whyus_decor,
.whyus_nav_content,
.whyus_nav_item.active .whyus_nav_content,
.whyus_card_title {
	color: var(--vv-charcoal);
}
.whyus_intro_p,
.whyus_card_list {
	color: var(--vv-gray);
}
.whyus_nav_item {
	border-bottom-color: rgba(46, 54, 68, 0.12);
}
.whyus_nav_item.active {
	background-color: rgba(184, 154, 107, 0.2);
}
.whyus_card_inner {
	border-color: rgba(46, 54, 68, 0.1);
	background-color: var(--vv-cream-card);
}

/* ----- Home: concierge / local presence --------------------------------- */
.local_heading,
.local_lead,
.local_item_title,
.local_item_link,
.local_card_name {
	color: var(--vv-charcoal);
}
.local_item_desc {
	color: var(--vv-gray);
}
.local_item {
	border-bottom-color: rgba(46, 54, 68, 0.12);
}
.local_card_bar {
	background-color: var(--vv-cream-card);
	border: 1px solid rgba(46, 54, 68, 0.08);
}

/* ----- Home: testimonials ------------------------------------------------ */
.testimonials_panel {
	background-color: #e2e7ec;
}
.testimonials_heading,
.testimonial_quote,
.testimonial_author_name {
	color: var(--vv-charcoal);
}
.testimonials_sub,
.testimonial_author_role,
.testimonial_author_place {
	color: var(--vv-gray);
	opacity: 1;
}
.testimonial_card,
.testimonial_plate {
	border-color: rgba(46, 54, 68, 0.1);
	background-color: var(--vv-cream-card);
}
.testimonials_btn {
	border-color: rgba(46, 54, 68, 0.25);
	background-color: var(--vv-cream-card);
	color: var(--vv-charcoal);
}
.testimonials_btn:hover {
	border-color: var(--vv-charcoal);
	background-color: var(--vv-charcoal);
	color: var(--vv-off-white);
}

/* ----- /pricing: the tier table ----------------------------------------- */
.pr_table_inner {
	background-color: transparent;
}
.pr_table_heading,
.pr_card_title,
.pr_card_price_value,
.pr_note_title,
.pr_contact_line a,
.pr_contact_line a:hover {
	color: var(--vv-charcoal);
}
.pr_card_price_period,
.pr_card_desc,
.pr_card_features li,
.pr_note_desc,
.pr_contact_link {
	color: var(--vv-gray);
	opacity: 1;
}
.pr_card {
	background-color: transparent;
	box-shadow: none;
}
.pr_card_body {
	border: 1px solid rgba(46, 54, 68, 0.1);
	background-color: var(--vv-cream-card);
	box-shadow: 0 18px 40px -30px rgba(46, 54, 68, 0.35);
}
.pr_card--popular .pr_card_body {
	border-color: var(--vv-gold);
	box-shadow: 0 18px 40px -26px rgba(46, 54, 68, 0.4);
}

/* ----- /pricing: the pricing approach ------------------------------------ */
.pr_details_heading,
.pr_details_title {
	color: var(--vv-charcoal);
}
.pr_details_closing_text,
.pr_details_text,
.pr_details_list li {
	color: var(--vv-gray);
	opacity: 1;
}
.pr_details_box {
	border-color: rgba(46, 54, 68, 0.1);
	background-color: var(--vv-cream-card);
}
.pr_details_plate {
	border-color: rgba(46, 54, 68, 0.08);
	background-color: #e2e7ec;
}

/* ----- The three tiers told apart (on request): /pricing and home ---------
   Digital the plain light card, Hybrid ("most popular") a warm sand card
   with a gold edge, Absolute ("most competitive") the charcoal card with
   off-white type — the step up read at a glance. Gold stays fill and line;
   on the charcoal card it's the site's usual gold-on-dark. */
.pr_card--tier-2 .pr_card_body,
.pl_card--tier-2 {
	border-color: rgba(184, 154, 107, 0.6);
	background-color: #f1e9da;
}
.pr_card--tier-3 .pr_card_body,
.pl_card--tier-3 {
	border-color: var(--vv-charcoal);
	background-color: var(--vv-charcoal);
	box-shadow: 0 24px 50px -30px rgba(22, 27, 36, 0.6);
}
.pr_card--tier-3 .pr_card_title,
.pr_card--tier-3 .pr_card_price_value,
.pl_card--tier-3 .pl_card_title,
.pl_card--tier-3 .pl_card_value {
	color: var(--vv-off-white);
}
.pr_card--tier-3 .pr_card_desc,
.pr_card--tier-3 .pr_card_price_period,
.pl_card--tier-3 .pl_card_period,
.pl_card--tier-3 .pl_card_features p {
	color: rgba(245, 242, 237, 0.75);
}
.pl_card--tier-3 .pl_card_price {
	border-bottom-color: rgba(184, 154, 107, 0.35);
}

/* ----- /pricing: the whole tier is one framed card (on request) ----------
   The feature bullets sit inside the same frame as the name, rate and
   button, instead of hanging loose under it: the frame, fill and shadow move
   from the inner body to the card itself, in each tier's colour. */
.pr_cards .pr_card {
	padding: 0;
	border: 1px solid rgba(46, 54, 68, 0.1);
	border-radius: 16px;
	background-color: var(--vv-cream-card);
	box-shadow: 0 18px 40px -30px rgba(46, 54, 68, 0.35);
	overflow: hidden;
}
.pr_cards .pr_card .pr_card_body,
.pr_cards .pr_card--popular .pr_card_body,
.pr_cards .pr_card--tier-2 .pr_card_body,
.pr_cards .pr_card--tier-3 .pr_card_body {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	padding-bottom: 28px;
}
.pr_cards .pr_card_features {
	margin: 0;
	padding: 24px 25px 28px;
	border-top: 1px solid rgba(184, 154, 107, 0.4);
}
.pr_cards .pr_card--tier-2 {
	border-color: rgba(184, 154, 107, 0.6);
	background-color: #f1e9da;
}
.pr_cards .pr_card--tier-3 {
	border-color: var(--vv-charcoal);
	background-color: var(--vv-charcoal);
	box-shadow: 0 24px 50px -30px rgba(22, 27, 36, 0.6);
}
.pr_cards .pr_card--tier-3 .pr_card_features li {
	color: rgba(245, 242, 237, 0.85);
}

/* ----- Seams between stacked light sections -------------------------------
   Where a section starts on a fractional pixel, the row it shares with the
   section above is blended with whatever is showing through there (a pinned
   card's lighter fill and hairline) and reads as a thin line while scrolling.
   Each section paints its own ground 3px up over that row. */
.section_brands,
.section_local,
.section_testimonials,
.section_services,
.pr_details,
.pr_addons,
.sv_offer {
	box-shadow: 0 -3px 0 var(--vv-cream);
}

/* ----- Long button labels on narrow phones --------------------------------
   "Δείτε αναλυτικά Πακέτα & Χρεώσεις" ran past a 360px screen: below 480px
   a button may not be wider than its column, and its label steps down a
   size so it still fits on one line. */
@media screen and (max-width: 479px) {
	.u-btn {
		max-width: 100%;
		padding-inline: 18px;
		font-size: 13px;
	}
}

/* The page itself on the light ground too. The body behind everything is
   charcoal, and wherever two light sections met on a fractional pixel that
   charcoal bled through the shared row as a thin dark line while scrolling.
   With <main> cream there is nothing dark left behind the light sections;
   every hero still paints its own charcoal on top. */
#smooth-content > main {
	background-color: var(--vv-cream);
}

/* ----- /services: the list rows on the light plate ------------------------
   Orisa's 0.3 resting dim was made for its charcoal ground, where the rows
   are off-white on near-black. Charcoal at 0.3 on the plate is a pale gray
   that barely reads, so the rows rest darker here and still brighten to full
   on hover (services.css). */
@media screen and (min-width: 992px) {
	/* Orisa's 0.3 resting dim was made for its charcoal ground. On the light
	   plate that is a pale grey that barely reads — the titles looked washed
	   out and the section read as broken. Dark enough to read at rest, still
	   a step below the full-strength hover. */
	.services_item_title {
		opacity: 0.85;
	}
	.services_item_index {
		opacity: 0.6;
	}
}
/* The rows sit ON the plate, not on their own lighter band: the cream fill
   made the right-hand column read as a separate white block floating in the
   panel. */
.section_services .services_item {
	background-color: transparent;
}