@import "header.css?v=1.0";
@import "collapsible-table.css";
@import "cards.css";

:root {
	--blue-color: #12a5d7;
	--blue-darker-color: #00678A;
	--blue-color-transparent-50: rgba(18, 165, 215, 0.5);
	--bg-color: #f2f7fA;

    --dark-bg: #2c3e50;

	--on-blue-color: #ffffff;

	--link-color: var(--blue-color);
	--link-hover-color: var(--blue-darker-color);

	--text-color: #333;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;


}



a {
	color: var(--bs-link-color);
	text-decoration: none;
}

a:hover {
	color: var(--bs-link-hover-color);
}

/* general css */
img {
	max-width: 100%;
	height: auto;
}



details {
	margin-bottom: 16px;
}

details[open] > summary {
	margin-bottom: 16px;
}


body {
    min-height: 100vh;
    display: grid;
    /*grid-template-columns: minmax(0, 1fr);  без этого потом overflow у детей не работает */
    grid-template-rows: auto 1fr auto;
}

.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 720px;
    margin-bottom: var(--space-lg);
}

.video-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.card-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 720px;
    overflow: hidden;
}

.card-media iframe {
    width: 100%;
    height: 100%;
    display: block; 
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.page-resource {
    display: flex;
    flex-direction: column;
    gap: 64px;
}



.back {
	margin-top: 16px;
	color: var(--blue-color);
}

.back:hover {
	filter: brightness(90%);
}

.back-link {
	text-decoration: none;
	font-weight: 500;
	color: inherit;
}



.main {
    margin-top: 16px;
    margin-bottom: 48px;
}

.pagetitle {
	margin-bottom: 32px;
}


.publishedon {
    color: var(--blue-darker-color);
    margin-bottom: var(--space-lg);
}

.footer {
    padding: 48px 0;
	background-color: var(--blue-color);
	color: #ffffff;
}

.footer-phones a {
	color: #ffffff;
}