/* Tut Gold Core — front-end base
 *
 * Not a theme stylesheet. This is only the shared primitive layer every
 * component shortcode builds on: tokens, typography, buttons, section
 * rhythm, visibility utilities.
 *
 * RTL RULE: no physical left/right anywhere in this file. Everything uses
 * logical properties (inline-start / inline-end / block-start), so Arabic
 * mirrors correctly the moment dir="rtl" is set, with no override sheet. */

/* ---------- Typography ---------- */
.tgc body,
.tgc-section,
.tgc-comp {
	font-family: var(--tg-font-body);
	font-size: var(--tg-body-size);
	line-height: var(--tg-body-lh);
	color: var(--tg-ink);
}

.tgc-comp h1, .tgc-comp h2, .tgc-comp h3, .tgc-comp h4,
.tgc-section h1, .tgc-section h2, .tgc-section h3, .tgc-section h4 {
	font-family: var(--tg-font-head);
	font-weight: var(--tg-head-w);
	text-transform: var(--tg-head-case);
	letter-spacing: var(--tg-head-ls);
	line-height: var(--tg-head-lh);
	color: var(--tg-brand);
	margin: 0;
}

.tgc-kicker {
	font-family: var(--tg-font-head);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: var(--tg-kicker-ls);
	text-transform: uppercase;
	color: var(--tg-accent);
	display: block;
}

/* Section rule — the amber underline. Hidden when the scheme sets rule:none. */
.tgc-rule {
	inline-size: 64px;
	block-size: 3px;
	background: var(--tg-accent);
	margin-block: 16px 22px;
	border: 0;
}
.tgc-rule--center { margin-inline: auto; }
.tgc-scheme-afaq .tgc-rule { display: none; }

/* Cartouche divider — Scheme 01 only. */
.tgc-cartouche { display: none; align-items: center; gap: 14px; margin-block: 22px; }
.tgc-scheme-royal .tgc-cartouche { display: flex; }
.tgc-cartouche::before,
.tgc-cartouche::after {
	content: ""; block-size: 1px; flex: 1;
	background: linear-gradient(to right, transparent, var(--tg-accent));
}
.tgc-cartouche::after { background: linear-gradient(to left, transparent, var(--tg-accent)); }
.tgc-cartouche i { inline-size: 9px; block-size: 9px; background: var(--tg-accent); transform: rotate(45deg); flex: none; }

/* ---------- Layout ---------- */
.tgc-wrap-in { max-inline-size: 1170px; margin-inline: auto; padding-inline: 24px; }
.tgc-section { padding-block: clamp(56px, 7vw, 104px); }
.tgc-section--tight { padding-block: clamp(36px, 4vw, 64px); }
.tgc-section--surface { background: var(--tg-surface); }
.tgc-section--brand { background: var(--tg-brand); color: #fff; }
.tgc-section--deep { background: var(--tg-brand-deep); color: #fff; }
.tgc-section--brand h2, .tgc-section--deep h2,
.tgc-section--brand h3, .tgc-section--deep h3 { color: #fff; }

.tgc-grid { display: grid; gap: 24px; }
.tgc-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.tgc-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.tgc-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */
.tgc-btn {
	display: inline-block;
	font-family: var(--tg-font-head);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-block: 14px;
	padding-inline: 34px;
	border-radius: var(--tg-radius);
	background: var(--tg-accent);
	color: var(--tg-brand-deep);
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .25s, transform .25s, color .25s;
}
.tgc-btn:hover { background: var(--tg-accent-dk); color: #fff; transform: translateY(-2px); }
.tgc-btn--ghost { background: none; border-color: currentColor; color: inherit; }
.tgc-btn--ghost:hover { background: var(--tg-accent); border-color: var(--tg-accent); color: var(--tg-brand-deep); }

/* ---------- Cards ---------- */
.tgc-card {
	background: var(--tg-base);
	border: 1px solid var(--tg-line);
	border-radius: var(--tg-radius);
	overflow: hidden;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.tgc-card:hover { box-shadow: 0 14px 34px var(--tg-brand-12); transform: translateY(-4px); }
.tgc-scheme-royal .tgc-card { border-color: var(--tg-accent-30); background: transparent; }
.tgc-scheme-royal .tgc-card:hover { border-color: var(--tg-accent); }

.tgc-card__body { padding: 24px 22px; }
.tgc-card__title { font-size: 22px; margin-block-end: 8px; }
.tgc-card__badge {
	display: inline-block;
	font-family: var(--tg-font-head);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding-block: 5px;
	padding-inline: 11px;
	background: var(--tg-accent);
	color: var(--tg-brand-deep);
	border-radius: var(--tg-radius);
}

/* Key-metrics table on a concession card / single page */
.tgc-metrics { display: grid; gap: 0; margin-block: 14px 0; }
.tgc-metrics div {
	display: flex; justify-content: space-between; gap: 12px;
	padding-block: 8px; border-block-end: 1px solid var(--tg-line);
	font-size: 14.5px;
}
.tgc-metrics div:last-child { border-block-end: none; }
.tgc-metrics dt, .tgc-metrics .tgc-m-label { color: var(--tg-ink-70); }
.tgc-metrics .tgc-m-value { font-weight: 600; color: var(--tg-brand); }

/* ---------- Visibility utilities ---------- */
.tgc-hide { display: none !important; }
@media (max-width: 767px)  { .tgc-desk-only { display: none !important; } }
@media (min-width: 768px)  { .tgc-mob-only  { display: none !important; } }

@media (max-width: 900px) {
	.tgc-grid[data-cols-m="1"] { grid-template-columns: 1fr; }
	.tgc-grid[data-cols-m="2"] { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.tgc-btn, .tgc-card { transition: none; }
	.tgc-btn:hover, .tgc-card:hover { transform: none; }
}