/* Page-owned styles for Chuťová Destinace Cookies page */

.cookies-page {
    --cookies-measure: 65ch;
    --cookies-gap: var(--space-5);
    --cookies-card-gap: var(--space-4);
    --cookies-border: 1px solid rgba(114, 47, 55, 0.25);
    --cookies-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --cookies-radius: var(--radius-card);
    --cookies-transition: 0.3s ease;
}

.cookies-section {
    padding-block: var(--space-8);
}

.cookies-section + .cookies-section {
    border-block-start: 1px solid rgba(114, 47, 55, 0.15);
}

.cookies-intro {
    background-color: var(--surface-poker);
    border-block-end: 1px solid rgba(114, 47, 55, 0.15);
}

.cookies-intro-grid,
.cookies-text-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--cookies-gap);
    align-items: start;
}

.cookies-intro-copy,
.cookies-text-copy {
    min-width: 0;
    max-width: var(--cookies-measure);
    text-align: left;
}

.cookies-intro-copy h1,
.cookies-intro-copy h2,
.cookies-intro-copy p,
.cookies-text-copy h2,
.cookies-text-copy h3,
.cookies-text-copy p {
    margin-block-end: var(--space-4);
}

.cookies-intro-copy h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    color: var(--color-wine);
}

.cookies-intro-copy h2,
.cookies-text-copy h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-wine);
    margin-block-start: var(--space-5);
}

.cookies-intro-copy h2:first-of-type,
.cookies-text-copy h2:first-of-type {
    margin-block-start: 0;
}

.cookies-intro-copy h3,
.cookies-text-copy h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-wine);
    margin-block-start: var(--space-4);
}

.cookies-intro-copy p,
.cookies-text-copy p {
    max-width: var(--cookies-measure);
    color: var(--color-ink);
}

.cookies-stamp-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: 0;
}

.cookies-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-circle);
    border: 2px dashed var(--color-wine);
    color: var(--color-wine);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    background-color: transparent;
    transform: rotate(0deg);
    transition: transform var(--cookies-transition), border-color var(--cookies-transition), color var(--cookies-transition);
    flex: 0 0 auto;
}

.cookies-stamp.stamp-solid {
    border-style: solid;
    border-color: var(--color-turquoise);
    color: var(--color-turquoise-dark);
}

.cookies-stamp.visible {
    transform: rotate(5deg);
}

.cookies-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cookies-card-gap);
    margin-block-start: var(--space-5);
}

.cookies-category-card {
    background-color: var(--surface-card);
    border: var(--cookies-border);
    border-radius: var(--cookies-radius);
    box-shadow: var(--cookies-shadow);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    transition: transform var(--cookies-transition), box-shadow var(--cookies-transition);
}

.cookies-category-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cookies-category-stamp {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-width: 1.5px;
}

.cookies-category-card h3 {
    margin: 0;
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-wine);
}

.cookies-category-card p {
    margin: 0;
    max-width: var(--cookies-measure);
    color: var(--color-ink);
}

.cookies-table-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.cookies-table-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--cookies-measure);
}

.cookies-table-heading .cookies-stamp {
    flex: 0 0 auto;
}

.cookies-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-block-start: var(--space-4);
    border: var(--cookies-border);
    border-radius: var(--cookies-radius);
    background-color: var(--surface-card);
    box-shadow: var(--cookies-shadow);
}

.cookies-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.cookies-table th,
.cookies-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-block-end: 1px solid rgba(114, 47, 55, 0.15);
    vertical-align: top;
    color: var(--color-ink);
}

.cookies-table th {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-wine);
    background-color: var(--surface-poker);
    letter-spacing: 0.02em;
}

.cookies-table tbody tr:last-child td {
    border-block-end: none;
}

.cookies-table tbody tr {
    transition: background-color var(--cookies-transition);
}

.cookies-table tbody tr:hover,
.cookies-table tbody tr:focus-within {
    background-color: rgba(64, 224, 208, 0.08);
}

.cookies-table td:first-child {
    font-weight: 600;
    color: var(--color-wine);
}

.cookies-section p + p {
    margin-block-start: var(--space-3);
}

.cookies-section a {
    color: var(--color-wine);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.cookies-section a:hover {
    color: var(--color-turquoise-dark);
}

.cookies-section a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-none);
}

@media (max-width: 991px) {
    .cookies-intro-grid,
    .cookies-text-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .cookies-stamp-wrap {
        justify-content: flex-start;
    }

    .cookies-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cookies-section {
        padding-block: var(--space-7);
    }

    .cookies-intro-copy,
    .cookies-text-copy {
        max-width: 100%;
    }

    .cookies-intro-copy h1 {
        font-size: var(--text-h1);
    }

    .cookies-intro-copy h2,
    .cookies-text-copy h2 {
        font-size: var(--text-h2);
    }

    .cookies-intro-copy h3,
    .cookies-text-copy h3 {
        font-size: var(--text-h3);
    }

    .cookies-category-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .cookies-category-card {
        padding: var(--space-3);
    }

    .cookies-table-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookies-table-heading .cookies-stamp {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-width: 2px;
    }

    .cookies-stamp {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-width: 2px;
    }

    .cookies-table th,
    .cookies-table td {
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 479px) {
    .cookies-intro-grid,
    .cookies-text-grid {
        gap: var(--space-3);
    }

    .cookies-category-grid {
        gap: var(--space-2);
    }

    .cookies-table-wrapper {
        border-radius: var(--radius-none);
    }
}