/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Proceeding component */
@layer components {
    h1,h2,h3,h4{
        font-family: var(--font-typewriter);
    }

    .page-proceeding {
        padding-block: var(--space-xl);
        font-family: var(--font-typewriter);
        color: var(--color-on-surface);
        background: var(--color-surface);
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        overflow-x: hidden;

        & .page-proceeding__header {
            text-align: center;
            border-bottom: 2px solid var(--color-on-surface);
            padding-bottom: var(--space-m);
        }

        & .page-proceeding__title {
            font-size: var(--size-step-4);
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        & .page-proceeding__subtitle {
            font-size: var(--size-step-0);
            opacity: 0.8;
        }

        & .page-proceeding__layout {
            position: relative;
            background: #fdf5e6; /* Old yellowed paper color */
            color: #333;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;

            /* Paper texture / noise effect */

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
                opacity: 0.05;
                pointer-events: none;
                z-index: 1;
            }

            & .paper__inner {
                position: relative;
                z-index: 2;
                display: grid;
                grid-template-columns: min-content 1fr;
                gap: var(--space-xs);
                padding: var(--space-m) var(--space-xl);
                align-items: start;

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: var(--space-m);
                    gap: var(--space-m);
                }
            }

            & .paper__holes {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 30px;
                background-image: radial-gradient(circle at 15px 15px, var(--color-surface) 0, var(--color-surface) 6px, #7070703d 6px, transparent 100%);
                background-size: 30px 30px;
                background-repeat: repeat-y;
                opacity: 1;
                z-index: 3;

                &.paper__holes--left {
                    left: 0;
                    border-right: 1px solid rgba(0, 0, 0, 0.05);
                }

                &.paper__holes--right {
                    right: 0;
                    border-left: 1px solid rgba(0, 0, 0, 0.05);
                }
            }
        }

        & .page-proceeding__sidebar {
            @media (max-width: 768px) {
                width: 100%;
                border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
                padding-bottom: var(--space-xs);
                margin-bottom: var(--space-xs);
            }
        }

        & .page-proceeding__main {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: var(--space-3xs);
            padding-inline: var(--space-m);

            /* Coffee Stain (Mastná škvrna - Odtlačok pohára) */
            &::after {
                content: "";
                position: absolute;
                top: var(--space-l);
                left: var(--space-m);
                width: 140px;
                height: 140px;
                background: radial-gradient(
                    circle at center,
                    transparent 0%,
                    transparent 60%,
                    rgba(139, 69, 19, 0.08) 64%,
                    rgba(139, 69, 19, 0.12) 66%,
                    rgba(139, 69, 19, 0.08) 68%,
                    transparent 72%,
                    transparent 100%
                ),
                radial-gradient(
                    circle at center,
                    rgba(139, 69, 19, 0.03) 0%,
                    rgba(139, 69, 19, 0.01) 80%,
                    transparent 100%
                );
                border-radius: 50% 48% 52% 49%;
                transform: rotate(10deg) skew(2deg);
                pointer-events: none;
                z-index: 5;
                filter: blur(1px);
            }
        }

        & .page-proceeding__section-title {
            font-size: var(--size-step-1);
            text-decoration: underline;
            margin-bottom: var(--space-s);
            text-transform: uppercase;
        }

        & .page-proceeding__table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--size-step--1);

            & th, & td {
                border: 1px solid var(--color-on-surface);
                padding: var(--space-xs);
                text-align: left;
            }

            & th {
                background: rgba(0, 0, 0, 0.05);
            }
        }

        & .page-proceeding__footer {
            margin-top: auto;
        }
    }

    [data-theme="dark"] .page-proceeding {
        & .page-proceeding__layout {
            background: #e0d0b0; /* Slightly darker yellow for dark mode */
            color: #222;
        }

        & .page-proceeding__table th {
            background: rgba(255, 255, 255, 0.05);
        }
    }
}