@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --brand-0: #000000;
    --brand-50: #ffffff;
    --brand-100: #e6e7e8;
    --brand-200: #b4b9bb;
    --brand-300: #848c90;
    --brand-400: #525e64;
    --brand-500: #202e35;
    --brand-600: #07171f;

    --brand-blue-100: #e9f0f8;
    --brand-blue-200: #bdd2ed;
    --brand-blue-300: #92b4e1;
    --brand-blue-400: #6796d4;
    --brand-blue-500: #4078c8;
    --brand-blue-600: #1b69bf;

    --brand-red-100: #f9e7ea;
    --brand-red-200: #eeb9c0;
    --brand-red-300: #e68b98;
    --brand-red-400: #de5c6d;
    --brand-red-500: #d52a41;
    --brand-red-600: #d10f2b;

    --brand-orange-100: #fdf2ed;
    --brand-orange-200: #fad9c8;
    --brand-orange-300: #f8c0a5;
    --brand-orange-400: #f5a780;
    --brand-orange-500: #f38d59;
    --brand-orange-600: #f28145;

    --brand-green-100: #edf6f6;
    --brand-green-200: #cbe5e4;
    --brand-green-300: #aad5d3;
    --brand-green-400: #88c3c1;
    --brand-green-500: #66b1af;
    --brand-green-600: #57a9a6;

    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 24px;
    --radius-xxl: 48px;

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 12px;
    --spacing-l: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 48px;

    --transition-015: all 0.15s ease-in-out;
    --transition-03: all 0.3s ease-in-out;
    --transition-1: all 1s ease-in-out;

    --font-barlow: 'Barlow';
    --font-lora: 'Lora';
}

html { scroll-behavior: smooth;}
body {
    font-family: "Barlow";
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--brand-600);
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome, Safari, newer Edge */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Old IE / Edge */
    user-select: none;           /* Standard */
}
.grafika-obal {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--brand-600);
}
.grafika-obal embed, img, object { max-width: 100%;}
.grafika-obal img { vertical-align: bottom;}
.grafika-obal { position: relative; z-index: 1000;}
.grafika-obal section { position: relative;}
.grafika-obal b { font-weight: bold;}

.grafika-obal p {
    font-family: Lora,serif;
    font-size: 17px; 
    line-height: 1.7;
    padding: 0;
    margin: 0 60px 24px 60px; 
}
.grafika-obal h1 {
    font-weight: bold;
    font-size: 35px;
    line-height: 1.17;
    margin: 0 60px 32px 60px;
    padding: 0;
    text-align: left;
}
.grafika-obal h2 {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.3;
    margin: 0 60px 32px 60px;
    padding: 0;
    text-align: left;
}
.grafika-obal h3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    margin: 0 60px 24px 60px;
    padding: 0;
    text-align: left;
}
.grafika-obal h4 {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    padding: 0;
    margin: 0 60px 24px 60px;
    text-align: left;
}

.grafika-obal .box-container {
    position: relative;
    font-family: var(--font-barlow);
    width: 100%;
    height: auto;
    background: var(--brand-blue-100);
    padding: var(--spacing-xl);
    border-radius: var(--radius-m);
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
}
.grafika-obal .box-container .box-container-title {
    margin: 0;
    margin-bottom: var(--spacing-xl);
    padding-right: 50px;
    font-family: barlow;
}
.grafika-obal .box-container .aktu-logo-corner {
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 40px;
    aspect-ratio: 1 / 1;
    background-image: url(../infographics-lib/assets/logo-aktualne-a-modre.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 10;
}

.grafika-obal .box-container .box-container-comment {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    color: var(--brand-300);
    text-align: right;
    font-style: italic;
    line-height: 1.3;
    font-family: barlow;
}

/* Slider basics */
.grafika-obal .box-container .slider-obsah { 
    position: relative; 
    overflow: hidden; 
    min-height:300px;
}
.grafika-obal .box-container .slider-obsah .slide { display: none;}
.grafika-obal .box-container .slider-obsah .slide.active { display: block;}
/* Slider basics */

/* Spinner loader */
.grafika-obal .box-container #loader {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    padding: var(--spacing-xl);
    min-height: 180px;
}
.grafika-obal .box-container #loader-carousel,
.grafika-obal .box-container #loader-table,
.grafika-obal .box-container #loader-events {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    padding: var(--spacing-xl);
    min-height: 160px;
}
.grafika-obal .box-container .loader-spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #ffffffa1;
    border-top-color: var(--brand-blue-600);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.grafika-obal .box-container #loader span,
.grafika-obal .box-container #loader-carousel span,
.grafika-obal .box-container #loader-table span,
.grafika-obal .box-container #loader-events span {
    color: var(--brand-blue-400);
    font-size: 0.875rem;
    font-weight: 500;
}
/* Spinner loader */


@media screen and (max-width: 480px) {
    .grafika-obal p, .grafika-obal h1, .grafika-obal h2, .grafika-obal h3, .grafika-obal h4 {
      margin-left: 24px;
      margin-right: 24px;
    }
    .grafika-obal .box-container { padding: var(--spacing-l);}
    .grafika-obal .box-container .box-container-title {
        padding-right: 40px;
        font-size: 1.25rem;
    }
    .grafika-obal .box-container .aktu-logo-corner { width: 32px; top: var(--spacing-l); right: var(--spacing-l);}
}