/*
 * "Další služby" — the additional-services page (Figma 446:2883) and its
 * detail pages (Mouthguard, 447:4319): extra-cards, extra-about, indications
 * and benefits. The rest of those pages reuse existing sections.
 */

/* ---- extra-cards — Figma 447:3538 ---- */

.extra-cards__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.extra-cards__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	text-align: center;
}

.extra-cards__text,
.benefits__text {
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.extra-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.extra-card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 12px 12px 26px;
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.extra-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 626 / 363;
	object-fit: cover;
	border-radius: 16px;
}

.extra-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 0 14px;
}

.extra-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.extra-card__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: var(--h4-weight);
	line-height: var(--h4-lh);
}

.extra-card__desc {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
}

/* The button sits on the card's floor, so both buttons line up. */
.extra-card .btn { margin-top: auto; }

/* ---- extra-about — Figma 447:4318 ---- */

.extra-about__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.extra-about__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.extra-about__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 620 / 482;
	object-fit: cover;
}

.extra-about__text {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.extra-about__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.extra-about__title { margin: 0; }

.extra-about__body {
	display: flex;
	flex-direction: column;
	gap: 21px;
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

/* ---- indications — Figma 447:4412 ---- */

.indications__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.indications__title { max-width: 706px; margin-inline: auto; }

ul.indications__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.indication {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

.indication__top {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: 25px;
	border-bottom: 1px solid var(--color-neutral-6);
}

.indication__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 10px;
	background: var(--color-neutral-7);
}

/* 14x10.07 export with preserveAspectRatio="none": size by width only. */
.indication__icon img { width: 14px; height: auto; }

.indication__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-lh);
	letter-spacing: var(--h6-ls);
}

.indication__text {
	padding: 25px;
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
}

/* ---- benefits — Figma 447:4892 ---- */

.benefits__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.benefits__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	max-width: 970px;
	margin-inline: auto;
	text-align: center;
}

.benefits__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

ul.benefits__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefit {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 20px 20px 30px;
	border: 1px solid var(--color-neutral-4);
	border-radius: var(--radius-lg);
}

.benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--color-primary);
}

.benefit__icon img { width: 20px; height: 20px; }

.benefit__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.benefit__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-lh);
	letter-spacing: var(--h6-ls);
}

.benefit__desc {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: var(--body-secondary-ls);
}

@media (max-width: 767px) {
	.extra-card .btn { align-self: stretch; }
}

@media (min-width: 768px) {
	.extra-cards__grid,
	ul.indications__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	ul.benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	/* Figma: 150px under the hero, cards 650 wide with 40 between. */
	.extra-cards { padding-top: 150px; }
	.extra-cards__container { gap: 60px; }
	.extra-cards__grid { gap: 40px; }
	.extra-card { gap: 45px; min-height: 680px; padding-bottom: 38px; }
	.extra-card__title { font-size: var(--h4-size); }

	.extra-about__container {
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		gap: 60px;
	}

	.extra-about__media { flex: 0 1 620px; }
	.extra-about__text { flex: 0 1 660px; justify-content: space-between; }
	.extra-about__top { gap: 50px; }
	.extra-about__title { max-width: 508px; }
	.extra-about__body { max-width: 541px; }

	.indications__container,
	.benefits__container { gap: 60px; }
	ul.indications__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.indication { min-height: 182px; }

	.benefits__head { gap: 40px; }
	.benefit { gap: 50px; }
}