/**
 * Sjösportskolan2: Gutenberg-first patterns.
 * Padding, margin, background, border, shadow and gap live on the blocks.
 * This file only covers things Gutenberg cannot style (list markers,
 * quote mark, video ratio, icon shrink and a few layout fallbacks).
 */

.ss2 {
	--ss2-quote-indent: 5.5rem;
	--ss2-quote-hang: 2.35rem;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.ss2 img,
.ss2 video {
	height: auto;
	max-width: 100%;
}

.ss2-icon {
	flex-shrink: 0;
	overflow: hidden;
}

.ss2-icon img,
.ss2-icon svg {
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 100%;
}

.ss2.wp-block-details > summary {
	color: var(--ss-teal);
	cursor: pointer;
	font-family: var(--ss-font-heading);
	font-weight: 700;
	padding-block: 1rem;
	padding-inline: 1.2rem;
}

.ss2.wp-block-details[open] > summary {
	border-block-end: 1px solid rgba(16, 46, 74, 0.1);
	margin-block-end: 0.5rem;
}

.ss2.wp-block-details > :not(summary) {
	margin-inline: clamp(1rem, 3vw, 1.5rem);
}

.ss2.wp-block-details > :last-child {
	margin-block-end: clamp(1rem, 3vw, 1.5rem);
}

.ss2-video-frame:not(:has(iframe)) {
	aspect-ratio: 16 / 9;
	background: var(--ss-navy);
	min-block-size: 12rem;
}

.ss2-video-frame .wp-block-video,
.ss2-video-frame video {
	aspect-ratio: 16 / 9;
	background: var(--ss-navy);
	display: block;
	margin: 0;
	max-width: 100%;
	min-block-size: 12rem;
	width: 100%;
}

.ss2-fact-single {
	max-inline-size: 18rem;
	width: 100%;
}

.ss2-video-frame :is(.wp-block-embed, .wp-block-embed__wrapper, iframe) {
	border: 0;
	display: block;
	max-width: 100%;
	width: 100%;
}

.ss2.wp-block-columns {
	align-items: start;
}

.ss2.wp-block-columns.ss2-framed {
	align-items: stretch;
}

.ss2.wp-block-columns > .wp-block-column {
	min-inline-size: 0;
}

.ss2.wp-block-columns .wp-block-image {
	margin: 0;
}

.ss2-note {
	container-type: inline-size;
}

.ss2-note.ss2-note--slim > .ss2-icon {
	flex-shrink: 0;
}

.ss2-note.ss2-note--slim > p {
	min-inline-size: 0;
}

.ss2-quote {
	max-inline-size: 44rem;
	position: relative;
}

.ss2-quote::before {
	color: var(--ss-orange);
	content: "\201C";
	font-family: var(--ss-font-heading);
	font-size: 3.25rem;
	font-style: normal;
	font-weight: 700;
	inset-block-start: -0.35rem;
	inset-inline-start: calc(var(--ss2-quote-indent) - var(--ss2-quote-hang));
	line-height: 1;
	pointer-events: none;
	position: absolute;
}

.ss2-quote-body {
	max-inline-size: 44rem;
}

@media (max-width: 40rem) {
	.ss2-quote-body {
		padding-inline-start: 0 !important;
	}
}

.ss2-quote-cover {
	overflow: clip;
}

.ss2-quote-cover .wp-block-cover__inner-container {
	inline-size: 100%;
}

.ss2-quote-cover .wp-block-quote {
	border: 0;
	color: var(--ss-white);
	font-family: var(--ss-font-heading);
	font-style: italic;
	font-weight: 500;
	margin: 0;
	max-inline-size: 36rem;
	padding-block-start: 1.6rem;
	padding-inline: 0;
	position: relative;
}

.ss2-quote-cover .wp-block-quote::before {
	color: var(--ss-white);
	content: "\201C";
	font-family: var(--ss-font-heading);
	font-size: clamp(3rem, 8vw, 4.5rem);
	font-style: normal;
	font-weight: 700;
	inset-block-start: -1.2rem;
	inset-inline-start: 0;
	line-height: 1;
	opacity: 0.9;
	pointer-events: none;
	position: absolute;
}

.ss2-quote-cover .wp-block-quote cite {
	display: block;
	font-size: var(--ss-fs-caption);
	font-style: normal;
	margin-block-start: 0.5rem;
	opacity: 0.85;
}

/*
 * Begreppslista (fri storlek):
 * Storlek styrs på Bildram (Group): Width Fixed + Minimum height.
 * Bilden fyller ramen. Rör inte flex-basis - annars ignoreras Fixed-bredd.
 */
.ss2-concept-media-free.ss2,
.ss2-concept-media-free {
	max-width: none;
}

.ss2-concept-media-free .wp-block-group:has(> .ss2-concept-frame) {
	align-items: flex-start;
}

.ss2-concept-media-free .ss2-concept-frame {
	flex-shrink: 0;
	max-width: none;
	min-width: 0;
	overflow: hidden;
	position: relative;
	/* min-height från blocket = synlig höjd när bilden är absolut */
}

.ss2-concept-media-free .ss2-concept-frame > .wp-block-image {
	height: 100%;
	inset: 0;
	margin: 0 !important;
	max-width: none !important;
	position: absolute;
	width: 100% !important;
}

.ss2-concept-media-free .ss2-concept-frame .wp-block-image img,
.ss2.ss2-concept-media-free .ss2-concept-frame img {
	aspect-ratio: auto !important;
	display: block;
	height: 100% !important;
	max-height: none !important;
	max-width: none !important;
	object-fit: cover;
	width: 100% !important;
}

@media (max-width: 36rem) {
	.ss2-concept-media-free .wp-block-group:has(> .ss2-concept-frame) {
		flex-wrap: wrap !important;
	}

	.ss2-concept-media-free .ss2-concept-frame {
		flex-basis: 100% !important;
		max-width: 100%;
		min-height: 10rem;
		width: 100% !important;
	}
}

ul.is-style-ss-summary {
	list-style: none;
	margin-block-start: 0.65rem;
	padding: 0;
}

ul.is-style-ss-summary li {
	align-items: center;
	border-block-end: 1px solid color-mix(in srgb, var(--ss-navy) 9%, transparent);
	display: flex;
	gap: 0.8rem;
	padding-block: 0.65rem;
}

ul.is-style-ss-summary li::before {
	aspect-ratio: 1;
	background-color: var(--ss-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.7 11.2 12.5 4.9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 68%;
	block-size: 1.1rem;
	border-radius: 50%;
	content: "";
	display: grid;
	flex: 0 0 1.1rem;
	inline-size: 1.1rem;
	place-items: center;
}

@property --ss2-lh {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

.ss2 :is(ul.is-style-ss-checklist, ol.is-style-ss-numbered, ul.is-style-checkmark-list) li {
	--ss2-lh: 1lh;
}

.ss2 ul.is-style-ss-checklist li::before {
	inset-block-start: calc(0.4rem + (var(--ss2-lh) - 1.5rem) / 2);
}

.ss2 ol.is-style-ss-numbered li::before {
	inset-block-start: calc(0.4rem + (var(--ss2-lh) - 1.65rem) / 2);
}

.ss2 ul.is-style-checkmark-list {
	list-style: none;
	padding: 0;
}

.ss2 ul.is-style-checkmark-list li {
	border-block-end: 1px solid color-mix(in srgb, var(--ss-navy) 10%, transparent);
	padding: 0.65rem 0 0.65rem 1.8rem;
	position: relative;
}

.ss2 ul.is-style-checkmark-list li::before {
	align-items: center;
	background: var(--ss-teal);
	block-size: 1.25rem;
	border-radius: 50%;
	color: var(--ss-white);
	content: "\2713";
	display: grid;
	font-size: 0.7rem;
	inline-size: 1.25rem;
	inset-block-start: calc(0.65rem + (var(--ss2-lh) - 1.25rem) / 2);
	inset-inline-start: 0;
	line-height: 1;
	place-items: center;
	position: absolute;
}

@media (max-width: 64rem) {
	.ss2-fact-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 40rem) {
	.ss2-fact-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 48rem) {
	.ss2.ss2-reverse {
		flex-direction: column-reverse;
	}

	.ss2.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		inline-size: 100%;
	}

	.ss2-note.ss2-note--callout {
		padding-block: 1.25rem !important;
		padding-inline-end: 1.1rem !important;
		padding-inline-start: 0.8rem !important;
	}

	.ss2-note.ss2-note--callout > .ss2-icon {
		flex-basis: 3.75rem !important;
		max-inline-size: 3.75rem;
		min-block-size: 3.75rem;
	}

	.ss2-note.ss2-note--slim {
		padding-block: 0.85rem !important;
		padding-inline-end: 1rem !important;
		padding-inline-start: 0.75rem !important;
	}

	.ss2-note.ss2-note--slim > .ss2-icon {
		flex-basis: 2.85rem !important;
		max-inline-size: 2.85rem;
		min-block-size: 2.85rem;
	}
}

@container (max-inline-size: 28rem) {
	.ss2-note.ss2-note--callout {
		padding-block: 1.25rem !important;
		padding-inline-end: 1.1rem !important;
		padding-inline-start: 0.8rem !important;
	}

	.ss2-note.ss2-note--callout > .ss2-icon {
		flex-basis: 3.75rem !important;
		max-inline-size: 3.75rem;
		min-block-size: 3.75rem;
	}

	.ss2-note.ss2-note--slim {
		padding-block: 0.85rem !important;
		padding-inline-end: 1rem !important;
		padding-inline-start: 0.75rem !important;
	}

	.ss2-note.ss2-note--slim > .ss2-icon {
		flex-basis: 2.85rem !important;
		max-inline-size: 2.85rem;
		min-block-size: 2.85rem;
	}
}