/* ==========================================================================
   Bilremisen — Service cards  ([bilremisen_cards], inc/service-cards.php)
   Large image cards (.servicesCardContainer > .serviceCard), then a navy panel
   (.serviceMore > .serviceTiles > .serviceTile) that stays hidden until the
   "Se flere faciliteter" toggle (.serviceMore__toggle) opens it.
   ========================================================================== */

/* ---- Tokens (edit here — scoped, no :root) ---------------------------- */
.serviceCards,
.servicesCardContainer {
	--card-radius: 10px;
	--card-gap: 1.2rem;
	--card-min-h: 440px;
	--card-display: "Antic Didone", serif;
	--card-ease: cubic-bezier(.22, .61, .36, 1);
	--tile-bg: #2f4157;
	--tile-line: rgba(255, 255, 255, .12);
	--toggle-color: #2f4157;          /* toggle text + chevron ring */
	--toggle-ink: #fff;               /* chevron arrow on hover */
}

/* On dark (gradient) sections the toggle is white. */
.gradient .serviceCards { --toggle-color: #fff; --toggle-ink: #2f4157; }
.gradient .serviceMore { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* Defensive: if the Bricks parent block is a grid, span the whole row. */
.brxe-shortcode:has(> .serviceCards),
.brxe-code:has(> .serviceCards) { grid-column: 1 / -1; width: 100%; }

.serviceCards {
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	width: 100%;
}

/* ---- Large cards: grid ------------------------------------------------ */
.servicesCardContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--card-gap);
	align-items: stretch;
}

/* ---- Large card (whole card is a link) -------------------------------- */
.servicesCardContainer .serviceCard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;        /* content anchored to bottom */
	min-height: var(--card-min-h);
	padding: 2rem;
	overflow: hidden;
	isolation: isolate;               /* keep image/overlay inside the card */
	border-radius: var(--card-radius);
	color: #fff;
	text-decoration: none;
	opacity: 1;                       /* override older page-level .serviceCard { opacity: 0 } */
	transform: none;
	transition: box-shadow .6s var(--card-ease);
}
.servicesCardContainer .serviceCard:hover {
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
}

/* photo */
.servicesCardContainer .serviceCard__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--card-ease);
}
.servicesCardContainer .serviceCard:hover .serviceCard__img { transform: scale(1.06); }

/* gradient overlay (darkens on hover) */
.servicesCardContainer .serviceCard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10,12,23,.05), rgba(10,12,23,.3) 55%, rgba(10,12,23,.72));
	transition: background .7s var(--card-ease);
}
.servicesCardContainer .serviceCard:hover::after {
	background: linear-gradient(180deg, rgba(10,12,23,.25), rgba(10,12,23,.62) 50%, rgba(10,12,23,.95));
}

/* number badge */
.servicesCardContainer .serviceCard__num {
	position: absolute;
	top: 1.8rem;
	left: 2rem;
	font-family: var(--card-display);
	color: #fff;
	font-size: .9rem;
}

/* title */
.servicesCardContainer .serviceCard__title {
	margin: 0;
	color: #fff;
	font-family: var(--card-display);
	font-size: 1.8rem;
	line-height: 1.15;
	font-weight: 400;
}

/* hover-reveal block (paragraph + link hidden until hover) */
.servicesCardContainer .serviceCard__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .65s var(--card-ease), opacity .5s ease;
}
.servicesCardContainer .serviceCard__reveal-in {
	overflow: hidden;
	min-height: 0;
	padding-top: .85rem;
}
.servicesCardContainer .serviceCard:hover .serviceCard__reveal,
.servicesCardContainer .serviceCard:focus-visible .serviceCard__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

/* paragraph */
.servicesCardContainer .serviceCard__text,
.servicesCardContainer .serviceCard__text * {
	color: rgba(255, 255, 255, .82);
	font-family: "Inter", sans-serif;
	font-size: .92rem;
	line-height: 1.5;
	max-width: 34ch;
}
.servicesCardContainer .serviceCard__text { margin-bottom: 1rem; }
.servicesCardContainer .serviceCard__text :last-child { margin-bottom: 0; }

/* uppercase arrow link */
.servicesCardContainer .serviceCard__link {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

/* ---- Panel with the smaller services ---------------------------------- */
/* Collapsed: fully hidden (and out of the tab order) — only the toggle shows. */
.serviceMore {
	max-height: 0;
	margin-top: calc(-1 * var(--card-gap));
	overflow: hidden;
	visibility: hidden;
	border-radius: var(--card-radius);
	background: var(--tile-bg);
	transition: max-height .8s var(--card-ease), margin-top .8s var(--card-ease), visibility 0s .8s;
}
.serviceCards.is-open .serviceMore {
	max-height: var(--open-h, 2000px);
	margin-top: 0;
	visibility: visible;
	transition: max-height .8s var(--card-ease), margin-top .8s var(--card-ease), visibility 0s;
}

.serviceMore__title {
	margin: 0;
	padding: 1.6rem 1.8rem 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* Row dividers: every tile has a bottom line; the last row's is clipped by the panel. */
.serviceTiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: -1px;
}
.serviceTiles .serviceTile {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.6rem 1.8rem 1.7rem;
	border-bottom: 1px solid var(--tile-line);
	color: #fff;
	text-decoration: none;
	transition: background .4s var(--card-ease);
}
.serviceTiles .serviceTile:not(:nth-child(3n+1)) { border-left: 1px solid var(--tile-line); }
.serviceTiles .serviceTile:hover { background: rgba(255, 255, 255, .05); }

.serviceTiles .serviceTile__num {
	font-family: var(--card-display);
	font-size: .9rem;
	color: rgba(255, 255, 255, .7);
}

.serviceTiles .serviceTile__title {
	margin: 0;
	color: #fff;
	font-family: var(--card-display);
	font-size: 1.4rem;
	line-height: 1.15;
	font-weight: 400;
}

.serviceTiles .serviceTile__text,
.serviceTiles .serviceTile__text * {
	color: rgba(255, 255, 255, .78);
	font-family: "Inter", sans-serif;
	font-size: .88rem;
	line-height: 1.5;
}
.serviceTiles .serviceTile__text :first-child { margin-top: 0; }
.serviceTiles .serviceTile__text :last-child { margin-bottom: 0; }

.serviceTiles .serviceTile__link {
	margin-top: auto;                 /* pin to the bottom of the tile */
	padding-top: .4rem;
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
}

/* Contact tile (last tile) */
.serviceTiles .serviceTile--cta { background: #1d2836; }
.serviceTiles .serviceTile--cta:hover { background: #18212d; }
.serviceTiles .serviceTile--cta .serviceTile__title { margin-top: 2.75rem; } /* no number: line up with the neighbouring titles */
.serviceTiles .serviceTile--cta .serviceTile__link {
	align-self: flex-start;
	padding: .75rem 1.3rem;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 100px;
	transition: background .3s ease, color .3s ease;
}
.serviceTiles .serviceTile--cta:hover .serviceTile__link { background: #fff; color: #1d2836; }

/* ---- Toggle ("Se flere faciliteter" + chevron) ------------------------ */
.serviceMore__toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	align-self: center;
	margin-top: .4rem;
	padding: .4rem 1rem;
	border: 0;
	background: none;
	color: var(--toggle-color);
	font-family: "Inter", sans-serif;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.serviceMore__chev {
	box-sizing: content-box;
	padding: 9px;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: transform .6s var(--card-ease), background .3s ease;
}
.serviceMore__toggle:hover .serviceMore__chev { background: var(--toggle-color); }
.serviceMore__toggle:hover .serviceMore__chev path { stroke: var(--toggle-ink); }
.serviceCards.is-open .serviceMore__chev { transform: rotate(180deg); }
.serviceMore__toggle:focus-visible { outline: 2px solid var(--toggle-color); outline-offset: 4px; border-radius: 6px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 991px) {
	.servicesCardContainer { grid-template-columns: repeat(2, 1fr); }
	.serviceTiles { grid-template-columns: repeat(2, 1fr); }
	.serviceTiles .serviceTile:not(:nth-child(3n+1)) { border-left: 0; }
	.serviceTiles .serviceTile:nth-child(2n) { border-left: 1px solid var(--tile-line); }
}
@media (max-width: 600px) {
	.servicesCardContainer { grid-template-columns: 1fr; --card-min-h: 300px; }
	/* Text is always shown on phones, so it can reach the top: number goes top-right
	   and the content keeps clear of its row. */
	.servicesCardContainer .serviceCard { padding: 3.6rem 1.6rem 1.6rem; }
	.servicesCardContainer .serviceCard__num { top: 1.4rem; right: 1.6rem; left: auto; }
	.serviceTiles { grid-template-columns: 1fr; }
	.serviceTiles .serviceTile:nth-child(2n) { border-left: 0; }
	.serviceTiles .serviceTile--cta .serviceTile__title { margin-top: 0; }
}

/* Touch devices have no hover — reveal the text by default. */
@media (hover: none) {
	.servicesCardContainer .serviceCard__reveal { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.serviceMore,
	.serviceCards.is-open .serviceMore,
	.serviceMore__chev { transition: none; }
}