/* =========================================================================
   /cennik — the price list, rebuilt on the homepage's system.

   Third in the cascade, after zahrada-v3.css (chrome, buttons, kontakt,
   footer) and new.css (type, tokens, cream ground, section grammar, leaf
   rig). Everything those two already give this page is not repeated here.

   NO MONTHLY FIGURE ANYWHERE. The rate cell used to carry a second line
   ("pri 30 dňoch 1 095 €") under every price and there was a .cennik-rate-mes
   rule to style it. Both are gone by decision, not by accident; the reasoning
   is in the blade's header. If a rule for a monthly figure ever reappears in
   this file, something has gone wrong upstream.
   ========================================================================= */


/* --------------------------------------------------------------------------
   1. THE RATE BOARD

   The page's whole reason. Two payer groups side by side, two rates in each,
   under one heavy rule. Not boxed and not a table: a family holds this beside
   another facility's page, and a bordered grid is harder to read across than
   four numbers on a common baseline.
   -------------------------------------------------------------------------- */

.cn-open {
    padding-top: calc(var(--hdr-h, 4.5rem) + clamp(3rem, 7vh, 5.5rem));
}

.cn-board {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    border-top: 2px solid var(--ink);
    padding-top: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 56rem) {
    .cn-board {
        grid-template-columns: 1fr 1fr;
    }

    /* One hairline between the two payers. It is the only division on the
       board, because which payer you are is the only thing that has to be
       decided before reading a number. */
    .cn-grp + .cn-grp {
        border-left: 1px solid var(--line);
        padding-left: clamp(2rem, 4vw, 3.5rem);
    }
}

.cn-grp-nm {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.cn-grp-note {
    margin: 0.5rem 0 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.cn-rates {
    display: grid;
    gap: 1.35rem;
    margin-top: 1.75rem;
}

/* Room on the left, price on the right, one hairline under the row.

   WHAT WAS BROKEN. The row was a three column grid with the dotted leader
   drawn as ::before placed in column 2. A pseudo-element is the FIRST child
   in grid order, so once it took column 2 the auto-placement cursor sat past
   it: the room name landed in column 3 and the price wrapped onto a second
   row underneath. The result read as a caption over a number rather than as
   a price list row, which is what came back.

   The leader is gone rather than repaired. Two reasons. It is the fussiest
   element on the page and it was the thing being pointed at; and the register
   further down already sets its rows as name, hairline, price with no dots at
   all, so dropping them makes the board and the register the same object seen
   twice rather than two ideas about the same problem.

   Baseline alignment, not centre: the room name and a 40px figure share a
   line, and centring them would float the label in the middle of the number's
   height. */
.cn-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line-soft);
}

.cn-rate-izba {
    font-size: 1.0625rem;
    color: var(--ink-soft);
}

.cn-rate-cena {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    white-space: nowrap;
}

.cn-rate-cena b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.cn-rate-cena .u {
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.cn-board-note {
    margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-faint);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   2. ČO JE V TEJ SUME

   Four groups of short atoms, each led by its teal icon. Deliberately NOT
   sheets: the price board above it is unboxed, and putting the value side of
   the argument in cards while the cost side sits bare would be the page
   raising its voice for one of the two.
   -------------------------------------------------------------------------- */

.cn-vc {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.75rem, 3.5vw, 3rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.cn-vc-g {
    border-top: 2px solid var(--teal);
    padding-top: 1.35rem;
}

.cn-vc-g img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    display: block;
}

.cn-vc-g h3 {
    margin: 1rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.125rem, 1.7vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}

.cn-vc-g ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.cn-vc-g li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* A small teal dot, not a tick. The heading already says these are included;
   ticking each one argues the same thing eight more times. */
.cn-vc-g li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--teal);
}


/* --------------------------------------------------------------------------
   3. THE PHOTOGRAPH — one on the page, alone in its band.
   -------------------------------------------------------------------------- */

.cn-fig {
    margin: 0;
    max-width: 62rem;
    margin-inline: auto;
}

.cn-fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--lift);
}

.cn-fig figcaption {
    margin-top: 1.15rem;
    max-width: 44ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-faint);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   4. THE REGISTER — the itemisation.

   Group name in the left gutter, rows down a measure on hairlines. The rows
   are the document; the gutter is only a label, so it is mono and quiet.
   -------------------------------------------------------------------------- */

.cn-reg {
    display: grid;
    gap: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 62rem;
}

.cn-reg-g {
    display: grid;
    gap: 1rem;
}

@media (min-width: 56rem) {
    .cn-reg-g {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
        column-gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    /* The group name rides its own rows.

       A sticky grid item is constrained to its GRID AREA, not to the section,
       which is exactly the behaviour wanted here: "Odborné činnosti" travels
       down beside its six rows and is handed off at the boundary instead of
       carrying on into Stravovanie. align-items: start above is what keeps the
       box short enough to have somewhere to travel; stretched to the full row
       height it would have no room and sticky would do nothing.

       No JavaScript and no scroll listener: the label is a label, and the
       whole effect is two declarations. */
    .cn-reg-g h3 {
        position: sticky;
        top: calc(var(--hdr-h, 4.5rem) + 1.75rem);
    }
}

.cn-reg-g h3 {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-ink);
    padding-top: 0.9rem;
}

.cn-reg-g ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cn-reg-g li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--line-soft);
}

.cn-reg-g li:first-child {
    border-top-color: var(--line);
}

.cn-reg-g .nm {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.cn-reg-g .pr {
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   5. NAD RÁMEC, AND THE STAMP
   -------------------------------------------------------------------------- */

.cn-nad {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 3rem);
    max-width: 62rem;
}

@media (min-width: 56rem) {
    .cn-nad {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
        align-items: start;
    }
}

.cn-nad-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cn-nad-list li {
    padding: 0.95rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.cn-nad-list li:first-child {
    border-top-color: var(--line);
}

.cn-note {
    margin: 1.5rem 0 0;
    max-width: 54ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-faint);
    text-wrap: pretty;
}

/* The approval. A signature line on the left, the validity stamped beside it,
   the way it sits on the posted document. */
.cn-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
    max-width: 62rem;
}

.cn-stamp-sign {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.cn-stamp-sign img {
    width: 2.75rem;
    height: 2.75rem;
    opacity: 0.85;
}

.cn-stamp-sign .lbl {
    display: block;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.cn-stamp-sign .val {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--ink);
}

.cn-stamp-mark {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--teal-ink);
}


/* --------------------------------------------------------------------------
   6. NARROW
   -------------------------------------------------------------------------- */

@media (max-width: 74rem) {
    .cn-vc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 56rem) {
    /* The two payers stack, so the group that used to be divided by a
       hairline gets a rule over it instead. */
    .cn-grp + .cn-grp {
        border-top: 1px solid var(--line);
        padding-top: clamp(1.75rem, 4vw, 2.5rem);
    }
}

@media (max-width: 44rem) {
    .cn-vc {
        grid-template-columns: 1fr;
    }

    /* The row already wraps on its own: flex-wrap puts the price under the
       room name once the two no longer fit, and the hairline still closes the
       row underneath both. Nothing to override. */
}