/*
Theme Name: Tran Commercial Group
Theme URI: http://tran-commercial.test
Author: Phuong
Description: Custom block theme for Tran Commercial Group. Quiet, editorial design: white and ivory surfaces, black text, gold only as a thin accent. Built to design-system.html. Content types and fields live in the Tran Commercial - Core plugin.
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
*/

/* 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-paper: var(--wp--preset--color--paper);
	--tcg-ivory: var(--wp--preset--color--ivory);
	--tcg-line: var(--wp--preset--color--line);
	--tcg-line-ivory: var(--wp--preset--color--line-ivory);
	--tcg-black: var(--wp--preset--color--black);
	--tcg-charcoal: var(--wp--preset--color--charcoal);
	--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--serif);
	--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-ivory: 1px solid var(--tcg-line-ivory);
	--tcg-border-gold: 1px solid var(--tcg-gold);
	--tcg-background-160: linear-gradient(160deg, #ece8de, #d3cdbd);
	--tcg-background-135: linear-gradient(135deg, #e6e2d8, #cfc9ba);
	--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-black);
}
.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-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .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-charcoal);
}
.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-black);
}
.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-paper);
	color: var(--tcg-black);
	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--ivory { background: var(--tcg-ivory); }

: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). Header, menu and hero fit in the first screen:
   hero height = screen height minus the header (about 196px) and menu bar. */
:root .tcg-hero { --tcg-hero-photo: clamp(360px, calc(100svh - 200px), 760px); position: relative; height: var(--tcg-hero-photo); margin: 0; overflow: hidden; visibility: visible; }
.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; }
/* 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; }

/* Title, tagline and button sit on a light panel at the bottom centre. */
:root .tcg-hero__overlay {
	position: absolute;
	left: 50%;
	bottom: 52px;
	z-index: 2;
	transform: translateX(-50%);
	width: min(780px, calc(100% - 2 * var(--tcg-padding-inline)));
	margin: 0;
	padding: 28px 36px 32px;
	background: rgba(255, 255, 255, .96);
	border-top: var(--tcg-border-gold);
	text-align: center;
}
:root .tcg-hero__overlay > * { margin: 0; }
:root .tcg-hero__title { margin-bottom: 12px; }
:root .tcg-hero__tagline { margin: 0 auto 22px; max-width: 520px; color: var(--tcg-gray); }

/* Arrows: square buttons at the left and right of the page width, centred on the photo. */
.tcg-hero .splide__arrow { position: absolute; z-index: 3; top: calc(var(--tcg-hero-photo, 100%) / 2); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(255, 255, 255, .9); color: var(--tcg-black); cursor: pointer; transition: background-color .2s; }
.tcg-hero .splide__arrow:hover { background: var(--tcg-gold); }
.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)); }

/* Dots and pause button: square, on the photo, aligned to the page width. */
.tcg-hero .splide__pagination { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; display: flex; justify-content: center; gap: 14px; 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: 10px; height: 10px; padding: 0; border: 0; border-radius: 0; background: var(--tcg-paper); opacity: .6; cursor: pointer; transition: opacity .2s, background-color .2s; }
.tcg-hero .splide__pagination__page::after { content: ""; position: absolute; inset: -14px -7px; }
.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: 12px; right: max(var(--tcg-padding-inline), calc((100% - var(--tcg-max-width)) / 2)); }
.tcg-hero .splide__toggle { position: relative; display: block; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; background: var(--tcg-paper); color: var(--tcg-black); cursor: pointer; }
.tcg-hero .splide__toggle::after { content: ""; position: absolute; inset: -10px; }
.tcg-hero .splide__toggle:hover { background: var(--tcg-gold); }
.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: italic;
	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-paper);
	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-black);
}
/* 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-ivory);
}
.tcg-row:last-child { border-bottom: var(--tcg-border-ivory); }
: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-black);
}
.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-ivory);
	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-black);
}

/* 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-black);
	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-ivory);
	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: the photo, then the panel below it (so the text never covers the photo). */
	:root .tcg-hero { --tcg-hero-photo: clamp(200px, calc(100svh - 440px), 340px); height: auto; overflow: visible; }
	.tcg-hero .splide__track { height: var(--tcg-hero-photo); }
	.tcg-hero .splide__arrow { width: 40px; height: 40px; }
	.tcg-hero .splide__arrow--prev { left: var(--tcg-padding-inline); }
	.tcg-hero .splide__arrow--next { right: var(--tcg-padding-inline); }
	:root .tcg-hero__overlay { position: relative; left: auto; bottom: auto; transform: none; width: auto; padding: 24px var(--tcg-padding-inline) 28px; }
	:root .tcg-hero__tagline { display: none; }
	:root .tcg-hero__title { margin-bottom: 18px; }
	.tcg-hero .splide__pagination { bottom: auto; top: calc(var(--tcg-hero-photo) - 28px); }
	.tcg-hero .splide__autoplay { bottom: auto; top: calc(var(--tcg-hero-photo) - 40px); right: var(--tcg-padding-inline); }

	.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; }
}

/* No block-gap margin inside the hero, so the photo sits right under the menu bar. */
:root .tcg-hero > * { margin-block: 0; }