/* ==========================================================================
   Content regions — the named blocks the public pages are built from
   --------------------------------------------------------------------------
   Hero, the services panel, the logo wall, contact cards, the legal pages
   and the EU plaque. Each of these belongs to a particular kind of page; a
   rule that is reusable anywhere belongs in components.css instead.
   ========================================================================== */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.hero__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.hero__lead { font-size: var(--fs-lg); }
.hero__aside { text-align: center; }
.hero__aside figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: .75rem; }

/* Two stacked cards in a hero column. Without this the second one sits
   flush against the first, and the hero__grid gap only separates columns. */
.hero__aside-stack { display: grid; gap: 1.5rem; align-content: start; }

/* The donation QR in the hero. Square, and capped so it never dominates the
   headline it sits beside; white plate around it because a QR needs its
   quiet zone against any background. */
.hero__qr {
  /* margin-inline, not text-align: images are display:block here, so the
     centring on .hero__aside does not reach them. */
  margin-inline: auto;
  width: 100%;
  max-width: 260px;
  height: auto;
  background: #fff;
  padding: .5rem;
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Service grid — the "POSKYTOVANÉ SLUŽBY" panel
   ========================================================================== */

.services-panel {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.service-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: 1rem 1.25rem;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
/* The lift this used to have is gone; the shared hover language in
   components.css does the work now, and it moves nothing. */
.service-tile:hover,
.service-tile:focus-visible { border-color: var(--gold-dark); }
.service-tile__label { font-weight: 700; text-transform: uppercase; font-size: 1rem; }
.service-tile__blurb { font-size: var(--fs-sm); color: var(--ink-soft); margin: .25rem 0 0; }
.service-tile .btn { flex: none; }

/* ==========================================================================
   Supporters
   ========================================================================== */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1.5rem 2rem;
  align-items: center;
}
.logo-wall img { max-height: 64px; width: auto; margin-inline: auto; }

/* ==========================================================================
   Contacts
   ========================================================================== */

.person {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.person__name { font-weight: 700; text-transform: uppercase; margin-bottom: .25rem; }
.person__role { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .75rem; }
.person dt { font-size: .8125rem; text-transform: uppercase; color: var(--muted); }
.person dd { margin: 0 0 .5rem; }
.person a { font-weight: 600; }

/* The same card outside the /kontakty/ grid, where it stands alone beside
   body text rather than in a row of colleagues: left-aligned, because a
   centred e-mail address next to left-aligned prose reads as a mistake. */
.person--card { text-align: left; }
/* n.strnadu@kvalitnipodzimzivota.cz is 33 characters and the card is about
   300px wide inside its padding on a 390px phone, so at the 18px base size
   it broke mid-domain ("…zivota.c / z"). 16px is the floor the accessibility
   rules allow and it fits; the tap target is the whole line either way. */
.person--card dd a { font-size: var(--fs-sm); }

/* ==========================================================================
   Legal pages — long-form text
   ========================================================================== */

.legal h1 { margin-bottom: 1.5rem; }
.legal h2 {
  font-size: 1.25rem;
  text-transform: none;
  margin-top: 2.5rem;
}
.legal ul, .legal ol { padding-left: 1.5rem; }
.legal li { margin-bottom: .5rem; }
.legal table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.legal th, .legal td {
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--cream-deep); }

/* ==========================================================================
   The REACT-EU publicity plaque
   --------------------------------------------------------------------------
   A wide document full of small print, so it gets a white ground (the
   artwork assumes one) and a hairline edge, and is never scaled below its
   column. The same wording is repeated as real text in the partial, because
   in the image it is all pixels.
   ========================================================================== */

.react-eu__plaque { margin: 0; }
.react-eu__plaque img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--line, #d8d2c2);
  border-radius: var(--radius);
}

/* ==========================================================================
   Půjčovna pomůcek
   --------------------------------------------------------------------------
   Deliberately not the shop's .product-media. That one plates a photo on
   white because the shop's photos are rectangular snaps with their own
   backgrounds, and letterboxing them on a neutral ground is the least bad
   option. These eleven are catalogue cut-outs with real transparency, so a
   white plate would put back exactly the pasted-square look the cut-out
   removed. They sit on the card's own ground instead.
   ========================================================================== */

.rental-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 1rem 1rem 0;
}

/* Name, then the numbers. A dl rather than a table because each card is one
   item's prices, not a grid to read across, and the labels are short enough
   to sit beside their values. */
.rental-prices {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .125rem .75rem;
  margin: .5rem 0 0;
}
.rental-prices dt { color: var(--muted); font-size: var(--fs-sm); }
.rental-prices dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The card heading here is an h2, because each item is a thing on the page
   rather than a section of it, and it must not be set like a page heading. */
.card__body h2 {
  font-size: 1.125rem;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* ==========================================================================
   Page hero — the header photograph
   --------------------------------------------------------------------------
   Below the main menu, above the title, on every page. The title lies across
   the bottom edge of the photograph, so the edge cuts through the letters.

   Which means each letter has to be light on its top half, where it is over
   the picture, and dark on its bottom half, where it is over the page. That
   is one gradient, clipped to the glyphs: cream down to --hero-overlap, ink
   from there on. The switch is written as a length rather than a percentage
   so it stays welded to the edge no matter how many lines the title runs to,
   and Czech page titles do run to two („Půjčovna kompenzačních pomůcek").

   The reference for this was drastic, with the photograph itself showing
   through the letters. A photograph inside letterforms has whatever contrast
   it happens to have, which on a site with an accessibility obligation and
   an audience of seniors is not a thing to leave to chance. Two flat colours
   keep the idea, and keep it readable.
   ========================================================================== */

.page-hero {
  --hero-overlap: 2.5rem;
  /* The dark half of the title. Not --ink, which at this size was 15.5:1
     against the cream and read as a slab of black; this is warm rather than
     neutral, so it sits in the palette instead of against it, and still
     clears 6.4:1, well past the 4.5:1 for body text and more than double
     the 3:1 that text this large has to meet.

     The letters do not show the photograph through them, which was the
     first idea. The clean way to knock text out of a block is
     mix-blend-mode, and the only two blends that leave the block solid and
     the glyphs transparent need that block to be pure white (screen) or
     pure black (multiply); this page is cream. Aligning a second copy of
     the photograph to the text box instead needs a hand-tuned crop offset
     per image, and it would only work on the seven pages that have one. */
  --hero-title-ink: #5a5246;
  isolation: isolate;
}

/* The positioned box the overlays are measured against. It has to be this
   and not .page-hero, which also contains the title.

   The mask takes the razor line off the bottom of the picture. It is
   deliberately short: the title's two colours change at exactly this edge,
   so a long fade would lighten the ground under the pale half of the
   letters, which is the one place on the page that cannot afford it. Long
   enough to lose the ruled line, short enough that the letters still sit on
   photograph.

   It is on __media rather than on the <img>, so the blur and the wash fade
   out with the picture instead of ending square underneath it. */
.page-hero__media {
  --hero-fade: .875rem;
  position: relative;
  line-height: 0;
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent 100%);
}

/* No photograph yet. A band in the brand's own colours, which is visibly a
   band rather than a picture that failed to load, and which does not
   pretend a stock photograph of strangers is one of our clients. The title
   straddles it exactly as it straddles a photograph, so the page keeps its
   shape and a real picture drops in later with nothing else to change.

   The light half of the title needs something dark to sit on, which the
   gradient supplies at the foot. */
.page-hero--plain .page-hero__media {
  height: clamp(150px, 22vh, 15rem);
  background:
    linear-gradient(to bottom, var(--gold-wash) 0%, var(--cream-deep) 55%, var(--ink) 100%);
}

.page-hero__photo {
  display: block;
  width: 100%;
  /* Height, not an aspect ratio. A ratio is a function of the window's
     WIDTH, so on a wide screen the header grew until it was half the fold
     and the visitor met a hand rather than the page. What the header is
     allowed to take is a share of the HEIGHT: roughly a third, leaving the
     other two for the thing they came to read. The rem cap stops it from
     ballooning on a tall monitor. */
  height: clamp(190px, 32vh, 22rem);
  object-fit: cover;
  /* Faces and hands sit above the middle of a frame more often than below
     it, and a centred crop takes the top off them. Overridden per photo. */
  object-position: center 40%;
}

/* Blurred at the foot and clear by halfway up. backdrop-filter rather than a
   filter on the image, because a filter would blur the whole photograph and
   this has to fade: the layer is blurred evenly and then revealed by the
   mask. */
.page-hero__blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: linear-gradient(to bottom, transparent 55%, #000 95%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 95%);
  pointer-events: none;
}

/* Contrast for the light half of the title, and not merely decoration: the
   blur does not supply it, because blurring a pale photograph leaves it
   pale. Where backdrop-filter is unsupported this is the whole effect and
   the title still reads, which is why they are separate layers. */
.page-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(20, 19, 17, 0) 45%,
    rgba(20, 19, 17, .30) 75%,
    rgba(20, 19, 17, .55) 100%
  );
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 3;
  /* Exactly the overlap, so the photograph's edge lands where the gradient
     below changes colour. */
  margin-top: calc(var(--hero-overlap) * -1);
  margin-bottom: 1.5rem;
}

.page-hero__title {
  margin: 0;
  font-size: clamp(1.75rem, 7.5vw, 5rem);
  line-height: 1.05;
  text-transform: uppercase;
  /* Without this the descender of a ů or a j is clipped by the text box. */
  padding-bottom: .1em;
  /* What a browser without background-clip: text shows. It has to be the
     dark half's colour, because that is the half sitting on the page. */
  color: var(--hero-title-ink);
  /* body sets overflow-wrap: break-word, which is right for an e-mail
     address in a narrow column and wrong here: it broke „Pečovatelská" into
     „Pečovatelsk" and „á" on a phone. A title may wrap between its words and
     nowhere else, so the font size has to be what gives way instead, which
     is why the clamp above starts low. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* The two-tone fill. Guarded, because background-clip: text with a
   transparent colour is invisible where it is not supported, and an
   invisible page title is worse than a plain one. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-hero__title {
    background-image: linear-gradient(
      to bottom,
      var(--cream) 0 var(--hero-overlap),
      var(--hero-title-ink) var(--hero-overlap) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* On a phone a 16/5 strip is a sliver, and the title runs to two lines, so
   the overlap shrinks with it. */
@media (max-width: 48em) {
  .page-hero { --hero-overlap: 1.75rem; }
  .page-hero__photo { aspect-ratio: 3 / 2; }
}

/* The section straight after a hero already has the title's own margin above
   it, so its full padding would open a gap the page does not need. */
.section--after-hero { padding-top: 0; }