/* Soukromí page styles */
#soukromi-main {
    background-color: var(--color-vanilla);
    color: var(--color-plum-dark);
    padding-block: var(--space-7) var(--space-8);
}

.soukromi-page {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.soukromi-section {
    width: 100%;
    min-width: 0;
}

.soukromi-section h2 {
    margin-block-end: var(--space-4);
}

/* Intro */
.soukromi-intro {
    position: relative;
    padding: var(--space-6);
    border: var(--border-thin) solid var(--color-teal);
    border-radius: var(--radius-none);
    background-color: var(--surface-vanilla-light);
    overflow: hidden;
}

.soukromi-intro-frame {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 80px;
    height: 80px;
    border-top: var(--border-medium) solid var(--color-brick);
    border-right: var(--border-medium) solid var(--color-brick);
    pointer-events: none;
}

.soukromi-intro-content {
    max-width: 720px;
    text-align: left;
    position: relative;
    z-index: 1;
}

.soukromi-intro-content h1 {
    margin-block-end: var(--space-4);
}

.soukromi-lead {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-4);
}

.soukromi-effective {
    max-width: 70ch;
    text-align: left;
    margin-block-end: 0;
}

/* Controller */
.soukromi-controller-card {
    width: 50%;
    max-width: 720px;
    background-color: var(--surface-vanilla-light);
    border: var(--border-thin) solid var(--color-teal);
    border-left: var(--border-medium) solid var(--color-teal);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-soft);
    padding: var(--space-5);
    text-align: left;
}

.soukromi-controller-card h3 {
    margin-block-end: var(--space-3);
}

.soukromi-controller-card p {
    max-width: 60ch;
    text-align: left;
    margin-block-end: var(--space-4);
}

.soukromi-contact-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.soukromi-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.soukromi-contact-icon {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.soukromi-contact-list li span:last-child {
    min-width: 0;
    word-break: break-word;
}

/* Collected data */
.soukromi-collected-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    width: 100%;
}

.soukromi-collected-card {
    min-width: 0;
    background-color: var(--surface-vanilla-light);
    border: var(--border-thin) solid var(--color-brick);
    border-radius: var(--radius-medium);
    padding: var(--space-4);
    text-align: left;
}

.soukromi-collected-card h3 {
    margin-block-end: var(--space-3);
}

.soukromi-collected-card p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-collected-card ul {
    margin-block-end: 0;
}

/* Purposes */
.soukromi-purposes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.soukromi-purpose-block {
    width: 100%;
    min-width: 0;
    border-left: var(--border-medium) solid var(--color-teal);
    padding-left: var(--space-4);
    text-align: left;
}

.soukromi-purpose-block h3 {
    margin-block-end: var(--space-3);
}

.soukromi-purpose-block p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-purpose-block ul {
    margin-block-end: 0;
}

/* Retention */
.soukromi-retention-wrapper {
    width: 80%;
    max-width: 720px;
    text-align: left;
}

.soukromi-retention-wrapper h3 {
    margin-block-end: var(--space-3);
}

.soukromi-retention-wrapper p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-4);
}

.soukromi-retention-table {
    width: 100%;
    margin-block-end: 0;
    border: var(--border-thin) solid rgba(0, 128, 128, 0.3);
    border-radius: var(--radius-small);
    overflow: hidden;
}

.soukromi-retention-table th,
.soukromi-retention-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-block-end: var(--border-thin) solid rgba(0, 128, 128, 0.3);
}

.soukromi-retention-table th {
    background-color: rgba(0, 128, 128, 0.08);
    font-weight: 600;
}

/* Rights */
.soukromi-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    width: 100%;
}

.soukromi-rights-list,
.soukromi-rights-procedure {
    min-width: 0;
    text-align: left;
}

.soukromi-rights-list h3,
.soukromi-rights-procedure h3 {
    margin-block-end: var(--space-3);
}

.soukromi-rights-list p,
.soukromi-rights-procedure p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-rights-list ul,
.soukromi-rights-procedure ul {
    margin-block-end: 0;
}

/* Security */
.soukromi-security-block {
    width: 100%;
    max-width: 720px;
    border-left: var(--border-medium) solid var(--color-brick);
    padding-left: var(--space-4);
    text-align: left;
}

.soukromi-security-block h3 {
    margin-block-end: var(--space-3);
}

.soukromi-security-block p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-security-block ul {
    margin-block-end: 0;
}

/* Third parties */
.soukromi-third-parties-block {
    width: 100%;
    max-width: 720px;
    border: var(--border-thin) solid var(--color-teal);
    border-radius: var(--radius-medium);
    padding: var(--space-4);
    text-align: left;
}

.soukromi-third-parties-block h3 {
    margin-block-end: var(--space-3);
}

.soukromi-third-parties-block p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-third-parties-block ul {
    margin-block-end: 0;
}

/* Cookies */
.soukromi-cookies-block {
    width: 100%;
    max-width: 720px;
    text-align: left;
}

.soukromi-cookies-block h3 {
    margin-block-end: var(--space-3);
}

.soukromi-cookies-block p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: 0;
}

/* Changes */
.soukromi-changes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    width: 100%;
}

.soukromi-changes-block {
    min-width: 0;
    text-align: left;
}

.soukromi-changes-block h3 {
    margin-block-end: var(--space-3);
}

.soukromi-changes-block p {
    max-width: 70ch;
    text-align: left;
    margin-block-end: var(--space-3);
}

.soukromi-changes-block p:last-child {
    margin-block-end: 0;
}

.soukromi-update-date {
    font-weight: 500;
}

/* Tablet */
@media (max-width: 1024px) {
    .soukromi-collected-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .soukromi-controller-card {
        width: 70%;
    }

    .soukromi-retention-wrapper {
        width: 90%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    #soukromi-main {
        padding-block: var(--space-5) var(--space-6);
    }

    .soukromi-page {
        gap: var(--space-5);
    }

    .soukromi-intro {
        padding: var(--space-4);
    }

    .soukromi-intro-frame {
        width: 48px;
        height: 48px;
    }

    .soukromi-controller-card {
        width: 100%;
    }

    .soukromi-collected-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .soukromi-rights-grid,
    .soukromi-changes-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .soukromi-retention-wrapper {
        width: 100%;
    }

    .soukromi-retention-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .soukromi-retention-table thead,
    .soukromi-retention-table tbody,
    .soukromi-retention-table tr,
    .soukromi-retention-table th,
    .soukromi-retention-table td {
        display: block;
        width: 100%;
        text-align: left;
        white-space: normal;
    }

    .soukromi-retention-table tr {
        border-block-end: var(--border-thin) solid rgba(0, 128, 128, 0.3);
        padding-block: var(--space-2);
    }

    .soukromi-retention-table th {
        background-color: transparent;
        font-weight: 600;
        padding-block-end: var(--space-1);
    }

    .soukromi-retention-table td {
        padding-block-start: var(--space-1);
    }
}

@media (max-width: 480px) {
    .soukromi-intro-content h1 {
        font-size: clamp(28px, 7vw, 32px);
    }

    .soukromi-lead,
    .soukromi-effective {
        max-width: 100%;
    }
}