/*
Theme Name: Tran Commercial Group - Luxury
Theme URI: http://tran-commercial.test
Author: Phuong
Description: Design option B for Tran Commercial Group. Dark and immersive: full-screen photo hero, floating header, black surfaces, white text, gold accents. Same content as the editorial theme.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tran-commercial-luxury
*/

/* Design tokens (colors, fonts, sizes, spacing) live in theme.json.
   This file holds only layout and component rules that theme.json cannot express. */

:root {
	--tcg-black: var(--wp--preset--color--black);
	--tcg-charcoal: var(--wp--preset--color--charcoal);
	--tcg-line: var(--wp--preset--color--line);
	--tcg-line-charcoal: var(--wp--preset--color--line-charcoal);
	--tcg-white: var(--wp--preset--color--white);
	--tcg-silver: var(--wp--preset--color--silver);
	--tcg-gray: var(--wp--preset--color--gray);
	--tcg-gold: var(--wp--preset--color--gold);
	--tcg-gold-text: var(--wp--preset--color--gold-text);
	--tcg-gold-dark: var(--wp--preset--color--gold-dark);
	--tcg-font-family: var(--wp--preset--font-family--display);
	--tcg-font-weight: 500;
	--tcg-line-height: 16px;
	--tcg-letter-spacing: .2em;
	--tcg-letter-spacing-small: .08em;
	--tcg-text-transform: uppercase;
	--tcg-border: 1px solid var(--tcg-line);
	--tcg-border-charcoal: 1px solid var(--tcg-line-charcoal);
	--tcg-border-gold: 1px solid var(--tcg-gold);
	--tcg-background-160: linear-gradient(160deg, #26262a, #17171a);
	--tcg-background-135: linear-gradient(135deg, #2a2a2e, #18181b);
	--tcg-max-width: var(--wp--style--global--content-size);
	--tcg-gap: 24px;
	--tcg-padding-inline: var(--wp--custom--gutter);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:root .wp-site-blocks > *{ margin-block: 0; }
:root .tcg-main > *{ margin-block: 0; }
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--tcg-gold-dark);
	outline-offset: 3px;
}
.wp-element-button { transition: background-color .2s, border-color .2s; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Small text elements */
:root .tcg-eyebrow{
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	font-weight: var(--tcg-font-weight);
	color: var(--tcg-gold-text);
}
:root .tcg-label{
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-gray);
}
.tcg-more {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: var(--tcg-border-gold);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-white);
}
.tcg-more:hover { color: var(--tcg-gold-text); }

/* ---------- Header ---------- */
.tcg-topline {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0 28px;
	padding: 10px 40px;
	border-bottom: var(--tcg-border);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-gray);
}
:root .tcg-topline > *{ margin: 0; }
.tcg-topline a { color: inherit; }
.tcg-topline a:hover { color: var(--tcg-gold-text); }

.tcg-brand { padding: 28px var(--tcg-padding-inline) 16px; text-align: center; }
:root .tcg-logo{ margin: 0 auto; }
.tcg-logo a{ display: inline-block; line-height: 0; }
.tcg-logo img{ display: block; width: 300px; max-width: 100%; height: auto; }
:root .tcg-footer .tcg-logo{ margin: 0 auto 18px; }
.tcg-footer .tcg-logo img{ width: 220px; }
:root .tcg-brand > *{ margin: 0; }


/* Sticky navigation row */
.tcg-sticky {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .96);
	/* No backdrop-filter here: it would trap the full-screen mobile menu inside this bar. */
	border-bottom: var(--tcg-border);
}
.admin-bar.tcg-stuck .tcg-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar.tcg-stuck .tcg-sticky { top: 46px; } }

.tcg-nav { padding: 16px max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); }

/* Small logo in the sticky bar: hidden until the header logo has scrolled away. */
.tcg-navbar { position: relative; }
:root .tcg-navbar > * { margin: 0; }
.tcg-navlogo { position: absolute; left: max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; z-index: 1; }
.tcg-navlogo a { display: block; line-height: 0; position: relative; }
.tcg-navlogo a::after { content: ""; position: absolute; inset: -12px -8px; }
.tcg-navlogo img { display: block; width: 112px; height: auto; }
body.tcg-stuck .tcg-navlogo { opacity: 1; visibility: visible; }
@media (min-width: 1280px) {
	html .tcg-nav .wp-block-navigation__container { column-gap: 20px; }
}
/* With the "Menu" button (below 1280px) the button moves to the right so the logo has the left. */
@media (max-width: 1279px) {
	html body.tcg-stuck .tcg-nav .wp-block-navigation__responsive-container-open { margin: 0 0 0 auto; }
}
.tcg-nav .wp-block-navigation__container { gap: 6px 34px; justify-content: center; }
html .tcg-nav .wp-block-navigation__container { padding: 0; }
.tcg-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-silver);
}
.tcg-nav .wp-block-navigation-item__content:hover,
.tcg-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--tcg-gold-text); }

/* The menu collapses behind a "Menu" button below 1280px (nine links and the small logo do not fit on one row). */
@media (min-width: 600px) and (max-width: 1279px) {
	html .tcg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	html .tcg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
:root .tcg-nav .wp-block-navigation__responsive-container-open{
	margin: 0 auto;
	padding: 6px 0;
	align-items: center;
	gap: 10px;
	color: var(--tcg-white);
}
.tcg-nav .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--tcg-font-weight);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
}
.tcg-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--tcg-black);
	color: var(--tcg-white);
	padding: var(--tcg-padding-inline);
}
.tcg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
}
.tcg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ padding-top: 40px; }
.tcg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 13px 0;
}

/* ---------- Sections ---------- */
.tcg-section { padding: 100px var(--tcg-padding-inline); }
.tcg-section--charcoal { background: var(--tcg-charcoal); }

:root .tcg-sechead{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--tcg-gap);
	margin: 0 0 46px;
}
:root .tcg-sechead > *{ margin: 0; }
:root .tcg-sechead h1, :root .tcg-sechead h2{ margin: 0; }

.tcg-grid { display: grid; gap: 34px; }
:root .tcg-grid > *{ margin: 0; }
.tcg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tcg-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tcg-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 48px; }

/* Hero slideshow (Splide, fade): full screen, dark tint, centred title, tagline and button. */
:root .tcg-hero { position: relative; height: 100svh; min-height: 560px; max-height: 1200px; margin: 0; overflow: hidden; visibility: visible; background: var(--tcg-black); }
.tcg-hero .splide__track, .tcg-hero .splide__list, .tcg-hero .splide__slide { height: 100%; }
.tcg-hero .splide__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcg-hero .splide__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)); }
/* Before the script runs (or without it) show only the first photo, so nothing jumps. */
.tcg-hero:not(.is-initialized) .splide__list { display: block; }
.tcg-hero:not(.is-initialized) .splide__slide:not(:first-child) { display: none; }

:root .tcg-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 150px 88px 110px;
	text-align: center;
	pointer-events: none;
}
:root .tcg-hero__overlay > * { margin: 0; pointer-events: auto; }
:root .tcg-hero__title {
	margin-bottom: 18px;
	max-width: 15em;
	font-size: clamp(30px, 4.4vw, 60px);
	line-height: 1.15;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tcg-white);
}
:root .tcg-hero__tagline { margin: 0 auto 36px; max-width: 560px; font-size: var(--wp--preset--font-size--title); line-height: 1.5; color: var(--tcg-white); opacity: .92; }
:root .tcg-hero .wp-block-buttons { margin: 0; }

/* Arrows, dots and pause: thin white controls on the photo. */
.tcg-hero .splide__arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(11, 11, 12, .25); color: var(--tcg-white); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tcg-hero .splide__arrow:hover { background: var(--tcg-gold); border-color: var(--tcg-gold); color: var(--tcg-black); }
.tcg-hero .splide__arrow:disabled { opacity: .4; cursor: default; }
.tcg-hero .splide__arrow svg { width: 16px; height: 16px; fill: currentColor; }
.tcg-hero .splide__arrow--prev { left: max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); }
.tcg-hero .splide__arrow--next { right: max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); }

.tcg-hero .splide__pagination { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tcg-hero .splide__pagination li { margin: 0; line-height: 0; }
.tcg-hero .splide__pagination__page { position: relative; display: block; width: 32px; height: 2px; padding: 0; border: 0; border-radius: 0; background: var(--tcg-white); opacity: .45; cursor: pointer; transition: opacity .2s, background-color .2s; }
.tcg-hero .splide__pagination__page::after { content: ""; position: absolute; inset: -14px -4px; }
.tcg-hero .splide__pagination__page.is-active { opacity: 1; background: var(--tcg-gold); }
.tcg-hero .splide__pagination__page:hover { opacity: 1; }
.tcg-hero .splide__autoplay { position: absolute; z-index: 3; bottom: 20px; right: max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); }
.tcg-hero .splide__toggle { position: relative; display: block; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(11, 11, 12, .25); color: var(--tcg-white); cursor: pointer; transition: background-color .2s, color .2s; }
.tcg-hero .splide__toggle::after { content: ""; position: absolute; inset: -8px; }
.tcg-hero .splide__toggle:hover { background: var(--tcg-gold); border-color: var(--tcg-gold); color: var(--tcg-black); }
.tcg-hero .splide__toggle__play, .tcg-hero .splide__toggle__pause { position: absolute; inset: 0; margin: auto; }
/* Pause icon: two bars. Play icon: a triangle. */
.tcg-hero .splide__toggle__pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.tcg-hero .splide__toggle__play { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; left: 3px; }
/* Splide marks the button .is-active while the slideshow is playing: show the pause bars then, the play triangle when stopped. */
.tcg-hero .splide__toggle.is-active .splide__toggle__pause { display: block; }
.tcg-hero .splide__toggle.is-active .splide__toggle__play { display: none; }
.tcg-hero .splide__toggle:not(.is-active) .splide__toggle__pause { display: none; }
.tcg-hero .splide__toggle:not(.is-active) .splide__toggle__play { display: block; }

/* Intro and services: split heading and text, then image-led service cards */
.tcg-intro { padding-bottom: 80px; }
.tcg-intro__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-bottom: 64px;
}
:root .tcg-intro__head > * { margin: 0; }
.tcg-intro__title { padding-right: 48px; }
:root .tcg-intro__title h2 { margin: 0; }
.tcg-intro__text {
	padding: 8px 0 8px 48px;
	border-left: var(--tcg-border);
}
:root .tcg-intro__text > * { margin: 0 0 20px; }
:root .tcg-intro__text > *:last-child { margin-bottom: 0; }
.tcg-intro__text p {
	font-family: var(--tcg-font-family);
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.6;
	color: var(--tcg-gray);
}
:root .tcg-svc > * { margin: 0; }
:root .tcg-svc > .tcg-svc__ph {
	aspect-ratio: 4 / 5;
	margin-bottom: 20px;
	background: var(--tcg-background-160);
}
.tcg-svc__ph img, .tcg-post__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root .tcg-card__img { position: absolute; inset: 0; margin: 0; }
.tcg-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root .tcg-svc h3 { margin-bottom: 8px; }
.tcg-svc p { color: var(--tcg-gray); }

:root .tcg-mark {
	margin: 0 0 26px;
	font-family: var(--tcg-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--number);
	line-height: 1;
	color: var(--tcg-gold);
}

/* Numbers */
.tcg-numbers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: var(--tcg-border);
	border-bottom: var(--tcg-border);
	text-align: center;
}
:root .tcg-numbers > *{ margin: 0; }
.tcg-number { padding: 56px 20px; }
.tcg-number + .tcg-number { border-left: var(--tcg-border); }
:root .tcg-number > *{ margin: 0; }
.tcg-number__value {
	font-family: var(--tcg-font-family);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--number);
	line-height: 64px;
	color: var(--tcg-gold-text);
}
.tcg-number__caption {
	font-family: var(--tcg-font-family);
	font-style: italic;
	font-size: var(--wp--preset--font-size--body);
	line-height: 28px;
	color: var(--tcg-gray);
}

/* Property cards */
:root .tcg-card > *{ margin: 0; }
:root .tcg-card > .tcg-card__ph{
	position: relative;
	aspect-ratio: 4 / 3;
	margin-bottom: 18px;
	background: var(--tcg-background-135);
}
:root .tcg-tag{
	position: absolute;
	top: 14px;
	left: 14px;
	margin: 0;
	padding: 5px 10px;
	background: var(--tcg-black);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	font-weight: var(--tcg-font-weight);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-white);
}
/* Titles reserve two lines (and stop at two), so city, price and details line up across cards. */
:root .tcg-card h3 {
	min-height: 56px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
:root .tcg-card .tcg-city{
	margin: 2px 0 8px;
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing-small);
	color: var(--tcg-gray);
}
.tcg-card .tcg-price {
	font-family: var(--tcg-font-family);
	font-size: var(--wp--preset--font-size--price);
	line-height: 1.33;
	color: var(--tcg-gold-text);
}
:root .tcg-card .tcg-detail{
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing-small);
	color: var(--tcg-gray);
}

/* Transaction rows */
:root .tcg-rows > *{ margin: 0; }
.tcg-row {
	display: grid;
	grid-template-columns: 110px 1.6fr 1fr 190px 1fr;
	gap: var(--tcg-gap);
	align-items: baseline;
	padding: 24px 0;
	border-top: var(--tcg-border-charcoal);
}
.tcg-row:last-child { border-bottom: var(--tcg-border-charcoal); }
:root .tcg-row > *{ margin: 0; }
.tcg-row__status {
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	font-weight: var(--tcg-font-weight);
	letter-spacing: var(--tcg-letter-spacing);
	text-transform: var(--tcg-text-transform);
	color: var(--tcg-gold-text);
}
.tcg-row__name {
	font-family: var(--tcg-font-family);
	font-size: var(--wp--preset--font-size--title);
	line-height: 28px;
	color: var(--tcg-white);
}
.tcg-row__place { color: var(--tcg-gray); }
/* Service type (Investment sale, Tenant representation, ...): a small muted tag. */
.tcg-row__tag {
	justify-self: start;
	padding: 4px 10px;
	border: var(--tcg-border-charcoal);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--tcg-line-height);
	letter-spacing: var(--tcg-letter-spacing-small);
	color: var(--tcg-gray);
}
.tcg-row__price {
	font-family: var(--tcg-font-family);
	font-size: var(--wp--preset--font-size--title);
	line-height: 28px;
	text-align: right;
}

/* Team */
:root .tcg-person > *{ margin: 0; }
:root .tcg-person > .tcg-person__ph{
	aspect-ratio: 3 / 4;
	margin-bottom: 14px;
	background: var(--tcg-background-160);
}

/* Two or three team members: portrait beside the name, title and short bio */
.tcg-person--wide { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
:root .tcg-person--wide > .tcg-person__ph { margin-bottom: 0; }
:root .tcg-person__body > * { margin: 0; }
:root .tcg-person__body h3 { margin-bottom: 4px; }
:root .tcg-person__body .tcg-label { margin-bottom: 4px; }
:root .tcg-person__body .tcg-person__lang { margin-bottom: 16px; font-size: var(--wp--preset--font-size--label); line-height: var(--tcg-line-height); letter-spacing: var(--tcg-letter-spacing-small); color: var(--tcg-gray); }
.tcg-person__bio { color: var(--tcg-gray); }
.tcg-person__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* Testimonial */
.tcg-testimonial { text-align: center; }
:root .tcg-testimonial > *{ margin-block: 0; }
:root .tcg-testimonial .tcg-mark{ margin-bottom: 10px; }
:root .tcg-quote{
	margin: 0 0 22px;
	font-family: var(--tcg-font-family);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--quote);
	line-height: 1.43;
	color: var(--tcg-white);
}

/* Latest insights */
:root .tcg-post > *{ margin: 0; }
:root .tcg-post > .tcg-post__ph{
	aspect-ratio: 16 / 10;
	margin-bottom: 16px;
	background: var(--tcg-background-135);
}
:root .tcg-post h3{ margin-top: 6px; }

/* Call to action */
.tcg-cta { padding-block: 110px; text-align: center; }
:root .tcg-cta > *{ margin-block: 0; }
:root .tcg-cta h2{ margin-bottom: 14px; }
:root .tcg-cta p{ margin-bottom: 30px; color: var(--tcg-gray); }

/* ---------- Pages, articles and lists ---------- */
:root .tcg-page .wp-block-post-title, :root .tcg-article .wp-block-post-title{ margin: 0 0 34px; }
:root .tcg-article__meta{ display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; }
:root .tcg-article__meta > *{ margin: 0; }
:root .tcg-article .wp-block-post-featured-image{ margin-bottom: 34px; }
.tcg-notfound { text-align: center; }
:root .tcg-notfound > *{ margin-block: 0 24px; }

.tcg-posts { gap: 34px; }
:root .tcg-posts .wp-block-post-featured-image{ margin: 0 0 16px; }
:root .tcg-posts .wp-block-post-date{ margin: 0; }
:root .tcg-posts .wp-block-post-title{ margin: 6px 0 0; font-size: var(--wp--preset--font-size--title); line-height: 1.4; }
:root .tcg-pager{ margin-top: 60px; gap: 22px; }
.tcg-pager a,
.tcg-pager .page-numbers {
	font-family: var(--tcg-font-family);
	font-size: var(--wp--preset--font-size--title);
	color: var(--tcg-gray);
}
.tcg-pager .page-numbers.current {
	color: var(--tcg-white);
	border-bottom: var(--tcg-border-gold);
}

/* ---------- Footer: light, never dark ---------- */
.tcg-footer {
	padding: 56px var(--tcg-padding-inline) 40px;
	border-top: var(--tcg-border-gold);
	background: var(--tcg-charcoal);
	text-align: center;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.75;
	letter-spacing: var(--tcg-letter-spacing-small);
	color: var(--tcg-gray);
}
:root .tcg-footer > *{ margin: 0; }
:root .tcg-footer .tcg-footer__contact{ margin-bottom: 18px; }
.tcg-footer a { color: inherit; }
.tcg-footer a:hover { color: var(--tcg-gold-text); }

/* ---------- Tablet and below (under 900px) ---------- */
@media (max-width: 899px) {
	/* Tablet: the service tag moves under the project name so the name keeps room. */
	.tcg-row { grid-template-columns: 96px 1.6fr 1fr 1fr; row-gap: 8px; }
	.tcg-row__tag { grid-column: 2; grid-row: 2; }
	.tcg-row__status, .tcg-row__name, .tcg-row__place, .tcg-row__price { grid-row: 1; }
	html:root {
		--wp--preset--font-size--section-title: 32px;
		--wp--preset--font-size--number: 48px;
		--wp--preset--font-size--quote: 24px;
		--wp--custom--gutter: 20px;
	}
	.tcg-logo img { width: 220px; }
	.tcg-footer .tcg-logo img { width: 180px; }
	.tcg-topline { justify-content: center; gap: 0 18px; padding: 10px 16px; }
	.tcg-topline > *:last-child { display: none; }
	.tcg-brand { padding-top: 18px; padding-bottom: 12px; }
	.tcg-grid { gap: var(--tcg-gap); }
	.tcg-grid--4 { grid-template-columns: 1fr 1fr; }
	.tcg-grid--2 { grid-template-columns: 1fr; gap: 40px; }
	.tcg-person--wide { grid-template-columns: 160px 1fr; gap: var(--tcg-gap); }
	/* Bigger touch areas for small text links, with no visual change. */
	.tcg-more, .tcg-topline a, .tcg-footer a { position: relative; }
	.tcg-more::after, .tcg-topline a::after, .tcg-footer a::after {
		content: "";
		position: absolute;
		inset: -14px -8px;
	}
	/* Cards are narrower here, so titles may use three lines. */
	:root .tcg-card h3 { min-height: 84px; -webkit-line-clamp: 3; }
}

/* ---------- Phone (under 700px) ---------- */
@media (max-width: 699px) {
	/* Phone hero: text over the photo, no side arrows (swipe or use the dots). */
	:root .tcg-hero__overlay { padding: 150px 24px 96px; }
	:root .tcg-hero__title { max-width: none; font-size: 26px; letter-spacing: .1em; }
	:root .tcg-hero__tagline { margin-bottom: 26px; font-size: var(--wp--preset--font-size--body); }
	.tcg-hero .splide__arrow { display: none; }
	:root .tcg-hero .wp-block-button__link { padding-inline: 26px; }

	.tcg-grid--3, .tcg-numbers { grid-template-columns: 1fr; }
	.tcg-number + .tcg-number { border-left: 0; border-top: var(--tcg-border); }
	.tcg-intro__head { grid-template-columns: 1fr; margin-bottom: 40px; }
	.tcg-intro__title { padding-right: 0; padding-bottom: 24px; }
	.tcg-intro__text { padding: 24px 0 0; border-left: 0; border-top: var(--tcg-border); }
	:root .tcg-svc > .tcg-svc__ph { aspect-ratio: 4 / 3; }
	:root .tcg-card h3 { min-height: 0; display: block; overflow: visible; }
	.tcg-person--wide { grid-template-columns: 120px 1fr; gap: 20px; }
	.tcg-row { grid-template-columns: 96px 1fr; row-gap: 4px; }
	.tcg-row__place, .tcg-row__tag, .tcg-row__price { grid-column: 2; grid-row: auto; text-align: left; }
	.tcg-row__status, .tcg-row__name { grid-row: auto; }
	.tcg-row__tag { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}


/* ---------- Floating header over the hero ---------- */
:root { --tcg-header-height: 120px; }
.wp-site-blocks > header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.wp-site-blocks > header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px; background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); z-index: -1; pointer-events: none; }
.tcg-topline { border-bottom: 0; color: rgba(255, 255, 255, .78); }
.tcg-brand { padding: 20px var(--tcg-padding-inline) 0; }
.tcg-logo img { width: 250px; }
.wp-site-blocks > .tcg-sticky { position: absolute; top: var(--tcg-header-height); left: 0; right: 0; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease; }
body.tcg-stuck .wp-site-blocks > .tcg-sticky { position: fixed; top: 0; background: rgba(11, 11, 12, .94); border-bottom: var(--tcg-border); }
.tcg-nav .wp-block-navigation-item__content { color: var(--tcg-white); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
body.tcg-stuck .tcg-nav .wp-block-navigation-item__content { text-shadow: none; }
.tcg-nav .wp-block-navigation-item__content:hover, .tcg-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--tcg-gold-text); }

/* Opened phone menu: black screen, white links (beats WordPress's default white overlay). */
html .wp-block-navigation.tcg-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--tcg-black); color: var(--tcg-white); }
html .tcg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--tcg-white); text-shadow: none; }
html .tcg-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--tcg-gold-text); }
html .tcg-nav .wp-block-navigation__responsive-container-close { color: var(--tcg-white); }


/* ---------- Light bands between the dark sections ----------
   Inside .tcg-section--light the colour roles swap: --tcg-black becomes the (light) background and
   --tcg-white the (dark) text, so every rule above works unchanged. .tcg-section--tone uses a warmer ivory. */
.tcg-section--light {
	--wp--preset--color--black: #ffffff;
	--wp--preset--color--charcoal: #f6f4ef;
	--wp--preset--color--white: #0b0b0c;
	--wp--preset--color--silver: #1c1d1f;
	--wp--preset--color--gray: #6b6e73;
	--wp--preset--color--line: #e4e2dc;
	--wp--preset--color--line-charcoal: #d9d5ca;
	--wp--preset--color--gold-text: #7a5c14;
	--wp--preset--color--gold-dark: #a8832c;
	--tcg-black: var(--wp--preset--color--black);
	--tcg-charcoal: var(--wp--preset--color--charcoal);
	--tcg-white: var(--wp--preset--color--white);
	--tcg-silver: var(--wp--preset--color--silver);
	--tcg-gray: var(--wp--preset--color--gray);
	--tcg-line: var(--wp--preset--color--line);
	--tcg-line-charcoal: var(--wp--preset--color--line-charcoal);
	--tcg-gold-text: var(--wp--preset--color--gold-text);
	--tcg-gold-dark: var(--wp--preset--color--gold-dark);
	--tcg-border: 1px solid var(--tcg-line);
	--tcg-border-charcoal: 1px solid var(--tcg-line-charcoal);
	--tcg-background-160: linear-gradient(160deg, #ece8de, #d3cdbd);
	--tcg-background-135: linear-gradient(135deg, #e6e2d8, #cfc9ba);
	background-color: var(--tcg-black);
	color: var(--tcg-silver);
}
.tcg-section--light.tcg-section--tone { --wp--preset--color--black: #f6f4ef; --wp--preset--color--line-charcoal: #d9d5ca; }

/* Top bar: a solid black strip above the photo. Items sit on the right, inside the page width, with even space around them. */
.tcg-topline { justify-content: flex-end; gap: 0 36px; padding: 13px max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); background: var(--tcg-black); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wp-site-blocks > header::before { top: 42px; }
@media (max-width: 699px) {
	.tcg-topline { justify-content: center; padding: 13px var(--tcg-padding-inline); }
}

/* No block-gap margin inside the hero, so the photo starts at the very top. */
:root .tcg-hero > * { margin-block: 0; }