/*
 * Documents and media of a product card.
 *
 * Follows the theme rather than introducing a look of its own: the same radii,
 * the same hairlines, the same accent. The block should read as a part of the
 * card, not as something bolted onto it.
 */

.sh-docs__group + .sh-docs__group {
	margin-top: 32px;
}

/* One step above the name of a document, so a group reads as a group and not
   as another row in the list */
.sh-docs__group-title {
	margin: 0 0 12px;
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: #171717;
}

.sh-docs__group-note {
	margin: -8px 0 12px;
	font-size: 13px;
	color: rgb(108, 108, 108);
}

/* Documents */

.sh-docs__list {
	max-width: 860px;
}

.sh-doc {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid #ededed;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.sh-doc + .sh-doc {
	margin-top: 8px;
}

.sh-doc:hover,
.sh-doc:focus-visible {
	border-color: #2b7fff;
	background: #f7faff;
	text-decoration: none;
}

.sh-doc__icon {
	flex: 0 0 44px;
	height: 52px;
	padding-bottom: 6px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: 8px;
	background: linear-gradient(180deg, #7f8b9a, #5b6673);
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .04em;
	color: #fff;
}

.sh-doc__icon--pdf { background: linear-gradient(180deg, #f86a5f, #e2483b); }
.sh-doc__icon--dwg { background: linear-gradient(180deg, #6aa6f8, #2b7fff); }
.sh-doc__icon--zip { background: linear-gradient(180deg, #f2b25c, #d98c1f); }

.sh-doc__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sh-doc__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	color: #171717;
}

.sh-doc__meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 20px;
	color: rgb(108, 108, 108);
}

.sh-doc__action {
	flex: 0 0 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f3f6fb;
	color: #2b7fff;
	transition: background-color .15s ease, color .15s ease;
}

.sh-doc:hover .sh-doc__action {
	background: #2b7fff;
	color: #fff;
}

/* Drawings and schemes */

.sh-media {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* A caption of two lines next to one of a single line left the two file sizes
   at different heights. The column keeps the size at the bottom of the tile */
.sh-media__item {
	display: flex;
	flex-direction: column;
	width: 168px;
	text-decoration: none;
}

.sh-media__thumb {
	display: block;
	position: relative;
	height: 128px;
	overflow: hidden;
	border: 1px solid #ededed;
	border-radius: 12px;
	background: #fcfcfd;
}

.sh-media__item:hover .sh-media__thumb {
	border-color: #2b7fff;
}

.sh-media__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sh-media__zoom {
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(255, 255, 255, .92);
	color: #525252;
}

/* A drawing, a document and a video are three names of the same rank, so they
   are set the same way. The size of the file goes with them at the size of
   every other secondary line on the page */
.sh-media__name {
	display: block;
	margin-top: 8px;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	color: #171717;
}

.sh-media__size {
	display: block;
	margin-top: auto;
	padding-top: 2px;
	font-size: 13px;
	line-height: 20px;
	color: rgb(108, 108, 108);
}

/* Video */

/* One card each. A series can carry an overview, an installation video and a
   piece about a fault, and a column of wide strips would push everything under
   it off the screen. The width of a card is capped so a single video does not
   stretch across the whole panel */
.sh-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px 16px;
	max-width: 860px;
}

.sh-video {
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

/* Sixteen to nine: the shape of the preview YouTube hands out, and the shape
   the player takes when it replaces it, so the card does not jump on a click */
.sh-video__poster {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	background: radial-gradient(120% 120% at 30% 20%, #3d4a5c 0%, #1d232c 70%);
	background-size: cover;
	background-position: center;
}

.sh-video__play {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	transition: transform .15s ease;
}

.sh-video__play svg {
	margin-left: 3px;
}

.sh-video:hover .sh-video__play {
	background: #fff;
	transform: scale(1.06);
}

.sh-video__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 10px;
}

.sh-video__name {
	display: block;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	color: #171717;
}

/* A name of two lines next to one of a single line left the two source lines at
   different heights */
.sh-video__meta {
	display: block;
	margin-top: auto;
	padding-top: 2px;
	font-size: 13px;
	line-height: 20px;
	color: rgb(108, 108, 108);
}

/* The player takes the place of the preview and the name stays where it was:
   with several videos on the panel it is the only way to tell which one is
   running */
.sh-video.is-playing .sh-video__poster {
	background: #000;
}

.sh-video.is-playing .sh-video__poster iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sh-video.is-playing .sh-video__play {
	display: none;
}

.sh-video.is-playing {
	cursor: default;
}

/* Shortcut under the buy button */

.sh-docs-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 16px;
}

.sh-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	background: #fff;
	font-family: Inter, sans-serif;
	font-size: 13px;
	color: #525252;
	text-decoration: none;
}

.sh-chip:hover,
.sh-chip:focus-visible {
	border-color: #2b7fff;
	color: #2b7fff;
	text-decoration: none;
}

.sh-chip svg {
	flex: 0 0 14px;
}

@media (max-width: 767px) {
	.sh-media__item {
		width: calc(50% - 6px);
	}

	/* On a wide screen a name that does not fit is trimmed, and there is enough
	   width for that to happen rarely. On a phone the trimming took half of
	   every name, so the name wraps onto a second line instead */
	.sh-doc__name {
		overflow: visible;
		white-space: normal;
	}

	/* One card to a row on a phone: two of them leave a preview too small to
	   make anything out */
	.sh-videos {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh-doc,
	.sh-doc__action,
	.sh-video__play {
		transition: none;
	}
}

/* Video inside the main gallery */

.sh-gallery-video {
	cursor: pointer;
}

.sh-gallery-video__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 570px;
	overflow: hidden;
	border-radius: 12px;
	background: radial-gradient(120% 120% at 30% 20%, #3d4a5c 0%, #1d232c 70%);
	background-size: cover;
	background-position: center;
}

/* The poster of a video is dark enough on its own, but not every frame is, and
   white letters have to hold on any of them */
.sh-gallery-video__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(16, 20, 26, .34);
}

.sh-gallery-video__play,
.sh-gallery-video__name {
	position: relative;
	z-index: 1;
}

.sh-gallery-video__play {
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	transition: transform .15s ease;
}

.sh-gallery-video__play svg {
	margin-left: 4px;
}

.sh-gallery-video:hover .sh-gallery-video__play {
	transform: scale(1.06);
}

/* At the foot of the frame rather than under the play button: a poster carries
   lettering of its own often enough, and two captions in the middle of one
   picture collide */
.sh-gallery-video__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 16px 14px;
	background: linear-gradient(180deg, rgba(16, 20, 26, 0), rgba(16, 20, 26, .82));
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	color: #fff;
}

/* Once playing, the slide is the player and nothing else */
.sh-gallery-video.is-playing .sh-gallery-video__frame::after,
.sh-gallery-video.is-playing .sh-gallery-video__play,
.sh-gallery-video.is-playing .sh-gallery-video__name {
	display: none;
}

.sh-gallery-video.is-playing .sh-gallery-video__frame {
	background: #000;
}

.sh-gallery-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Thumbnail of the video in the strip under the picture */

.sh-gallery-video-thumb {
	position: relative;
}

.sh-gallery-video-thumb__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(23, 23, 23, .62);
}

.sh-gallery-video-thumb__play svg {
	margin-left: 2px;
}

.sh-gallery-video-thumb img {
	object-fit: cover !important;
}