/* =========================================================================
   /o-zariadeni — the record page, 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). Nothing those two already provide is repeated here.

   .st-trail is borrowed from starostlivost.css rather than redeclared — no.
   It is NOT: that file is not loaded here. The breadcrumb is redeclared at
   the bottom of this file, and if a third page needs it, it moves to new.css
   rather than becoming a third copy.
   ========================================================================= */


/* --------------------------------------------------------------------------
   1. OPENING
   -------------------------------------------------------------------------- */

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

/* THE OPENING PHOTOGRAPH.

   One wide picture at the full measure, not a 0.85fr column beside the type.
   The pages that work on this site lead with photography at this size; this
   one had four blocks of text with small pictures arranged around them, which
   is what "extremely lacking" was.

   16/9 at the full wrap is a deliberate step up from the 3/2 the other pages
   use inside a two column block: this is the only picture on the page that
   stands alone, so it is the one that gets to be big. */
.oz-hero {
    margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
}

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

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

/* The figures strip is new.css's .figs, inherited whole. It only needs the
   space above it; everything else about it is already the homepage's. */
.oz-open .figs {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* The breadcrumb. Same object as on /starostlivost; see the note at the head
   of this file about why it is declared twice and when it should stop being. */
.st-trail {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.st-trail a {
    color: var(--teal-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.1rem;
    transition: border-color 0.28s ease;
}

@media (hover: hover) {
    .st-trail a:hover { border-color: var(--teal); }
}


/* --------------------------------------------------------------------------
   2. PRIJATIE — the page's centrepiece.

   Two parts under one head: who may be admitted, then how you get in. The
   part headings are plain mono on a rule and are NOT second eyebrows: the
   band already opened with one, and a second dotted teal eyebrow two hundred
   pixels below it would read as a second section rather than as the second
   half of this one.
   -------------------------------------------------------------------------- */

/* No rule on the part label. It used to carry a border-top, and with the
   conditions' rules and the routes' rules under it the section came out as
   four full width lines stacked down one screen. The label is a label; the
   blocks under it draw their own edges. */
.oz-part {
    margin-bottom: 1.35rem;
}

.oz-part--two {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.oz-part-h {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* The eligibility half: a photograph beside a stacked list.

   THE FAILURE THIS REPLACES. Both halves of this band were a three column
   grid with a teal marker over each cell, the same serif h3 and the same
   body copy. Two blocks answering completely different questions wore one
   costume, so the band read as six interchangeable cells.

   A condition is something a reader checks themselves against, one at a
   time, stopping when one fits. That is a column. The routes below are a
   choice between three parallel options, which is a row. Now they look like
   what they are. */
.oz-kto {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    /* The photograph column is the same proportion /starostlivost gives its
       areas. It was 0.8fr, which made the picture an illustration beside the
       text rather than half the block. */
    .oz-kto {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    }

    .oz-kto-ph {
        position: sticky;
        top: calc(var(--hdr-h, 4.5rem) + 2.5rem);
    }
}

.oz-kto-ph {
    margin: 0;
}

.oz-kto-ph img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--lift);
}

.oz-kto-ph figcaption {
    margin-top: 0.95rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-faint);
    text-wrap: pretty;
}

/* Stacked, divided by hairlines. The first rule is teal and heavier so the
   list still opens on the accent the band's other half uses for its dots. */
.oz-pod {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oz-pod li {
    border-top: 1px solid var(--line);
    padding: 1.35rem 0;
}

.oz-pod li:first-child {
    border-top: 2px solid var(--teal);
}

.oz-pod li:last-child {
    padding-bottom: 0;
}

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

.oz-pod p {
    margin: 0.7rem 0 0;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--ink-soft);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   3. THE THREE ROUTES

   WHAT WAS WRONG. Each lane hung a teal dot on a hairline that ran across the
   top of the block, and then left 2.1rem of nothing before the number. The
   dot and its rule floated a long way above the thing they belonged to, so
   the three routes read as three columns drifting under a decoration rather
   than as three headed blocks — and the rule, the part label's rule above it
   and the conditions' rules above that stacked into four horizontal bands in
   one section.

   Now each route opens on its own rule with the number sitting directly on
   it, which is the same object the conditions above use. One device in the
   band instead of two, and nothing floats.
   -------------------------------------------------------------------------- */

.oz-fork {
    --gap: clamp(1.75rem, 4vw, 3.25rem);
    --row: 2.5rem;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
}

.oz-lane {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--teal);
    padding-top: 1.05rem;
}

.oz-lane-n {
    margin: 0 0 0.7rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    color: var(--teal-ink);
    font-variant-numeric: tabular-nums;
}

.oz-lane h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.4375rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}

.oz-lane-f {
    margin: 0.55rem 0 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
}

.oz-lane-t {
    margin: 0.95rem 0 1.35rem;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* The outcome block that used to close each lane is gone with the prices;
   see the blade. .oz-lane-t no longer needs flex:1 to push it to the bottom,
   but it keeps it so the three lanes still end on one baseline when their
   sentences run to different lengths. */
.oz-lane-t {
    flex: 1;
}


.oz-help {
    max-width: 52rem;
    margin: clamp(2.75rem, 5vw, 4rem) 0 0;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
}

.oz-help p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.oz-help .tel {
    color: var(--teal-ink);
    font-weight: 600;
    white-space: nowrap;
}

.oz-help-x {
    margin-top: 1.15rem !important;
}

.oz-help-x a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--teal-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.3rem;
    transition: border-color 0.28s ease;
}

@media (hover: hover) {
    .oz-help-x a:hover { border-color: var(--teal); }
}


/* --------------------------------------------------------------------------
   4. THE PHOTOGRAPH
   -------------------------------------------------------------------------- */

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

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

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

.oz-fig-lbl {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--teal-ink);
}


/* The record beside a photograph, and flipped against the block above it so
   the page alternates the way /starostlivost does: picture left, then picture
   right, then picture left. Ten rows of type standing alone was the flattest
   thing on the site. */
.oz-zaznam-in {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .oz-zaznam-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    }

    .oz-zaznam-ph {
        position: sticky;
        top: calc(var(--hdr-h, 4.5rem) + 2.5rem);
    }
}

.oz-zaznam-ph {
    margin: 0;
}

.oz-zaznam-ph img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--lift);
}

.oz-zaznam-ph figcaption {
    margin-top: 0.95rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-faint);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   5. THE REGISTER — the particulars.

   A ruled definition list, two columns per row, on a measure. Not a bordered
   table: a family sets this beside another facility's page, and a grid of
   cells is harder to read across than a label and a value on one line.
   -------------------------------------------------------------------------- */

.oz-reg {
    margin: 0;
}

.oz-reg-r {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    row-gap: 0.35rem;
    padding: 1.05rem 0;
    border-top: 1px solid var(--line-soft);
}

.oz-reg-r:first-child {
    border-top: 2px solid var(--ink);
}

.oz-reg dt {
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-ink);
    padding-top: 0.2rem;
}

.oz-reg dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    text-wrap: pretty;
}


/* Three of the record's rows, shown. Small, quiet, captioned with the name of
   the thing and nothing else: a caption arguing for its own photograph is a
   caption nobody believes. */
.oz-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.oz-strip figure {
    margin: 0;
}

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

.oz-strip figcaption {
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}


/* THE MARK. Large, faint, cropped by the band, standing in the one field on
   the page that carries no word at any width. It is behind the type in paint
   order (z-index -1, not 0: a positioned element with z-index 0 paints AFTER
   inline content and would sit on top of the small print), and the legal
   measure is capped so nothing ever runs under it. */
.oz-pravne {
    position: relative;
    overflow: hidden;
}

.oz-mark {
    position: absolute;
    right: -6%;
    bottom: -18%;
    width: min(34rem, 30vw);
    height: auto;
    opacity: 0.07;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 74rem) {
    /* Below this the legal measure fills the band and there is no empty field
       left to stand a mark in. It is removed, never lightened: a mark over a
       word is a mark over a word at any opacity. */
    .oz-mark { display: none; }
}


/* --------------------------------------------------------------------------
   6. THE LEGAL BLOCK

   Small print at the site's small size and no smaller, in the ink of the page
   rather than grey. Findable by the person who came looking for it, silent
   for everyone else.
   -------------------------------------------------------------------------- */

.oz-pravne-body {
    max-width: 54rem;
    display: grid;
    gap: 1.75rem;
}

.oz-pravne-body p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.oz-pravne-lbl {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}


/* --------------------------------------------------------------------------
   7. NARROW
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
    /* On one column the picture goes under its type, the same way the areas
       on /starostlivost do: the label has to arrive before the photograph it
       belongs to. */
    .oz-zaznam-in,
    .oz-kto {
        display: flex;
        flex-direction: column;
    }

    .oz-kto-ph { order: 2; }
    .oz-kto .oz-pod { order: 1; }

    /* Three lanes side by side stop being readable well before this width:
       each carries a heading, a formal name, a sentence AND a figure. */
    .oz-fork {
        grid-template-columns: 1fr;
        row-gap: var(--row);
    }
}

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

    /* The register's label sits over its value rather than beside it: at this
       width a 16rem label column leaves the value about twelve characters. */
    .oz-reg-r {
        grid-template-columns: 1fr;
    }

    .oz-reg dt {
        padding-top: 0;
    }
}