@layer fonts, reset, tokens, composition, block, exception, utility;

/* Locally locked webfonts (symfinity/font-manager, `php bin/console fonts:lock`).
   Put in their own, weakest layer on purpose: every generated file ends with
   unlayered `body`, `h1..h6` and `strong, b` rules, and unlayered rules outrank
   every @layer — loaded raw they would take the whole design system over.
   Inside the layer the last import wins, so --font-body's face goes last: if
   the reset layer ever stops naming a family, the site still falls back to the
   body face rather than to whichever font happened to load last.
   The declared families and weights live in templates/base.html.twig. */
@import "../fonts/inter-zK_j1Ut.css" layer(fonts);
@import "../fonts/playfair-display-TX57wlO.css" layer(fonts);
@import "../fonts/source-serif-4-61KMkBx.css" layer(fonts);

@import "variables-NcH9HL4.css";
@import "form-hG2irmN.css";
@import "auth-geiuj5T.css";
@import "account-qTcjSqF.css";

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color-scheme: light dark;
    }

    body {
        font-family: var(--font-body);
        font-size: var(--text-body-md);
        line-height: var(--leading-body-md);
        color: var(--color-text);
        background: var(--color-bg);
        min-height: 100dvh;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font: inherit;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }
}

@layer composition {
    /* Vertical rhythm: adds space above every child that follows another child. */
    .flow > * + * {
        margin-top: var(--flow-space, var(--space-3));
    }

    /* Centered content column with a max width and page gutters. */
    .wrapper {
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding-inline: var(--space-page-mobile);
    }

    /* Horizontally-wrapping group of items with even gaps (e.g. tag lists, actions). */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--cluster-space, var(--space-2));
    }

    /* Auto-fit grid — column count adapts to available width. */
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-width, 16rem), 100%), 1fr));
        gap: var(--space-3);
    }

    .l-page {
        padding-top: 3.5rem;   /* TopBar height */
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* Single-column page body (auth, static pages) — the pages that carry no
       full-bleed sections of their own and just need breathing room. */
    .l-panel {
        padding-block: var(--space-6);
    }

    /* Share page: keeps the card preview (and the controls sized to match it)
       within the viewport on a phone, where this flow actually happens. */
    .l-share {
        --preview-max-inline: min(22rem, 62dvh * 9 / 16);
    }

    .l-feed {
        display: flex;
        flex-direction: column;
        flex: 1;

        & .l-feed__empty {
            padding-block: var(--space-6);
            padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
            font-family: var(--font-body);
            font-size: var(--text-body-md);
            color: var(--color-text-muted);
        }
    }

    /* "Vráť sa zajtra" — the line that closes a page.
       Deliberately not nested inside .l-feed: the homepage ends this way
       without being a feed at all, and a page that stops on purpose is half
       the brand and half the cold-start cover. */
    .l-feed__end {
        padding-block: var(--space-6);
        padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
        font-family: var(--font-ui);
        font-size: var(--text-label-caps);
        text-align: center;
        color: var(--color-text-muted);
    }
}

@layer utility {
    .u-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .u-text-center {
        text-align: center;
    }

    .u-text-error {
        color: var(--color-error);
    }
}