/* ==========================================================================
   Components — the pieces that are not tied to one page
   --------------------------------------------------------------------------
   Buttons, cards, flashes, badges and the disclosure affordance. If a rule
   here is only ever used by one template it is in the wrong file; content.css
   or forms.css is probably where it wants to be.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .625rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--gold-dark); }

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--gold-wash); }

.btn-sm { min-height: 40px; padding: .375rem 1rem; font-size: var(--fs-sm); }

/* A row of buttons.
   Buttons are inline-flex, so left to themselves the only thing between two
   of them is the whitespace in the HTML, about 4px, and nothing at all once
   they wrap, which on a phone put the two hero buttons edge to edge. A flex
   row with a real gap spaces them on both axes.
   The :has() rule is a safety net for markup added later; the class is what
   actually does the work, so this still behaves in a browser without it. */
.btn-row,
p:has(> .btn + .btn),
nav:has(> .btn + .btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* On the narrowest phones a long label like "Chci pečovatelskou službu" fills
   the line anyway, so let the buttons stretch and line up rather than sit
   ragged. */
@media (max-width: 26.25em) {
  .btn-row > .btn { flex: 1 1 100%; }
}

/* The "Přečíst celý článek »" style link from the design. */
.link-more {
  display: inline-block;
  min-height: var(--tap);
  padding-block: .75rem;
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__media { aspect-ratio: 16 / 10; background: var(--cream-deep); object-fit: cover; width: 100%; }
.card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { text-transform: uppercase; font-size: 1.125rem; }
.card__meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .5rem; }
.card__body .link-more { margin-top: auto; }

.quote {
  /* A <blockquote> carries margin: 1em 40px from the browser, and
     /podekovani/ is the one page that puts .quote on one rather than on a
     div. Eighty pixels of that came out of a 341px grid track, leaving a
     261px tile with a column of text too narrow to read and three times
     taller than it needed to be. A card sets its own spacing; the grid gap
     is what separates it from the next one. */
  margin: 0;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.quote__author { text-align: right; font-weight: 600; margin: 0; }

/* ==========================================================================
   Badges and pills
   ========================================================================== */

.badge-np {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--radius-pill);
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The operating areas on the two service pages: a row of place names, which
   is a list of pills rather than a list of lines. */
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-list li {
  display: inline-block;
  margin: 0 .375rem .375rem 0;
  padding: .125rem .625rem;
  background: var(--gold-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flash {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: 1rem;
  font-weight: 600;
}
.flash--success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash--error { background: var(--err-bg); border-color: var(--err); color: var(--err); }

/* ==========================================================================
   Disclosure
   --------------------------------------------------------------------------
   The clickable half of a <summary>.
   A <summary> only draws the browser's triangle while it is display:
   list-item, and the disclosures on this site are flex, so the marker
   vanished and the summary read as a heading nobody would think to press.
   This draws the affordance instead: link-coloured, underlined, with a
   chevron that turns when the section opens. Anything that makes a
   <summary> flex needs it.
   ========================================================================== */

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.disclosure {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.disclosure::after {
  content: "\25be";  /* ▾ */
  font-size: .8em;
  transition: transform .15s ease;
}
[open] > summary .disclosure::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .disclosure::after { transition: none; }
}

/* ==========================================================================
   Hover
   --------------------------------------------------------------------------
   One effect, in two strengths, rather than a different idea per grid.

   Nothing here moves. A card that shifts under the cursor takes the line
   somebody is halfway through reading with it, and on a site whose readers
   are mostly seniors that is a real cost for a small flourish. The tiles
   used to lift by 2px; they now warm and glow instead, which says the same
   thing and holds still while it does.

   The two strengths are the point. A tile that lights up like a button and
   then does nothing when pressed is worse than one that never reacted, so
   the surfaces you can actually click say so more loudly than the ones you
   cannot. Static tiles get a warm edge and a hint of light; links get a
   gold edge and a real glow.

   :focus-within, not only :hover, because a card is usually a heading and a
   link, and somebody arriving at that link by keyboard should see the same
   card come forward as somebody pointing at it.

   The global prefers-reduced-motion rule cuts every transition here to
   almost nothing, so the state still changes and simply stops easing. That
   is the right degradation: the information survives, the animation does
   not.
   ========================================================================== */

.quote,
.card,
.person,
.service-tile {
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

/* Static tiles: text in a box, nothing to click. */
.quote:hover,
.person:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(212, 169, 0, .15);
}

/* Interactive tiles. .card is a product, an article or a rental item, and
   every one of them carries a link. */
.card:hover,
.card:focus-within,
.service-tile:hover,
.service-tile:focus-within,
.quote:focus-within,
.person:focus-within {
  border-color: var(--gold-dark);
  box-shadow: 0 4px 20px rgba(212, 169, 0, .26);
  background-color: var(--white);
}

/* ==========================================================================
   Page jumps
   --------------------------------------------------------------------------
   A row of links to the sections below, sitting in the first screenful.

   They exist because the page can look finished when it is not. The header
   photograph takes a third of the fold, the lead takes the rest, and a
   reader who does not notice a scrollbar has no reason to think anything
   follows. Older readers are exactly who that happens to, and they are who
   this site is for.

   Styled as outlined pills rather than as the gold .btn, on purpose: they
   are signposts, not the thing the page wants you to do. The gold button on
   this page is the telephone number, and two kinds of button competing at
   the same weight is how the important one stops being noticed.
   ========================================================================== */

.page-jumps { margin-top: 1.75rem; }

.page-jumps__label {
  margin: 0 0 .5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.page-jumps ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-jumps__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: .5rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.page-jumps__link:hover,
.page-jumps__link:focus-visible {
  border-color: var(--gold-dark);
  background: var(--gold-wash);
}

/* The arrow nudges down on hover, which is the one movement worth making
   here: it is the thing being promised, and it is not text anybody is
   reading. Under prefers-reduced-motion the global rule stops it. */
.page-jumps__arrow {
  transition: transform .18s ease;
}
.page-jumps__link:hover .page-jumps__arrow,
.page-jumps__link:focus-visible .page-jumps__arrow {
  transform: translateY(2px);
}

/* ==========================================================================
   Link list
   --------------------------------------------------------------------------
   A list of links inside a .quote card, as rows rather than bullets.

   As a plain <ul> it was a browser list: a disc and 40px of indent, floating
   in the middle of a card that already has 1.5rem of padding, so the links
   sat nowhere near either edge and the whole card read as unfinished. The
   rows now bleed out to the card's own edges, which is what makes the hover
   reach the sides and the list look built into the box rather than dropped
   into it.

   The negative margin has to match .quote's padding. If that padding
   changes, this changes with it.
   ========================================================================== */

.link-list {
  list-style: none;
  margin: .75rem -1.5rem -1.5rem;
  padding: 0;
}
.link-list li + li { border-top: 1px solid var(--line); }

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--tap);
  padding: .75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

/* The chevron, drawn rather than typed: a "›" in the content property is
   read out by some screen readers as "single right angle quotation mark"
   after every link in the list. An SVG background says nothing. */
.link-list a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 13px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none" stroke="%236d675c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 1.5 6.5 6.5 1.5 11.5"/></svg>') center / contain no-repeat;
  transition: transform .18s ease;
}

.link-list a:hover,
.link-list a:focus-visible { background: var(--gold-wash); }
.link-list a:hover::after,
.link-list a:focus-visible::after { transform: translateX(3px); }

/* The card rounds its corners but does not clip, so the last row would
   square off over the curve. */
.link-list li:last-child a {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}