/* CSS Document */
/* =========================================================
   =========================================================
   SONARPRO PRŮVODCE – A) HLAVNÍ STRÁNKA /vip-pruvodce/
   =========================================================
   Namespace hlavní stránky: .sp-guide-hub
   Obsahuje: hero, kategorie/accordion, přehled lekcí,
   „Jak Průvodce používat“ a odkaz na VIP videonávody.
   =========================================================
   ========================================================= */

.sp-guide-hub,
.sp-guide-hub * {
    box-sizing: border-box;
}

.sp-guide-hub {
    --sp-blue: #0D4168;
    --sp-red: #BE202F;
    --sp-text: #263746;
    --sp-muted: #4C6474;
    --sp-line: #D9E5EC;
    --sp-soft: #F3F8FB;
    --sp-soft-blue: #EAF3F8;

    width: 100%;

    color: var(--sp-text);

    font-family: Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.sp-guide-hub-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   ZPĚT
   ========================================================= */

.sp-guide-hub-back {
    margin: 0 0 20px;
}

.sp-guide-hub-back a,
.sp-guide-hub-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--sp-blue) !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;
}

.sp-guide-hub-back a:hover,
.sp-guide-hub-back a:focus,
.sp-guide-hub-bottom a:hover,
.sp-guide-hub-bottom a:focus {
    color: var(--sp-red) !important;
}


/* =========================================================
   HERO – PRŮVODCE OBRAZEM ECHOLOTU
   ========================================================= */

.sp-guide-hub-hero {
    --sgh-blue: #0D4168;
    --sgh-red: #BE202F;
    --sgh-text: #263746;
    --sgh-muted: #5C6F7E;

    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;

    margin: 0 0 28px;

    border: 1px solid #D6E2E9;
    border-top: 4px solid var(--sgh-blue);
    border-radius: 17px;

    background: #FFFFFF;

    box-shadow: 0 10px 30px rgba(13, 65, 104, .09);

    font-family: Roboto, Arial, sans-serif;
}

.sp-guide-hub-hero-image {
    position: relative;
    overflow: hidden;

    background: #FFFFFF;
}

.sp-guide-hub-hero-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sp-guide-hub-hero-content {
    position: relative;
    z-index: 2;

    padding: 23px 19px 22px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FBFD 58%,
            #EEF6FA 100%
        );
}

.sp-guide-hub-hero-eyebrow {
    position: relative;
    display: inline-block;

    margin: 0 0 18px;
    padding-top: 11px;

    color: var(--sgh-red) !important;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: .065em;
    text-transform: uppercase;
}

.sp-guide-hub-hero-eyebrow::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 36px;
    height: 3px;

    border-radius: 3px;

    background: var(--sgh-red);
}

.sp-guide-hub-hero-title {
    margin: 0 0 11px !important;

    color: var(--sgh-blue) !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

.sp-guide-hub-hero-claim {
    margin: 0 0 13px !important;

    color: var(--sgh-blue) !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.sp-guide-hub-hero-claim strong {
    color: var(--sgh-blue) !important;
    font-weight: 800;
}

.sp-guide-hub-hero-text {
    max-width: 660px;

    margin: 0 !important;

    color: var(--sgh-muted) !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}

.sp-guide-hub-hero-text strong {
    color: var(--sgh-blue) !important;
    font-weight: 800;
}


/* =========================================================
   HERO – BENEFITY
   ========================================================= */

.sp-guide-hub-hero-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;

    margin-top: 19px;
}

.sp-guide-hub-hero-point {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--sgh-blue);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.sp-guide-hub-hero-point-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #EDF5F9;
    color: var(--sgh-blue);

    font-size: 14px;
}

.sp-guide-hub-hero-point-icon i,
.sp-guide-hub-hero-point-icon i::before {
    color: var(--sgh-blue) !important;
}


/* =========================================================
   HERO – ZPĚT DO AKADEMIE
   ========================================================= */

.sp-guide-hub-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 22px;

    color: var(--sgh-red) !important;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;

    text-decoration: none !important;
}

.sp-guide-hub-hero-back-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-guide-hub-hero-back-arrow {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    text-decoration: none !important;
}

.sp-guide-hub-hero-back:hover,
.sp-guide-hub-hero-back:focus {
    color: var(--sgh-red) !important;
    text-decoration: none !important;
}

.sp-guide-hub-hero-back:hover .sp-guide-hub-hero-back-text,
.sp-guide-hub-hero-back:focus .sp-guide-hub-hero-back-text {
    text-decoration: none;
}


/* =========================================================
   HERO – TABLET + DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .sp-guide-hub-hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, .95fr);

        align-items: stretch;
    }

    .sp-guide-hub-hero-content {
        grid-column: 1;
        grid-row: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            34px
            46px
            34px
            36px;

        background:
            linear-gradient(
                90deg,
                #FFFFFF 0%,
                #F7FBFD 68%,
                #EEF6FA 100%
            );
    }

    .sp-guide-hub-hero-content::after {
        content: "";

        position: absolute;
        z-index: 3;
        top: 0;
        right: -70px;

        width: 140px;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                rgba(238, 246, 250, 1) 0%,
                rgba(238, 246, 250, .82) 32%,
                rgba(238, 246, 250, .48) 58%,
                rgba(238, 246, 250, .18) 78%,
                rgba(238, 246, 250, 0) 100%
            );

        pointer-events: none;
    }

    .sp-guide-hub-hero-image {
        grid-column: 2;
        grid-row: 1;
    }

    .sp-guide-hub-hero-image img {
        width: 100%;
        height: 100%;

        aspect-ratio: auto;
        object-fit: cover;
    }

    .sp-guide-hub-hero-title {
        font-size: 38px !important;
    }

    .sp-guide-hub-hero-claim {
        font-size: 21px !important;
    }

    .sp-guide-hub-hero-text {
        font-size: 16px !important;
    }

    .sp-guide-hub-hero-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;

        margin-top: 23px;
    }
}


/* =========================================================
   HERO – VĚTŠÍ DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .sp-guide-hub-hero {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(430px, .95fr);
    }

    .sp-guide-hub-hero-content {
        padding: 38px 62px 38px 42px;
    }

    .sp-guide-hub-hero-title {
        font-size: 42px !important;
    }
}


/* =========================================================
   HERO – MALÉ MOBILY
   ========================================================= */

@media (max-width: 420px) {

    .sp-guide-hub-hero-content {
        padding: 21px 17px 20px;
    }

    .sp-guide-hub-hero-title {
        font-size: 28px !important;
    }

    .sp-guide-hub-hero-claim {
        font-size: 18px !important;
    }

    .sp-guide-hub-hero-text {
        font-size: 15px !important;
    }
}


/* =========================================================
   SEKČNÍ NADPIS
   ========================================================= */

.sp-guide-section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 40px 0 20px;
}

.sp-guide-hub .sp-guide-section-title {
    position: relative;

    margin: 0 !important;
    padding-top: 12px;

    color: var(--sp-blue) !important;

    font-size: 27px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.sp-guide-hub .sp-guide-section-title::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 38px;
    height: 3px;

    border-radius: 3px;

    background: var(--sp-red);
}

.sp-guide-section-text {
    margin: 0 !important;

    color: #405A69 !important;

    font-size: 16px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   GRID
   ========================================================= */

.sp-guide-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}


/* =========================================================
   KARTA
   ========================================================= */

.sp-guide-category {
    overflow: hidden;

    margin: 0;

    border: 1px solid #D6E2E9;
    border-radius: 16px;

    background: #FFFFFF;

    box-shadow:
        0 8px 24px rgba(13, 65, 104, .07);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.sp-guide-category:hover {
    border-color: #BDD2DE;

    box-shadow:
        0 12px 32px rgba(13, 65, 104, .11);

    transform: translateY(-1px);
}

.sp-guide-category[open] {
    border-color: #B7D0DE;

    box-shadow:
        0 13px 34px rgba(13, 65, 104, .12);
}


/* =========================================================
   SUMMARY
   ========================================================= */

.sp-guide-category-summary {
    position: relative;

    display: block;

    padding: 0;

    cursor: pointer;

    list-style: none;
}

.sp-guide-category-summary::-webkit-details-marker {
    display: none;
}

.sp-guide-category-summary::marker {
    content: "";
}

.sp-guide-category-main {
    display: grid;
    grid-template-columns: 1fr;

    min-width: 0;
}


/* =========================================================
   OBRÁZEK
   ========================================================= */

.sp-guide-category-image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 190px;

    overflow: hidden;

    border-bottom: 1px solid #E2EBF0;

    background: #071F2E;
}

.sp-guide-category-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TĚLO KARTY
   ========================================================= */

.sp-guide-category-body {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 21px 21px 20px;
}

.sp-guide-category-name {
    position: relative;

    display: block;

    margin-bottom: 14px;
    padding-left: 14px;

    color: var(--sp-blue) !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.sp-guide-category-name::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 4px;
    height: 24px;

    transform: translateY(-50%);

    border-radius: 3px;

    background: var(--sp-red);
}

.sp-guide-category-description {
    display: block;

    min-height: 54px;

    margin-bottom: 14px;

    color: #334F60 !important;

    font-size: 18px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   PREVIEW LEKCÍ
   ========================================================= */

.sp-guide-category-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 22px;
}

.sp-guide-category-preview span {
    position: relative;

    display: block;

    padding-left: 21px;

    color: #0d4168  !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
}

.sp-guide-category-preview span::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--sp-red);

    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   FOOTER KARTY
   ========================================================= */

.sp-guide-category-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: auto;
}

.sp-guide-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 5px 11px;

    border-radius: 20px;

    background: #EAF3F8;

    color: var(--sp-blue) !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: .02em;
    text-transform: uppercase;
}

.sp-guide-category-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;

    padding: 9px 17px;

    border-radius: 22px;

    background: var(--sp-blue);

    color: #FFFFFF !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    box-shadow:
        0 5px 13px rgba(13, 65, 104, .15);
}

.sp-guide-category-open::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 50%;
	font-size: 30px;
	font-weight: 500;
	background: #be202f;
	padding-left: 2px;
}

.sp-guide-category[open]
.sp-guide-category-open::after {
    content: "−";
}


/* =========================================================
   ROZBALENÉ LEKCE
   ========================================================= */

.sp-guide-lessons {
    padding: 0 21px 18px;

    background: #FFFFFF;
}

.sp-guide-lessons-inner {
    overflow: hidden;

    padding-top: 4px;

    border-top: 1px solid #DEE8EE;
}

.sp-guide-lesson {
    position: relative;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: center;

    min-height: 78px;

    padding: 14px 38px 14px 2px;

    border-bottom: 1px solid #E5EDF1;

    color: var(--sp-text) !important;

    text-decoration: none !important;
}

.sp-guide-lesson:last-child {
    border-bottom: 0;
}

a.sp-guide-lesson:hover,
a.sp-guide-lesson:focus {
    background: #F5F9FB;

    text-decoration: none !important;
}

.sp-guide-lesson-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #EAF3F8;

    color: var(--sp-blue) !important;

    font-size: 12px !important;
    font-weight: 800 !important;
}

.sp-guide-lesson-title {
    display: block;

    color: var(--sp-blue) !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.sp-guide-lesson-text {
    display: block;

    margin-top: 4px;

    color: #506978 !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
}

.sp-guide-lesson-arrow {
    position: absolute;

    top: 50%;
    right: 9px;

    transform: translateY(-50%);

    color: var(--sp-red) !important;

    font-size: 24px !important;
    line-height: 1 !important;
}


/* =========================================================
   PŘIPRAVUJEME
   ========================================================= */

.sp-guide-lesson--coming {
    opacity: .72;
}

.sp-guide-lesson-status {
    display: inline-block;

    margin-top: 6px;
    padding: 4px 8px;

    border-radius: 5px;

    background: #EEF2F4;

    color: #657985 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    letter-spacing: .04em;
    text-transform: uppercase;
}


/* =========================================================
   JAK PRŮVODCE POUŽÍVAT
   ========================================================= */

.sp-guide-how {
    margin-top: 40px;
    padding: 27px 24px;

    border: 1px solid #D5E3EA;
    border-radius: 16px;

    background: #F1F7FA;
}

.sp-guide-how-title {
    position: relative;

    margin: 0 0 8px !important;
    padding-top: 11px;

    color: var(--sp-blue) !important;

    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.sp-guide-how-title::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 36px;
    height: 3px;

    border-radius: 3px;

    background: var(--sp-red);
}

.sp-guide-how-intro {
    margin: 0 !important;

    color: #405A69 !important;

    font-size: 16px !important;
    line-height: 1.55 !important;
}

.sp-guide-how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    margin-top: 20px;
}

.sp-guide-how-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;

    padding: 17px;

    border: 1px solid #D7E3EA;
    border-radius: 11px;

    background: #FFFFFF;
}

.sp-guide-how-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--sp-red);

    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 800 !important;
}

.sp-guide-how-item strong {
	display: block;
	margin-bottom: 4px;
	color: var(--sp-blue) !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

.sp-guide-how-item p {
    margin: 0 !important;

    color: #465F6E !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   VIDEONÁVODY
   ========================================================= */

.sp-guide-video {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;

    margin-top: 22px;
    padding: 25px 22px;

    border: 1px solid #D5E2E9;
    border-left: 4px solid var(--sp-red);
    border-radius: 13px;

    background: #FFFFFF;

    box-shadow:
        0 7px 22px rgba(13, 65, 104, .055);
}

.sp-guide-video-title {
    margin: 0 0 7px !important;

    color: var(--sp-blue) !important;

    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.sp-guide-video-text {
    margin: 0 !important;

    color: #465F6E !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}

.sp-guide-video-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sp-guide-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 8px 16px;

    border: 1px solid #ABC7D7;
    border-radius: 22px;

    background: #FFFFFF;

    color: var(--sp-blue) !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
}

.sp-guide-video-link:hover,
.sp-guide-video-link:focus {
    border-color: var(--sp-blue);

    background: #F3F8FB;

    color: var(--sp-blue) !important;
}


/* =========================================================
   SPODNÍ NAVIGACE
   ========================================================= */

.sp-guide-hub-bottom {
    margin-top: 30px;

    text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) {

    .sp-guide-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .sp-guide-category--wide {
        grid-column: 1 / -1;
    }

    .sp-guide-category-image {
        height: 225px;
    }

    .sp-guide-category--wide .sp-guide-category-main {
        grid-template-columns: 44% minmax(0, 1fr);
    }

    .sp-guide-category--wide .sp-guide-category-image {
        height: 245px;

        border-right: 1px solid #E2EBF0;
        border-bottom: 0;
    }

    .sp-guide-category--wide .sp-guide-category-body {
        justify-content: center;

        padding: 28px 30px;
    }

    .sp-guide-how-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-guide-video {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;

        padding: 27px 28px;
    }

    .sp-guide-video-links {
        justify-content: flex-end;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .sp-guide-section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
    }

    .sp-guide-section-text {
        max-width: 500px;

        text-align: right;
    }

    .sp-guide-category-image {
        height: 245px;
    }

    .sp-guide-category-body {
        padding: 23px 24px 22px;
    }

    .sp-guide-category-name {
        font-size: 25px !important;
    }
    
    .sp-guide-category-name::before {
        height: 27px;
    }

    .sp-guide-category-description {
        font-size: 18px !important;
    }

    .sp-guide-category-preview span {
        font-size: 16px !important;
    }

    .sp-guide-how {
        padding: 30px 28px;
    }
}


/* =========================================================
   MALÉ MOBILY
   ========================================================= */

@media (max-width: 420px) {

    .sp-guide-category-image {
        height: 170px;
    }

    .sp-guide-category-body {
        padding: 18px 17px;
    }

    .sp-guide-category-name {
        font-size: 22px !important;
    }

    .sp-guide-category-description {
        min-height: 0;

        font-size: 18px !important;
    }

    .sp-guide-category-preview span {
        font-size: 16px !important;
    }

    .sp-guide-category-footer {
        align-items: center;
    }

    .sp-guide-category-open {
        min-height: 42px;

        padding: 8px 13px;

        font-size: 16px !important;
    }

    .sp-guide-how {
        padding: 24px 17px;
    }
}

/* =========================================================
   =========================================================
   SONARPRO PRŮVODCE – B) JEDNOTLIVÉ LEKCE
   =========================================================
   Namespace lekcí: .sp-guide
   Obsahuje všechny prvky uvnitř jednotlivých lekcí.
   Hlavní stránka výše používá .sp-guide-hub a je oddělena.
   =========================================================
   ========================================================= */

/* =========================================================
   B1) NAVAZUJÍCÍ VIDEONÁVOD – SONARPRO AKADEMIE
   ========================================================= */

.sp-guide-related--academy {
    margin-top: 28px;
    padding: 22px;

    border: 1px solid #CFE2EE;
    border-radius: 12px;

    background: #F2F8FC;
}


/* Kicker */

.sp-guide-related-kicker {
    position: relative;
    display: inline-block;

    margin-bottom: 14px;

    color: #BE202F;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;

    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-guide-related-kicker::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 34px;
    height: 3px;

    border-radius: 2px;

    background: #BE202F;
}


/* Nadpis */

.sp-guide-related--academy .sp-guide-related-title {
    margin-top: 0;
}


/* Karty */

.sp-guide-related--academy .sp-guide-related-card {
    position: relative;

    display: block;

    padding-right: 42px;
}


/* Modelová řada */

.sp-guide-related--academy .sp-guide-related-card > strong {
    display: block;

    margin-bottom: 8px;
}


/* Přesná cesta k videu */

.sp-guide-related-path {
    display: block;

    margin-top: 4px;

    color: #5C6F7E;

    font-size: 13px;
    line-height: 1.45;
}

.sp-guide-related-path b {
    color: #0D4168;

    font-weight: 800;
}


/* Šipka vpravo */

.sp-guide-related--academy .sp-guide-related-arrow {
    position: absolute;

    top: 50%;
    right: 16px;

    transform: translateY(-50%);
}


/* Mobil */

@media (max-width: 767px) {

    .sp-guide-related--academy {
        padding: 18px 16px;
    }

    .sp-guide-related--academy .sp-guide-related-card {
        padding-right: 38px;
    }

    .sp-guide-related-path {
        font-size: 12.5px;
    }

}
/* =========================================================
   B2) MASTER STYLY JEDNOTLIVÝCH LEKCÍ
   Mobile first; systémový H1 generuje Shoptet.
   ========================================================= */

.pageArticleDetail + h2 {
    display: none !important;
}

.sp-guide {
    --blue: #0D4168;
    --red: #BE202F;
    --green: #20A95A;
    --text: #263746;
    --muted: #667681;
    --line: #DDE6EB;
    --soft: #F6F8FA;
    --soft-blue: #EDF6FB;

    width: 100%;
    max-width: 960px;
    margin: 0 auto;

    color: var(--text);
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.55;
}

.sp-guide * {
    box-sizing: border-box;
}

.sp-guide img {
    max-width: 100%;
}


/* =========================================================
   NAVIGACE ZPĚT – malé sekundární tlačítko
   ========================================================= */

.sp-guide-back {
    margin: 0 0 18px;
}

.sp-guide-back a {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 32px;
    padding: 5px 10px 5px 8px;

    border: 1px solid #C9D6DE;
    border-radius: 5px;

    background: #fff;
    color: var(--blue);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}

.sp-guide-back a:hover,
.sp-guide-back a:focus {
    border-color: var(--blue);

    background: #F4F7F9;
    color: var(--blue);

    text-decoration: none;
}

.sp-guide-back-arrow {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}


/* =========================================================
   HLAVIČKA LEKCE
   H1 generuje Shoptet – uvnitř Průvodce začínáme H2
   ========================================================= */

.sp-guide-eyebrow {
    position: relative;
    display: inline-block;

    margin-bottom: 18px;

    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sp-guide-eyebrow::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 32px;
    height: 3px;

    border-radius: 2px;
    background: var(--red);
}

.type-page .content-inner article .sp-guide-main-title {
    margin: 0 0 12px;

    color: var(--blue);
    font-size: 35px;
    font-weight: 800;
    line-height: 1.08;
}

.sp-guide-lead {
    max-width: 660px;
    margin: 0 0 20px;

    font-size: 18px;
    line-height: 1.5;
}

/* =========================================================
   LEKCE – ČERVENÁ LINKA U SEKČNÍCH NADPISŮ
   ========================================================= */

.sp-guide .sp-guide-section-title {
    position: relative;
    padding-left: 14px;
}

.sp-guide .sp-guide-section-title::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 4px;
    height: 24px;

    transform: translateY(-50%);

    border-radius: 3px;

    background: var(--red);
}
/* =========================================================
   HLAVNÍ SONAROVÝ OBRAZ
   ========================================================= */

.sp-guide-image-wrap {
    position: relative;
    overflow: hidden;

    width: 100%;

    border-radius: 9px;
    background: #071F29;
}

.sp-guide-image {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   VYSVĚTLOVACÍ OVERLAY – SVG TEST MASTER
   Originální sonarový screenshot zůstává beze změny.
   SVG je samostatná transparentní vrstva se stejným poměrem stran.
   ========================================================= */

.sp-guide-image-wrap {
    position: relative;
}

.sp-guide-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.sp-guide-image-overlay[hidden] {
    display: none !important;
}


/* =========================================================
   TLAČÍTKO VYSVĚTLENÍ
   ========================================================= */

.sp-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 46px;

    margin: 10px 0 0;
    padding: 9px 14px;

    border: 1px solid var(--red);
    border-radius: 23px;

    background: var(--red);
    color: #fff;

    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.sp-guide-toggle:hover,
.sp-guide-toggle:focus {
    border-color: #A91C29;
    background: #A91C29;
    color: #fff;
}

.sp-guide-toggle i {
    color: #fff;
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   LEGENDA INTERAKTIVNÍHO OBRAZU
   ========================================================= */

.sp-guide-legend {
    margin-top: 10px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: #fff;
}

.sp-guide-legend-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 11px;

    align-items: start;
}

.sp-guide-legend-item + .sp-guide-legend-item {
    margin-top: 13px;
}

.sp-guide-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: var(--red);
    color: #fff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.sp-guide-legend strong {
    display: block;

    margin: 1px 0 2px;

    color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.sp-guide-legend p {
    margin: 0;

    font-size: 15px;
    line-height: 1.45;
}


/* =========================================================
   SJEDNOCENÉ IKONY
   ========================================================= */

.sp-guide-icon {
    display: inline-flex;
    flex: 0 0 32px;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    font-size: 15px;
    line-height: 1;
}

.sp-guide-icon i {
    line-height: 1;
}

.sp-guide-icon--red {
    background: var(--red);
    color: #fff;
}

.sp-guide-icon--red i {
    color: #fff;
}

.sp-guide-icon--green {
    background: var(--green);
    color: #fff;
}

.sp-guide-icon--green i {
    color: #fff;
}


/* =========================================================
   OBSAHOVÉ KARTY
   ========================================================= */

.sp-guide-card {
    margin-top: 13px;
    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: #fff;
}

.type-page .content-inner article .sp-guide-card-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 10px;

    color: var(--blue);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.sp-guide-card p {
    margin: 0;

    font-size: 18px;
    line-height: 1.55;
}


/* =========================================================
   ZAPAMATUJTE SI
   ========================================================= */

.sp-guide-memory {
    margin-top: 13px;
    padding: 15px;

    border: 1px solid #CFE2EE;
    border-radius: 10px;

    background: var(--soft-blue);
}

.type-page .content-inner article .sp-guide-memory .sp-guide-card-title {
    margin-bottom: 10px;
}

.sp-guide-memory ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sp-guide-memory li {
    position: relative;

    margin: 7px 0;
    padding-left: 17px;

    font-size: 17px;
    line-height: 1.5;
}

.sp-guide-memory li::before {
    content: "•";

    position: absolute;
    left: 0;

    color: var(--blue);
    font-weight: 800;
}


/* =========================================================
   HLAVNÍ SEKCE
   ========================================================= */

.sp-guide-section {
    margin-top: 28px;
}

.type-page .content-inner article .sp-guide .sp-guide-section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 12px;

    color: var(--blue);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   DALŠÍ PŘÍKLAD
   ========================================================= */

.sp-guide-example {
    margin: 0;
}

.sp-guide-example img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 9px;
}

.sp-guide-example figcaption {
    margin-top: 7px;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   NASTAVENÍ SIDESCANU
   ========================================================= */

.sp-guide-settings-intro {
    margin: -3px 0 13px;

    font-size: 17px;
    line-height: 1.5;
}

.sp-guide-settings {
    display: grid;
    gap: 8px;
}

.sp-guide-setting {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;

    padding: 12px;

    border: 1px solid #E5EAED;
    border-radius: 9px;

    background: var(--soft);
}

.sp-guide-setting-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--blue);
    color: #fff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.sp-guide-setting h3 {
    margin: 1px 0 4px;

    color: var(--blue);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.sp-guide-setting p {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;
}

.sp-guide-settings-example {
    margin-top: 12px;
}


/* =========================================================
   SHRNUTÍ
   ========================================================= */

.sp-guide-summary {
    margin-top: 18px;
    padding: 14px;

    border: 1px solid #A9DDB9;
    border-radius: 10px;

    background: #F1FBF4;
}

.type-page .content-inner article .sp-guide-summary-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 7px;

    color: #176B38;
    font-size: 18px;
    font-weight: 800;
}

.sp-guide-summary-check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #22A652;
    color: #fff;

    font-size: 14px;
    font-weight: 800;
}

.sp-guide-summary p {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   SOUVISEJÍCÍ TÉMATA
   ========================================================= */

.sp-guide-related {
    margin-top: 26px;
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: #fff;
}

.type-page .content-inner article .sp-guide-related-title {
    margin: 0 0 10px;

    color: var(--blue);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
}

.sp-guide-related-grid {
    display: grid;
    gap: 7px;
}

.sp-guide-related-card {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 11px 36px 11px 12px;

    border: 1px solid #E6ECEF;
    border-radius: 8px;

    background: var(--soft);
    color: var(--text);

    text-decoration: none;
}

.sp-guide-related-card:hover,
.sp-guide-related-card:focus {
    border-color: #CBD9E0;

    color: var(--text);
    text-decoration: none;
}

.sp-guide-related-card strong {
    color: var(--blue);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.sp-guide-related-card > span:not(.sp-guide-related-arrow) {
    margin-top: 2px;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.sp-guide-related-arrow {
    position: absolute;
    top: 50%;
    right: 12px;

    margin: 0 !important;

    color: var(--blue) !important;

    font-size: 23px !important;
    line-height: 1;

    transform: translateY(-50%);
}
.sp-guide-related-device {
	display: inline-block;
	margin: 7px 0 5px;
	padding: 3px 8px;
	border-radius: 4px;
	background: #C33443;
	color: #f5f6f8 !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .02em;
}


/* =========================================================
   SPODNÍ NAVIGACE
   ========================================================= */

.sp-guide-bottom-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    margin-top: 18px;
    padding-top: 15px;

    border-top: 1px solid var(--line);
}

.sp-guide-bottom-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 8px 10px;

    border: 1px solid var(--blue);
    border-radius: 21px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.sp-guide-bottom-nav a:hover,
.sp-guide-bottom-nav a:focus {
    text-decoration: none;
}

.sp-guide-bottom-nav a:last-child {
    background: var(--blue);
    color: #fff;
}



/* =========================================================
   OCHRANA OBRAZOVÝCH PODKLADŮ
   ========================================================= */

.sp-guide-protected-image {
    -webkit-user-drag: none;
    user-select: none;
}


/* =========================================================
   UPOZORNĚNÍ NA CHRÁNĚNÝ OBSAH
   ========================================================= */

.sp-guide-copyright {
    margin-top: 18px;
    padding: 10px 12px;

    border: 1px solid #E7C5C9;
    border-radius: 7px;

    background: #FFF7F8;
    color: #76585C;
}

.sp-guide-copyright-title {
    margin: 0 0 3px;

    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.sp-guide-copyright p {
    margin: 0;

    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   TABLET / DESKTOP
   Zatím pouze základ.
   Finální desktop doladíme samostatně.
   ========================================================= */

@media (min-width: 768px) {

    .sp-guide {
        max-width: 1120px;
    }

    .sp-guide-content-width {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    .sp-guide .sp-guide-eyebrow {
        margin-bottom: 21px;
        font-size: 14px;
    }

    .sp-guide .sp-guide-eyebrow::after {
        width: 38px;
    }

    .type-page .content-inner article .sp-guide .sp-guide-main-title {
        margin-bottom: 14px;
        font-size: 46px;
        line-height: 1.06;
    }

    .sp-guide .sp-guide-lead {
        max-width: 820px;
        margin-bottom: 24px;
        font-size: 19px;
        line-height: 1.5;
    }

    /* Hlavní sonarový obraz zůstává přes celou šířku lekce. */
    .sp-guide-hero-media {
        width: 100%;
    }

    .sp-guide .sp-guide-toggle {
        margin-top: 14px;
        margin-bottom: 26px;
    }

    /* Tři vysvětlující boxy pod hlavním obrazem. */
    .sp-guide-hero-info {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
        align-items: stretch;
    }

    .sp-guide-hero-info .sp-guide-card,
    .sp-guide-hero-info .sp-guide-memory {
        height: 100%;
        margin-top: 0;
        padding: 17px;
    }

    .type-page .content-inner article .sp-guide-hero-info .sp-guide-card-title {
        align-items: flex-start;
    }

    .sp-guide-section {
        margin-top: 32px;
    }

    .sp-guide-settings {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .sp-guide-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-guide-bottom-nav {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 22px;
    }
}

/* =========================================================
   B3) DESKTOP – SPODNÍ ČÁST LEKCE
   Hierarchie: Shrnutí -> pokračování -> ochrana -> navigace
   ========================================================= */

@media (min-width: 768px) {

    /* 1) SHRNUTÍ – hlavní závěr lekce, plná obsahová šířka */
    .sp-guide-summary {
        margin-top: 26px;
        padding: 22px 24px;
        border-radius: 12px;
    }

    .type-page .content-inner article .sp-guide-summary-title {
        margin: 0 0 10px;
        font-size: 21px;
        line-height: 1.3;
    }

    .sp-guide-summary-check {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .sp-guide-summary p {
        margin: 0;
        font-size: 17px;
        line-height: 1.58;
    }

    /* 2) POKRAČOVÁNÍ – plná šířka, ale bez dojmu velké karty v kartě */
    .sp-guide-related {
        max-width: none;
        margin: 28px 0 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .type-page .content-inner article .sp-guide-related-title {
        margin: 0 0 12px;
        padding: 0;
        font-size: 20px;
        line-height: 1.3;
    }

    .sp-guide-related-grid {
        gap: 12px;
    }

    .sp-guide-related-card {
        min-height: 68px;
        padding: 12px 42px 12px 14px;
        border-radius: 8px;
        box-shadow: none;
    }

    .sp-guide-related-card strong {
        margin-bottom: 3px;
        font-size: 15px;
        line-height: 1.3;
    }

    .sp-guide-related-card > span:not(.sp-guide-related-arrow) {
        font-size: 13px;
        line-height: 1.4;
    }

    .sp-guide-related-arrow {
        right: 14px;
        font-size: 20px !important;
    }

    /* 3) OCHRANA OBSAHU – právní informace, nikoli další obsahová karta */
    .sp-guide-copyright {
        position: relative;
        max-width: none;
        margin: 26px 0 0;
        padding: 12px 0 12px 16px;
        border: 0;
        border-top: 1px solid #E2E7EB;
        border-bottom: 1px solid #E2E7EB;
        border-radius: 0;
        background: transparent;
        color: #68747D;
    }

    .sp-guide-copyright::before {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 0;
        width: 3px;
        border-radius: 3px;
        background: var(--red);
    }

    /* Vyšší specificita kvůli obecným H pravidlům Shoptetu */
    .type-page .content-inner article .sp-guide .sp-guide-copyright-title {
        margin: 0 0 4px;
        padding: 0;
        color: var(--red);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
    }

    .type-page .content-inner article .sp-guide .sp-guide-copyright p {
        max-width: 960px;
        margin: 0;
        padding: 0;
        color: #68747D;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
    }

    /* 4) Spodní navigace – trochu více prostoru po právní poznámce */
    .sp-guide-bottom-nav {
        margin-top: 20px;
    }
}

/* =========================================================
   B4) MOBIL – OCHRANNÉ UPOZORNĚNÍ
   ========================================================= */

@media (max-width: 767px) {
    .sp-guide-copyright {
        margin-top: 14px;
        padding: 8px 9px;
    }

    .type-page .content-inner article .sp-guide .sp-guide-copyright-title {
        margin: 0 0 2px;
        padding: 0;
        font-size: 12px;
        line-height: 1.3;
    }

    .type-page .content-inner article .sp-guide .sp-guide-copyright p {
        margin: 0;
        padding: 0;
        font-size: 11px;
        line-height: 1.42;
    }
}
/* =========================================================
   B5) NAVIGACE MEZI LEKCEMI
   Předchozí / následující lekce v rámci kategorie
   ========================================================= */

.sp-guide-lesson-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    margin-top: 24px;
}


/* ---------------------------------------------------------
   ZÁKLAD KARTY
   --------------------------------------------------------- */

.sp-guide-lesson-nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 48px;
    align-items: stretch;

    min-height: 82px;

    overflow: hidden;

    border: 1px solid #CFE0EA;
    border-radius: 10px;

    background: var(--soft-blue);
    color: var(--blue);

    text-decoration: none;

    transition:
        border-color .2s ease,
        background-color .2s ease;
}

.sp-guide-lesson-nav__item:hover,
.sp-guide-lesson-nav__item:focus {
    border-color: #AFC8D7;
    background: #E7F2F8;

    color: var(--blue);
    text-decoration: none;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.sp-guide-lesson-nav__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 12px 14px;
}

.sp-guide-lesson-nav__label {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.sp-guide-lesson-nav__item strong {
    display: block;

    color: var(--blue);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   NÁHLED LEKCE
   --------------------------------------------------------- */

.sp-guide-lesson-nav__thumb {
    display: block;

    align-self: center;

    width: 82px;
    height: 58px;

    object-fit: cover;

    border-radius: 6px;
}


/* ---------------------------------------------------------
   SMĚROVÁ ŠIPKA
   --------------------------------------------------------- */

.sp-guide-lesson-nav__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 100%;

    border-left: 1px solid #CFE0EA;

    color: var(--red);

    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}


/* ---------------------------------------------------------
   NÁSLEDUJÍCÍ LEKCE
   --------------------------------------------------------- */

.sp-guide-lesson-nav__item--next {
    text-align: right;
}


/* ---------------------------------------------------------
   PŘEDCHOZÍ LEKCE
   --------------------------------------------------------- */

.sp-guide-lesson-nav__item--prev {
    grid-template-columns: 48px 92px minmax(0, 1fr);

    text-align: left;
}

.sp-guide-lesson-nav__item--prev .sp-guide-lesson-nav__arrow {
    grid-column: 1;
    grid-row: 1;

    border-left: 0;
    border-right: 1px solid #CFE0EA;
}

.sp-guide-lesson-nav__item--prev .sp-guide-lesson-nav__thumb {
    grid-column: 2;
    grid-row: 1;
}

.sp-guide-lesson-nav__item--prev .sp-guide-lesson-nav__content {
    grid-column: 3;
    grid-row: 1;
}


/* ---------------------------------------------------------
   PRÁZDNÁ POZICE
   Na mobilu se nezobrazuje.
   --------------------------------------------------------- */

.sp-guide-lesson-nav__item--empty {
    display: none;
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .sp-guide-lesson-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;

        margin-top: 28px;
    }

    .sp-guide-lesson-nav__item {
        min-height: 112px;

        grid-template-columns: minmax(0, 1fr) 132px 56px;
    }

    .sp-guide-lesson-nav__item--prev {
        grid-template-columns: 56px 132px minmax(0, 1fr);
    }

    .sp-guide-lesson-nav__content {
        padding: 18px;
    }

    .sp-guide-lesson-nav__label {
        margin-bottom: 5px;

        font-size: 13px;
    }

    .sp-guide-lesson-nav__item strong {
        font-size: 18px;
        line-height: 1.3;
    }

    .sp-guide-lesson-nav__thumb {
        width: 118px;
        height: 80px;

        border-radius: 7px;
    }

    .sp-guide-lesson-nav__arrow {
        width: 56px;

        font-size: 38px;
    }

    .sp-guide-lesson-nav__item--empty {
        display: block;

        min-height: 0;

        border: 0;
        background: transparent;

        pointer-events: none;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .sp-guide-lesson-nav__item {
        grid-template-columns: minmax(0, 1fr) 76px 42px;

        min-height: 78px;
    }

    .sp-guide-lesson-nav__item--prev {
        grid-template-columns: 42px 84px minmax(0, 1fr);
    }

    .sp-guide-lesson-nav__thumb {
        width: 68px;
        height: 50px;

        border-radius: 6px;
    }

    .sp-guide-lesson-nav__item--prev .sp-guide-lesson-nav__thumb {
        justify-self: center;
    }

    .sp-guide-lesson-nav__arrow {
        width: 42px;

        font-size: 30px;
    }

    .sp-guide-lesson-nav__content {
        padding: 10px 11px;
    }

    .sp-guide-lesson-nav__label {
        margin-bottom: 2px;

        font-size: 11px;
    }

    .sp-guide-lesson-nav__item strong {
        font-size: 15px;
        line-height: 1.25;
    }

}

/* =========================================================
   =========================================================
   SONARPRO AKADEMIE – C) VIP SEKCE / HLAVNÍ ROZCESTNÍK
   =========================================================
   Namespace: .vip-academy
   CSS hlavního VIP rozcestníku /vip-sekce/.
   Skrytí Shoptet H1 je záměrně ponecháno mimo externí CSS
   a řeší se pouze lokálně v HTML konkrétní stránky.
   =========================================================
   ========================================================= */

/* =========================================================
   SONARPRO – VIP SEKCE / HLAVNÍ ROZCESTNÍK
   Mobile first
   ========================================================= */

.vip-academy,
.vip-academy * {
	box-sizing: border-box;
}

.vip-academy {
	--vip-blue: #0D4168;
	--vip-blue-dark: #072D4A;
	--vip-red: #BE202F;
	--vip-red-soft: #C33443;
	--vip-text: #263746;
	--vip-muted: #60717D;
	--vip-line: #D9E5EC;
	--vip-soft: #F4F8FB;
	--vip-white: #FFFFFF;

	width: 100%;
	max-width: 1180px;
	margin: 0 auto 40px;

	color: var(--vip-text);
	font-family: Roboto, Arial, sans-serif;
}


/* =========================================================
   HERO – MOBILE FIRST
   ========================================================= */

.vip-academy-hero {
	position: relative;
	overflow: hidden;

	min-height: 585px;

	padding:
		24px
		18px
		335px;

	border-radius: 18px;

	background:
		linear-gradient(
			180deg,
			rgba(4, 31, 54, .12) 0%,
			rgba(4, 31, 54, .36) 38%,
			rgba(4, 31, 54, .08) 58%,
			rgba(4, 31, 54, 0) 70%
		),
		url("/user/documents/upload/images/vip-section-hero-mobile-v02.png")
		center 58% / cover no-repeat;

	box-shadow: 0 14px 36px rgba(13, 65, 104, .16);

	color: #fff;
}

.vip-academy-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(3, 35, 60, .56) 0%,
			rgba(3, 35, 60, .24) 38%,
			rgba(3, 35, 60, .08) 58%,
			rgba(3, 35, 60, 0) 70%
		);

	pointer-events: none;
}

.vip-academy-hero-content {
	position: relative;
	z-index: 2;

	max-width: 760px;
}

.vip-academy-eyebrow {
	position: relative;

	display: inline-block;

	margin: 0 0 17px;
	padding-top: 12px;

	color: #fff !important;

	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;

	letter-spacing: .07em;
	text-transform: uppercase;
}

.vip-academy-eyebrow::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 36px;
	height: 4px;

	border-radius: 4px;

	background: var(--vip-red);
}

.vip-academy-hero h1 {
	margin: 0 0 10px !important;

	color: #fff !important;

	font-size: 32px !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
}

.vip-academy-hero h1 strong {
	color: #F12B3E !important;
	font-weight: 900 !important;
}

.vip-academy-claim {
	margin: 0 0 15px !important;

	color: #fff !important;

	font-size: 19px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
}

.vip-academy-intro {
	max-width: 650px;

	margin: 0 !important;

	color: rgba(255,255,255,.96) !important;

	font-size: 14px !important;
	line-height: 1.5 !important;
}

.vip-academy-intro strong {
	color: #fff !important;
	font-weight: 800 !important;
}


/* =========================================================
   HERO BENEFITY
   ========================================================= */

.vip-academy-benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;

	margin-top: 20px;
}

.vip-academy-benefit {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.vip-academy-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	border: 1px solid rgba(255,255,255,.15);
	border-radius: 11px;

	background: rgba(13,65,104,.72);
	color: #fff;

	font-size: 18px;

	backdrop-filter: blur(3px);
}

.vip-academy-benefit-icon i,
.vip-academy-benefit-icon i::before {
	color: #fff !important;
}

.vip-academy-benefit-text {
	color: #fff;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}


/* =========================================================
   SEKČNÍ ÚVOD
   ========================================================= */

.vip-academy-section-head {
	position: relative;

	margin: 28px 0 14px;
	padding-top: 13px;
}

.vip-academy-section-head::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 38px;
	height: 4px;

	border-radius: 3px;

	background: var(--vip-red);
}

.vip-academy-section-head h2 {
	margin: 0 0 6px !important;

	color: var(--vip-blue) !important;

	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
}


/* =========================================================
   VIDEOTÉKY
   ========================================================= */

.vip-academy-video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.vip-academy-card {
	position: relative;
	overflow: hidden;

	border: 1px solid #D6E2E9;
	border-radius: 17px;

	background: #fff;

	box-shadow: 0 8px 25px rgba(13,65,104,.08);
}

/* Sjednocené horní rámování videokaret */
.vip-academy-video-card {
	border-top: 4px solid var(--vip-red);
}

.vip-academy-card-image {
	display: block;

	width: 100%;
	aspect-ratio: 1.85 / 1;

	object-fit: cover;

	border-bottom: 1px solid #E1E9EE;
}

.vip-academy-card-body {
	padding: 18px 17px;
}

.vip-academy-card-heading {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 12px;
	align-items: center;

	margin-bottom: 12px;
}

.vip-academy-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	border-radius: 12px;

	background: var(--vip-red);
	color: #fff;

	box-shadow: 0 7px 16px rgba(190,32,47,.17);

	font-size: 17px;
}

.vip-academy-card-icon i,
.vip-academy-card-icon i::before {
	color: #fff !important;
}

.vip-academy-card-kicker {
	display: block;

	margin-bottom: 3px;

	color: var(--vip-red) !important;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.25;

	letter-spacing: .05em;
	text-transform: uppercase;
}

.vip-academy-card h3 {
	margin: 0 !important;

	color: var(--vip-blue) !important;

	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
}

.vip-academy-card p {
	margin: 0 0 15px !important;

	color: var(--vip-muted) !important;

	font-size: 15px !important;
	line-height: 1.55 !important;
}


/* =========================================================
   TLAČÍTKA
   ========================================================= */

.vip-academy-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	width: 100%;
	min-height: 46px;

	padding: 10px 17px;

	border: 2px solid #BE202F;
	border-radius: 24px;

	background: #BE202F;
	color: #fff !important;

	font-size: 14px;
	font-weight: 800;
	line-height: 1.25;

	text-align: center;
	text-decoration: none !important;
}

.vip-academy-button:hover,
.vip-academy-button:focus {
	border-color: #0D4168;
	background: #0D4168;
	color: #fff !important;

	text-decoration: none !important;
}

.vip-academy-button-arrow {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}


/* =========================================================
   PRŮVODCE OBRAZEM ECHOLOTU
   ========================================================= */

.vip-academy-guide {
	margin-top: 16px;

	border-top: 4px solid var(--vip-blue);

	background:
		linear-gradient(
			135deg,
			#FFFFFF 0%,
			#F5FAFC 56%,
			#EAF4F9 100%
		);
}


/* MOBILNÍ OBRÁZEK */
.vip-academy-guide-image--mobile {
	display: block;

	width: 100%;
	height: auto;

	border-bottom: 1px solid #D8E5EC;
}


/* DESKTOP OBRÁZEK */
.vip-academy-guide-image--desktop {
	display: none;
}


/* Vizuál Průvodce */
.vip-academy-guide .vip-academy-card-icon {
	background: var(--vip-blue);

	box-shadow: 0 7px 17px rgba(13,65,104,.18);
}

.vip-academy-guide .vip-academy-card-kicker {
	color: var(--vip-blue) !important;
}


/* =========================================================
   POZNÁMKA
   ========================================================= */

.vip-academy-note {
	position: relative;

	display: grid;
	grid-template-columns: 42px minmax(0,1fr);
	gap: 13px;

	margin-top: 14px;
	padding: 17px 16px;

	border: 1px solid #E0E8ED;
	border-left: 4px solid var(--vip-red);
	border-radius: 12px;

	background: #fff;

	box-shadow: 0 5px 18px rgba(13,65,104,.05);
}

.vip-academy-note-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border-radius: 50%;

	background: var(--vip-red);
	color: #fff;
}

.vip-academy-note-icon i,
.vip-academy-note-icon i::before {
	color: #fff !important;
}

.vip-academy-note strong {
	display: block;

	margin-bottom: 3px;

	color: var(--vip-blue) !important;

	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
}

.vip-academy-note p {
	margin: 0 !important;

	color: var(--vip-muted) !important;

	font-size: 13px !important;
	line-height: 1.5 !important;
}


/* =========================================================
   TABLET + DESKTOP
   ========================================================= */

@media (min-width: 768px) {

	.vip-academy-hero {
		min-height: 440px;

		padding:
			36px
			47%
			32px
			42px;

		background:
			linear-gradient(
				90deg,
				rgba(3,32,55,.92) 0%,
				rgba(3,32,55,.82) 36%,
				rgba(3,32,55,.26) 58%,
				rgba(3,32,55,0) 76%
			),
			url("/user/documents/upload/images/vip-section-hero-desktop-v02.png")
			center / cover no-repeat;
	}

	.vip-academy-hero::after {
		display: none;
	}

	.vip-academy-hero h1 {
		font-size: 43px !important;
	}

	.vip-academy-claim {
		font-size: 23px !important;
	}

	.vip-academy-intro {
		font-size: 16px !important;
	}

	.vip-academy-benefits {
		grid-template-columns: repeat(3, minmax(0,1fr));
		gap: 18px;

		margin-top: 30px;
	}

	.vip-academy-benefit {
		grid-template-columns: 46px minmax(0,1fr);
		gap: 12px;
	}

	.vip-academy-benefit-icon {
		width: 46px;
		height: 46px;
		border-radius: 12px;
	}

	.vip-academy-benefit-text {
		font-size: 14px;
	}

	.vip-academy-section-head {
		margin: 34px 0 18px;
	}

	.vip-academy-video-grid {
		grid-template-columns: repeat(2, minmax(0,1fr));
		gap: 20px;
	}

	.vip-academy-card-image {
		aspect-ratio: 16 / 9;
	}

	.vip-academy-card-body {
		padding: 23px 23px 22px;
	}

	.vip-academy-card-heading {
		margin-bottom: 15px;
	}

	.vip-academy-card h3 {
		font-size: 24px !important;
	}

	.vip-academy-card p {
		margin-bottom: 18px !important;
	}

	.vip-academy-button {
		display: inline-flex;
		width: auto;
	}


	/* =====================================================
	   PRŮVODCE – DESKTOP
	   ===================================================== */

	.vip-academy-guide {
		display: grid;

		grid-template-columns:
			minmax(0,.95fr)
			minmax(400px,1.05fr);

		align-items: center;

		min-height: 280px;
	}

	.vip-academy-guide .vip-academy-card-body {
		padding: 29px 28px;
	}

	.vip-academy-guide-image--mobile {
		display: none;
	}

	.vip-academy-guide-image--desktop {
		display: block;

		width: 100%;
		height: auto;

		align-self: center;

		border: 0;
	}

	.vip-academy-note {
		margin-top: 17px;
		padding: 19px 21px;
	}

}


/* =========================================================
   VĚTŠÍ DESKTOP
   ========================================================= */

@media (min-width: 992px) {

	.vip-academy-hero {
		min-height: 450px;

		padding-top: 38px;
		padding-bottom: 34px;
		padding-left: 48px;
	}

	.vip-academy-hero h1 {
		font-size: 50px !important;
	}

	.vip-academy-claim {
		font-size: 26px !important;
	}

	.vip-academy-section-head {
		margin-top: 40px;
	}

}


/* =========================================================
   VELMI MALÉ MOBILY
   ========================================================= */

@media (max-width: 420px) {

	.vip-academy-hero {
		padding-right: 18px;
		padding-left: 18px;
	}

	.vip-academy-hero h1 {
		font-size: 31px !important;
	}

	.vip-academy-claim {
		font-size: 19px !important;
	}

	.vip-academy-benefit-text {
		font-size: 13px;
	}

	.vip-academy-section-head h2 {
		font-size: 25px !important;
	}

	.vip-academy-card h3 {
		font-size: 20px !important;
	}

	.vip-academy-benefits {
		gap: 21px;
		margin-top: 41px;
	}

}


/* =========================================================
   =========================================================
   SONARPRO AKADEMIE – D) VIDEOTÉKY
   =========================================================
   Namespace: .vip-library-page / .vip-library-hero
   Společný HERO pro HOOK + EAGLE a ELITE + HDS.
   Skrytí Shoptet H1 zůstává lokálně v HTML konkrétní stránky.
   =========================================================
   ========================================================= */

.vip-library-hero {
    --vl-blue: #0D4168;
    --vl-red: #BE202F;
    --vl-text: #263746;
    --vl-muted: #5C6F7E;

    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;

    margin: 0 0 26px;

    border: 1px solid #D6E2E9;
    border-top: 4px solid var(--vl-red);
    border-radius: 17px;

    background: #fff;

    box-shadow: 0 10px 30px rgba(13, 65, 104, .09);

    font-family: Roboto, Arial, sans-serif;
}


/* =========================================================
   VIDEOTÉKY – OBRÁZEK
   ========================================================= */

.vip-library-hero-image {
    position: relative;
    overflow: hidden;

    background: #fff;
}

.vip-library-hero-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* =========================================================
   VIDEOTÉKY – TEXTOVÁ ČÁST
   ========================================================= */

.vip-library-hero-content {
    position: relative;
    z-index: 2;

    padding: 23px 19px 22px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FBFD 58%,
            #EEF6FA 100%
        );
}

.vip-library-hero-eyebrow {
    position: relative;
    display: inline-block;

    margin: 0 0 18px;
    padding-top: 11px;

    color: var(--vl-red) !important;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: .065em;
    text-transform: uppercase;
}

.vip-library-hero-eyebrow::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 36px;
    height: 3px;

    border-radius: 3px;

    background: var(--vl-red);
}

.vip-library-hero h1 {
    margin: 0 0 11px !important;

    color: var(--vl-blue) !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.vip-library-hero-claim {
    margin: 0 0 13px !important;

    color: var(--vl-blue) !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.vip-library-hero-text {
    max-width: 660px;

    margin: 0 !important;

    color: var(--vl-muted) !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}

.vip-library-hero-text strong {
    color: var(--vl-blue) !important;
    font-weight: 800;
}


/* =========================================================
   VIDEOTÉKY – BENEFITY
   ========================================================= */

.vip-library-hero-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    margin-top: 19px;
}

.vip-library-hero-point {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--vl-blue);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.vip-library-hero-point-icon {
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background: #EDF5F9;
    color: var(--vl-blue);

    font-size: 14px;
}

.vip-library-hero-point-icon i,
.vip-library-hero-point-icon i::before {
    color: var(--vl-blue) !important;
}


/* =========================================================
   VIDEOTÉKY – ZPĚT DO AKADEMIE
   ========================================================= */

.vip-library-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 54px;

    color: #BE202F !important;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;

    text-decoration: none !important;
}

.vip-library-hero-back-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vip-library-hero-back-arrow {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    text-decoration: none !important;
}

.vip-library-hero-back:hover,
.vip-library-hero-back:focus {
    color: var(--vl-red) !important;
    text-decoration: none !important;
}

.vip-library-hero-back:hover .vip-library-hero-back-text,
.vip-library-hero-back:focus .vip-library-hero-back-text {
    text-decoration: none;
}


/* =========================================================
   VIDEOTÉKY – TABLET + DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .vip-library-hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, .95fr);

        align-items: stretch;
    }

    .vip-library-hero-content {
        grid-column: 1;
        grid-row: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            34px
            46px
            34px
            36px;

        background:
            linear-gradient(
                90deg,
                #FFFFFF 0%,
                #F7FBFD 68%,
                #EEF6FA 100%
            );
    }

    .vip-library-hero-content::after {
        content: "";

        position: absolute;
        z-index: 3;
        top: 0;
        right: -70px;

        width: 140px;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                rgba(238, 246, 250, 1) 0%,
                rgba(238, 246, 250, .82) 32%,
                rgba(238, 246, 250, .48) 58%,
                rgba(238, 246, 250, .18) 78%,
                rgba(238, 246, 250, 0) 100%
            );

        pointer-events: none;
    }

    .vip-library-hero-image {
        grid-column: 2;
        grid-row: 1;
    }

    .vip-library-hero-image img {
        width: 100%;
        height: 100%;

        aspect-ratio: auto;
        object-fit: cover;
    }

    .vip-library-hero h1 {
        font-size: 38px !important;
    }

    .vip-library-hero-claim {
        font-size: 21px !important;
    }

    .vip-library-hero-text {
        font-size: 16px !important;
    }

    .vip-library-hero-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;

        margin-top: 23px;
    }
}


/* =========================================================
   VIDEOTÉKY – VĚTŠÍ DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    .vip-library-hero {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(430px, .95fr);
    }

    .vip-library-hero-content {
        padding:
            38px
            52px
            38px
            42px;
    }

    .vip-library-hero h1 {
        font-size: 42px !important;
    }
}


/* =========================================================
   VIDEOTÉKY – MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .vip-library-hero-content {
        background:
            linear-gradient(
                180deg,
                #FFFFFF 0%,
                #F8FBFD 58%,
                #EEF6FA 100%
            );
    }
}


/* =========================================================
   VIDEOTÉKY – MALÉ MOBILY
   ========================================================= */

@media (max-width: 420px) {

    .vip-library-hero-content {
        padding: 21px 17px 20px;
    }

    .vip-library-hero h1 {
        font-size: 28px !important;
    }

    .vip-library-hero-claim {
        font-size: 18px !important;
    }
}