/* „Zase jen přání e-mailem?" — fotka přípitku a proč víno místo e-mailu.
 * Jediná tmavá plocha stránky (kromě patičky), proto nejdůraznější místo.
 * Předloha: sekce `pripitek` v prototyp/v48/index.html (css/35-emoce.css). */

.pripitek {
  background: var(--c-bordo-tmava, hsl(334 45% 20%));
  color: hsl(36 40% 96%);
}
.pripitek__obal {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 34rem;
}
.pripitek__foto { position: relative; margin: 0; min-height: 100%; }
/* Obě ruce se sklenkami jsou ve zdroji mezi 28 a 70 % šířky, střed trochu vlevo. */
.pripitek__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
}
.pripitek__zdroj {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: hsl(334 45% 12% / 0.72);
  color: hsl(36 40% 96%);
  font-size: 0.75rem;
  line-height: 1.4;
}
.pripitek__zdroj a { color: inherit; }

.pripitek__text { align-self: center; padding: 5rem clamp(2rem, 6vw, 6rem); max-width: 42rem; }
.pripitek__nadpis {
  font-family: var(--font-nadpis, Newsreader, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
  color: hsl(36 40% 96%);
}
/* „e-mailem?" se nesmí rozdělit na spojovníku (ve slovníku jako <span>) */
.pripitek__nezalom { white-space: nowrap; }
.pripitek__veta { font-size: 1.125rem; line-height: 1.65; color: hsl(345 30% 88%); margin: 0 0 1.25rem; max-width: 42ch; }
.pripitek__dodani {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: hsl(36 20% 82%);
  margin: 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(334 30% 34%);
  max-width: 46ch;
}
.pripitek__btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--r-ovladani, 10px);
  background: hsl(36 40% 96%);
  color: var(--c-bordo-tmava, hsl(334 45% 20%));
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.pripitek__btn:hover,
.pripitek__btn:focus-visible { background: hsl(40 55% 84%); transform: translateY(-1px); }
.pripitek :focus-visible { outline-color: hsl(36 40% 96%); }

@media (max-width: 900px) {
  .pripitek__obal { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pripitek__foto { aspect-ratio: 4 / 3; min-height: 0; }
  .pripitek__text { padding: 3rem 1.5rem; max-width: none; }
}
@media (max-width: 600px) {
  .pripitek__foto { aspect-ratio: 5 / 4; }
  .pripitek__text { padding: 2.5rem 1rem; }
  .pripitek__veta { font-size: 1.0625rem; }
  .pripitek__dodani { margin: 1.5rem 0; }
  .pripitek__btn { display: block; text-align: center; }
}