/* ==========================================================================
   TD Service — Global Responsive System
   Single source of truth for spacing, typography, grids, and media rules.

   Breakpoints:
   - Mobile:  max-width: 767px
   - Tablet:  min-width: 768px and max-width: 1023px
   - Desktop: min-width: 1024px
   ========================================================================== */

/* -------------------------------------------------------------------------
   Desktop defaults (min-width: 1024px)
   ------------------------------------------------------------------------- */

:root {
	--td-container-padding: 40px;
	--td-section-padding: 80px;
	--td-page-hero-height: 800px;

	--td-h1-size: 3.5rem;
	--td-h2-size: 2.5rem;
	--td-h3-size: 1.5rem;
	--td-body-size: 1rem;
	--td-body-line-height: 1.8;

	--td-grid-columns: 3;
	--td-team-grid-columns: 4;

	--td-service-card-spacing: 20px;
	--td-service-card-inset-x: 19px;

	--td-image-max-height: none;
}

/* -------------------------------------------------------------------------
   Containers
   ------------------------------------------------------------------------- */

.container,
.site-container,
.header-container,
.footer-container {
	padding-right: var(--td-container-padding);
	padding-left: var(--td-container-padding);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

body {
	font-size: var(--td-body-size);
	line-height: var(--td-body-line-height);
}

h1,
.hero__title,
.page-hero__title {
	font-size: var(--td-h1-size);
}

h2,
.section-title,
.section-title--dark,
.section-title--light {
	font-size: var(--td-h2-size);
}

h3,
.service-card__title,
.team-card__name {
	font-size: var(--td-h3-size);
}

p,
.about-section__text,
.services-section__intro,
.team-section__intro,
.craft-section__text,
.belief-section__text,
.tjenester-intro__text,
.personvern-section__text,
.personvern-section__list,
.footer-column__text {
	font-size: var(--td-body-size);
	line-height: var(--td-body-line-height);
}

/* -------------------------------------------------------------------------
   Section vertical padding (via --td-section-padding in style.css)
   ------------------------------------------------------------------------- */

.personvern-section__inner {
	padding-top: var(--td-section-padding);
	padding-bottom: var(--td-section-padding);
}

/* -------------------------------------------------------------------------
   Grid layouts
   ------------------------------------------------------------------------- */

.services-grid,
.highlights {
	grid-template-columns: repeat(var(--td-grid-columns), minmax(0, 1fr));
}

.team-grid {
	grid-template-columns: repeat(var(--td-team-grid-columns), minmax(0, 1fr));
}

/* -------------------------------------------------------------------------
   Content images (excludes heroes, slideshow, decorative backgrounds)
   ------------------------------------------------------------------------- */

.about-section__photo,
.craft-section__photo,
.belief-section__photo,
.tjenester-intro__photo,
.kontakt-panel__photo,
.om-strength__banner img {
	width: 100%;
	max-height: var(--td-image-max-height);
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   Tablet (768px – 1023px)
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--td-container-padding: 48px;
		--td-section-padding: 60px;
		--td-page-hero-height: 600px;

		--td-h1-size: 2.5rem;
		--td-h2-size: 2rem;
		--td-h3-size: 1.25rem;

		--td-grid-columns: 2;
		--td-team-grid-columns: 2;

		--td-image-max-height: 400px;
	}

	/* Flow layout for service cards — consistent internal padding */
	.service-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		min-height: 280px;
		padding: var(--td-service-card-spacing);
	}

	.service-card__icon {
		position: static;
		margin: 0 0 16px;
		font-size: 48px;
	}

	.service-card__title,
	.service-card__text {
		position: static;
		right: auto;
		left: auto;
		width: 100%;
	}

	.service-card__text {
		flex: 1 1 auto;
		margin-bottom: 0;
	}

	.service-card__cta {
		position: static;
		margin-top: var(--td-service-card-spacing);
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Mobile (max-width: 767px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--td-container-padding: 16px;
		--td-section-padding: 40px;
		--td-page-hero-height: 400px;
		--td-header-height: 72px;

		--td-h1-size: 2rem;
		--td-h2-size: 1.75rem;
		--td-h3-size: 1.1rem;

		--td-grid-columns: 1;
		--td-team-grid-columns: 1;

		--td-image-max-height: 300px;
	}

	.service-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		height: auto;
		min-height: 280px;
		padding: var(--td-service-card-spacing);
	}

	.service-card__icon {
		position: static;
		margin: 0 0 16px;
		font-size: 40px;
	}

	.service-card__title,
	.service-card__text {
		position: static;
		right: auto;
		left: auto;
		width: 100%;
	}

	.service-card__text {
		flex: 1 1 auto;
	}

	.service-card__cta {
		position: static;
		margin-top: var(--td-service-card-spacing);
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Small mobile refinements (max-width: 480px)
   ------------------------------------------------------------------------- */

@media (max-width: 480px) {
	:root {
		--td-page-hero-height: 360px;
	}
}