/**
 * TechCentera widget styles.
 * Loaded conditionally — only on pages that use a TechCentera widget.
 * Uses CSS custom properties so the theme can override colours globally.
 */
:root {
	--tc-accent: #b8892b;
	--tc-ink: #14110d;
	--tc-muted: #6b6157;
	--tc-radius: 6px;
}

/* Buttons ------------------------------------------------------------ */
.tc-btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--tc-radius);
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tc-btn:hover { transform: translateY(-1px); }
.tc-btn--primary { background: var(--tc-accent); color: #fff; }
.tc-btn--ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; }
.tc-btn--small { padding: 9px 18px; background: var(--tc-ink); color: #fff; font-size: 14px; }

/* Hero --------------------------------------------------------------- */
.tc-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
	overflow: hidden;
}

/* Background image layer — THIS makes the chosen background image show.
   The widget's Background control fills this element; here we make it a
   full-size layer behind everything else. */
.tc-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Colour overlay sits on top of the image, below the content. */
.tc-hero__overlay {
	position: absolute;
	inset: 0;
}

/* Content sits above both layers. */
.tc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.tc-hero__eyebrow { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; margin-bottom: 16px; }
.tc-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin: 0 0 16px; }
.tc-hero__subtitle { font-size: 1.15rem; margin: 0 0 12px; }
.tc-hero__desc { font-size: 1rem; margin: 0 0 28px; }

/* Buttons container — a flex box the widget's "Buttons Layout" controls
   drive (direction, justify, align, gap, wrap). These are sensible defaults. */
.tc-hero__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
}

/* Watch card + grid -------------------------------------------------- */
.tc-grid { display: grid; gap: 28px; }
.tc-watch {
	background: #fff;
	border-radius: var(--tc-radius);
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.tc-watch__media { position: relative; display: block; }
.tc-watch__media img { width: 100%; height: auto; display: block; }
.tc-watch__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--tc-accent); color: #fff;
	font-size: 12px; padding: 4px 10px; border-radius: 100px;
}
.tc-watch__body { padding: 20px; }
.tc-watch__brand { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tc-muted); }
.tc-watch__model { font-size: 1.1rem; margin: 6px 0 10px; }
.tc-watch__model a { color: var(--tc-ink); text-decoration: none; }
.tc-watch__price { display: block; font-size: 1.25rem; font-weight: 600; color: var(--tc-ink); margin-bottom: 14px; }

/* Info card ---------------------------------------------------------- */
.tc-info { text-align: center; padding: 32px 24px; }
.tc-info__icon { font-size: 40px; margin-bottom: 16px; color: var(--tc-accent); }
.tc-info__icon svg { width: 40px; height: 40px; fill: var(--tc-accent); }
.tc-info__title { font-size: 1.25rem; margin: 0 0 10px; }
.tc-info__text { color: var(--tc-muted); margin: 0 0 16px; }
.tc-info__link { color: var(--tc-accent); font-weight: 500; text-decoration: none; }