/* =========================================================================
   /starostlivost — the care page, rebuilt on the homepage's system.

   Loaded THIRD, after zahrada-v3.css (chrome, buttons, kontakt, footer) and
   new.css (type, tokens, cream ground, section grammar, leaf rig). Everything
   this page needs that those two already give it is NOT repeated here: the
   eyebrow, the statement, the lead, the section rhythm, the leaves and the
   close are all inherited, which is the entire point of the rebuild.

   What is genuinely local to this page is one thing repeated five times: an
   area is a photograph beside a measure, and the side alternates. The old
   page had seven different compositions and read as though it changed its
   mind at every scroll.
   ========================================================================= */


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

/* The page is a subpage, so it opens under the fixed header rather than under
   a full bleed hero. The extra top padding is that clearance and nothing
   more. */
.st-open {
    padding-top: calc(var(--hdr-h, 4.5rem) + clamp(3rem, 7vh, 5.5rem));
}

.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); }
}

/* The five doors.

   REVERTED to the loose layout: icon, number and name on one hairline, no
   sheet, no card. The sheet version read as five heavy tiles and cost the
   opening all of its air.

   The clickability complaint still stands, so it is answered without adding
   a surface: every door now carries a teal arrow at rest. A verb or a mark
   that is only there on hover is no affordance at all on a touch screen,
   where there is no hover, and it was invisible on a desktop until the
   pointer had already found it. The arrow is the smallest thing that says
   "link" while the row keeps the air it had. */
.st-index {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
}

.st-index a {
    display: grid;
    justify-items: start;
    gap: 0.85rem;
    text-decoration: none;
    color: var(--ink);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.st-index img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: contain;
}

.st-index-n {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    color: var(--teal-ink);
    font-variant-numeric: tabular-nums;
}

/* Name and arrow on one line. The arrow is teal, sits after the name rather
   than under it, and is the only thing added to the reverted design. */
.st-index-l {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.st-index-l svg {
    flex: none;
    color: var(--teal);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .st-index a:hover {
        border-bottom-color: var(--teal);
        transform: translateY(-2px);
    }

    .st-index a:hover .st-index-l svg {
        transform: translateX(4px);
    }
}


/* --------------------------------------------------------------------------
   2. JEDNA SUMA — the one argument, stated once.

   A statement on the left, the figure alone across a hairline on the right.
   Not a sheet: this page has no white cards at all, for the same reason the
   Prijatie band has none. Separation is the rule.
   -------------------------------------------------------------------------- */

.st-suma-in {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    border-block: 1px solid var(--line);
    padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

@media (min-width: 62rem) {
    .st-suma-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    }

    .st-suma-fig {
        border-left: 1px solid var(--line);
        padding-left: clamp(2rem, 4vw, 3.5rem);
    }
}

.st-suma-l {
    display: block;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.st-suma-fig b {
    display: block;
    margin-top: 0.7rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3rem, 6.5vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.st-suma-p {
    display: block;
    margin-top: 0.85rem;
    max-width: 32ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-faint);
}

.st-suma-a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    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) {
    .st-suma-a:hover { border-color: var(--teal); }
}


/* --------------------------------------------------------------------------
   3. THE AREA — the one device, five times.

   Photograph beside a measure. .st-area--flip puts the picture on the right.
   The alternation is what carries the page's rhythm; nothing else changes
   between areas, so nothing has to be re-learned at each one.
   -------------------------------------------------------------------------- */

.st-a-in {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

@media (min-width: 62rem) {
    /* The photograph column is the narrower of the two, always. Flipping is
       done by order, so the TEMPLATE has to flip with it: with one fixed
       template the picture came out 617px wide on areas one, three and five
       and 671px on two and four, and the text measure swapped with it. The
       whole promise of this page is one device repeated, and a device whose
       proportions change every other time is two devices. */
    .st-a-in {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    }

    .st-area--flip .st-a-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    }

    /* The photograph is sticky against a measure that is usually taller than
       it. Without this, area three's picture sits alone at the top of a very
       long right column with half a screen of nothing beside it. */
    .st-a-ph {
        position: sticky;
        top: calc(var(--hdr-h, 4.5rem) + 2.5rem);
    }

    /* Flip by ordering, not by direction: reversing the grid would also
       reverse the reading order for a screen reader, and the copy has to be
       announced after the label that names it either way. */
    .st-area--flip .st-a-ph { order: 2; }
    .st-area--flip .st-a-tx { order: 1; }
}

.st-a-ph {
    margin: 0;
}

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

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

/* The area label: teal icon, number, name. It replaces the eyebrow inside an
   area, because an area is not a new section of the page and should not open
   like one. */
.st-lbl {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
    font-family: var(--mono);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--teal-ink);
}

.st-lbl img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    flex: none;
}

.st-lbl-n {
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

.st-body {
    margin: 1.15rem 0 0;
    max-width: 54ch;
    font-size: 1.0625rem;
    line-height: 1.68;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.st-a-tx .stmt {
    max-width: 22ch;
}

/* A single service inside an area. Ruled off from the one above it and from
   the heading, so three of them read as three things without three boxes. */
.st-svc {
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line-soft);
}

.st-svc 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;
}

.st-svc .st-body {
    margin-top: 0.7rem;
}

.st-note {
    margin: 1.75rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line-soft);
    max-width: 54ch;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--ink-faint);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   4. THE DAY — five stops on one rule.

   REJECTED FIRST VERSION: five dots, each floating over its own ordinal and
   its own name, with nothing joining them. Five marks in a row are not a day;
   they are five marks. The rule is what makes it one thing, and it is drawn
   as segments BETWEEN consecutive dots so it begins on the first stop and
   ends on the last instead of running off into empty space.

   The ordinals are gone. "1" over "Raňajky" labels something the reader can
   already count, and it was the only reason the block needed two lines.
   -------------------------------------------------------------------------- */

.st-lane {
    --dot: 0.4375rem;

    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.st-lane li {
    position: relative;
    padding-top: 1.5rem;
}

/* The stop. */
.st-lane li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--teal);
}

/* The rule, between this stop and the next. */
.st-lane li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--dot) / 2);
    left: var(--dot);
    width: calc(100% + 0.75rem - var(--dot));
    height: 1px;
    background: var(--line);
}

.st-lane-nm {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.2;
    color: var(--ink);
}


/* --------------------------------------------------------------------------
   5. PRI ČOM POMÁHAME — the acts.

   REJECTED FIRST VERSION: one line of phrases divided by teal dots, borrowed
   from the homepage's izba equipment run. That device works there because
   those are two-word atoms. These were four compound clauses of eleven words
   each, so the run rendered as a justified paragraph with dots scattered
   inside it and no reader could tell where one act ended and the next began.

   Decomposed into atoms in the blade (every one already present in
   zps.opatrovatelskeUkony) and set as a real list: two columns, each item on
   its own line, a teal marker at its head. Not ticks. The page has already
   listed nine services above and a checklist here would be the third
   inventory in a row.
   -------------------------------------------------------------------------- */

.st-ukony {
    margin-top: clamp(2.75rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
}

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

.st-ukony ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0.95rem;
}

/* Three columns, not two. At the page's full width two columns are 640px
   each, and "podávanie stravy" sitting alone in 640px of nothing reads as a
   mistake rather than as a short item. Eight over three is 3/3/2, which fills
   its rows. */
@media (max-width: 74rem) {
    .st-ukony ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
    .st-ukony ul { grid-template-columns: 1fr; }
}

.st-ukony li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* A short teal rule, not a bullet and not a tick: it marks the line without
   arguing that the item is an inclusion. */
.st-ukony li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 0.75rem;
    height: 2px;
    background: var(--teal);
}


/* --------------------------------------------------------------------------
   6. ZÁVER
   -------------------------------------------------------------------------- */

.st-zaver-do {
    text-align: center;
}

.st-zaver-tel {
    margin: 1.5rem 0 0;
    font-size: 1.0625rem;
    color: var(--ink-soft);
}

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

.st-zaver-kto {
    margin: 0.6rem 0 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}


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

   The five doors go to two columns and then to one. They do NOT become a
   scrolling row: this is a page index, and an index a reader has to swipe
   through is an index they will not use.
   -------------------------------------------------------------------------- */

@media (max-width: 74rem) {
    .st-index {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 2rem;
    }
}

@media (max-width: 48rem) {
    .st-index {
        grid-template-columns: repeat(2, 1fr);
    }

    .st-index img {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (max-width: 62rem) {
    .st-a-tx .stmt {
        max-width: none;
    }

    /* The picture leads on a phone. In a single column the label has to come
       first, so the figure is pulled to the top of the block by order rather
       than by moving it in the markup. */
    .st-a-in {
        display: flex;
        flex-direction: column;
    }

    .st-a-ph { order: 2; }
    .st-a-tx { order: 1; }
}

@media (max-width: 40rem) {
    .st-lbl {
        font-size: 0.875rem;
        letter-spacing: 0.1em;
    }

    .st-lbl img {
        width: 2.125rem;
        height: 2.125rem;
    }

    .st-lane {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.25rem;
    }

    /* Two columns means the horizontal rule between stops no longer describes
       anything, so it goes. The dots stay: they are still five marks in
       reading order. */
    .st-lane li:not(:last-child)::after {
        display: none;
    }
}