/* Tanova Studio front — schemes, backgrounds, icons, video, visibility */

.tns-section--loose {
	padding-top: clamp(4rem, 10vw, 7rem);
	padding-bottom: clamp(4rem, 10vw, 7rem);
}

/* —— Colour schemes ——
 * Solid colours / button / link tokens come from Theme settings
 * (printed as CSS variables on .tns-scheme-*). These rules only add
 * decorative gradients that sit on top of the scheme background.
 */
.tns-scheme-default {
	background: transparent;
}

.tns-scheme-dark {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 42%);
}

.tns-scheme-accent {
	background-image:
		radial-gradient(ellipse 90% 70% at 15% 0%, rgba(245, 240, 230, 0.22), transparent 55%),
		radial-gradient(ellipse 60% 50% at 100% 100%, rgba(245, 240, 230, 0.1), transparent 50%);
}

.tns-scheme-accent .tn-eyebrow {
	text-shadow: 0 0 24px rgba(245, 240, 230, 0.35);
}

.tns-scheme-accent .tn-feature,
.tns-scheme-accent .tn-card {
	border-color: rgba(245, 240, 230, 0.2);
	background: rgba(10, 16, 20, 0.65);
}

.tns-scheme-warm {
	background-image: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(232, 201, 168, 0.14), transparent 55%);
}

/* Buttons always use scheme tokens (never inherit prose link cream). */
.tns-section a.tn-btn,
.tns-cta-band a.tn-btn,
.tn-hero a.tn-btn {
	text-decoration: none !important;
}

.tns-cta-band.tns-scheme-default {
	/* tokens from Theme settings; light wash only */
	background-image:
		radial-gradient(ellipse 70% 80% at 50% 0%, rgba(232, 201, 168, 0.12), transparent 55%);
}

.tns-cta-band.tns-scheme-warm {
	background-image:
		radial-gradient(ellipse 70% 80% at 50% 0%, rgba(232, 201, 168, 0.12), transparent 55%);
}

.tns-cta-band.tns-scheme-accent {
	background-image:
		radial-gradient(ellipse 70% 80% at 50% 0%, rgba(245, 240, 230, 0.16), transparent 55%);
}

/* Hero scheme tint */
.tn-hero.tns-scheme-accent::before,
.tn-hero.tns-scheme-warm::before,
.tn-hero.tns-scheme-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.tn-hero.tns-scheme-accent::before {
	background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(245, 240, 230, 0.2), transparent 60%);
}

.tn-hero.tns-scheme-warm::before {
	background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232, 201, 168, 0.16), transparent 60%);
}

.tn-hero.tns-scheme-dark::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35));
}

.tn-hero.tns-scheme-accent .tn-hero__content,
.tn-hero.tns-scheme-warm .tn-hero__content,
.tn-hero.tns-scheme-dark .tn-hero__content {
	position: relative;
	z-index: 2;
}

/* —— Section background images ——
 * Background is always behind content (feature cards, rich text, etc.).
 */
.tns-section.tns-has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: var(--tns-min-h, 0);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tns-section.tns-bg-full {
	min-height: 100vh;
}

.tns-section.tns-bg-adapt {
	min-height: 0;
}

.tns-section.tns-has-bg > .tns-section__bg {
	position: absolute !important;
	inset: 0;
	z-index: 0 !important;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.tns-section__bg img,
.tns-section__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #0a0a0a;
	pointer-events: none;
}

.tns-section__bg video::-webkit-media-controls,
.tns-section__bg video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0;
	pointer-events: none;
}

/* Adapt: bg still fills the section; content stacks on top, not under the image in document flow */
.tns-section.tns-bg-adapt.tns-has-bg {
	min-height: var(--tns-min-h, 320px);
}

.tns-section.tns-bg-adapt .tns-section__bg img,
.tns-section.tns-bg-adapt .tns-section__bg video {
	min-height: var(--tns-min-h, 320px);
	object-fit: cover;
}

.tns-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--tns-overlay-color, #0a0a0a);
	opacity: var(--tns-overlay, 0.55);
}

/* Any direct child except the bg layer sits above the image */
.tns-section.tns-has-bg > *:not(.tns-section__bg) {
	position: relative;
	z-index: 2;
}

.tns-section.tns-has-bg > .tns-section__inner,
.tns-section.tns-has-bg > .tn-container,
.tns-section.tns-has-bg .tn-features {
	position: relative;
	z-index: 2;
}

/* Feature cards over photo backgrounds stay readable */
.tns-section.tns-has-bg .tn-feature {
	background: rgba(10, 10, 10, 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(245, 240, 230, 0.18);
	border-radius: 12px;
	padding: 1.25rem 1.35rem;
}

/* —— Visibility —— */
@media (min-width: 781px) {
	.tns-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 780px) {
	.tns-hide-mobile {
		display: none !important;
	}
}

/* —— Featured single sunbed —— */
.tns-bed-feature__card {
	margin-top: 2rem;
	width: 100%;
}

.tns-bed-feature--w-narrow .tns-bed-feature__card {
	max-width: 18rem;
}

.tns-bed-feature--w-normal .tns-bed-feature__card {
	max-width: 22.5rem;
}

.tns-bed-feature--w-wide .tns-bed-feature__card {
	max-width: 32rem;
}

.tns-bed-feature--center .tns-bed-feature__card {
	margin-inline: auto;
}

.tns-bed-feature--center .tn-eyebrow,
.tns-bed-feature--center h2,
.tns-bed-feature--center .lead {
	text-align: center;
}

.tns-bed-feature--center .lead {
	margin-inline: auto;
}

/* —— Icon feature grid —— */
.tns-icons .tns-icon-grid {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.tns-icon-grid--2 {
	grid-template-columns: 1fr;
}

.tns-icon-grid--3,
.tns-icon-grid--4 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.tns-icon-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.tns-icon-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.tns-icon-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.tns-icon-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.tns-icon-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tns-icon-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--tn-line, rgba(255, 255, 255, 0.12));
	border-radius: 12px;
	padding: 1.5rem 1.35rem 1.6rem;
	height: 100%;
}

.tns-icon-card__icon {
	width: 40px;
	height: 40px;
	margin-bottom: 1.1rem;
	color: var(--tn-accent, #f5f0e6);
}

.tns-icon-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tns-icon-card__icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.tns-icon-card h3 {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	margin: 0 0 0.65rem;
}

.tns-icon-card p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tn-muted, #a8a29a);
}

/* —— Video band —— */
.tns-video-band {
	position: relative;
	overflow: hidden;
	min-height: var(--tns-video-min-h, 560px);
	display: flex;
	align-items: center;
	padding: clamp(3rem, 8vw, 5rem) 0;
}

.tns-video-band--full {
	min-height: 100vh;
}

.tns-video-band--adapt {
	min-height: 0;
	aspect-ratio: 16 / 9;
}

.tns-video-band__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tns-video-band__video,
.tns-video-band__poster,
.tns-video-band__iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

.tns-video-band__iframe {
	position: absolute;
	inset: 0;
	/* Crop letterboxing on YouTube background-style embeds */
	transform: scale(1.2);
	pointer-events: none;
}

.tns-video-band__placeholder {
	position: absolute;
	inset: 0;
	background: #0a0a0a;
}

.tns-video-band__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #0a0a0a;
	opacity: var(--tns-video-overlay, 0.55);
}

.tns-video-band__content {
	position: relative;
	z-index: 2;
	max-width: 40rem;
}

.tns-video-band__content .lead {
	color: rgba(255, 255, 255, 0.78);
}

/* —— Blog cards —— */
.tns-blog-cards__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.tns-blog-cards__grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tns-blog-cards__grid--3,
	.tns-blog-cards__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.tns-blog-cards__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tns-blog-cards__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tns-blog-card {
	border: 1px solid rgba(245, 240, 230, 0.14);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(10, 10, 10, 0.55);
	height: 100%;
}

.tns-blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tns-blog-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #121212;
}

.tns-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tns-blog-card__media--empty {
	background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}

.tns-blog-card__body {
	padding: 1.1rem 1.2rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
}

.tns-blog-card__date {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.65;
}

.tns-blog-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.tns-blog-card__excerpt {
	margin: 0;
	opacity: 0.8;
	font-size: 0.95rem;
	line-height: 1.5;
	flex: 1;
}

.tns-blog-card__cta {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tn-accent, #f5f0e6);
	margin-top: 0.35rem;
}

.tns-post__banner2 {
	margin: 2rem 0 0;
}

.tns-post__banner2 img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}