/* Story cards: one fixed structure, so a row lines up.
 *
 * Every card in a row is as tall as the tallest one (a grid item stretches),
 * but the card used to be a block, so its "Podporiť priamo" button and the
 * OZ TAMITOS note sat right under the words and landed at a different height
 * on every card. Now the card is a flex column: the title and the teaser are
 * clamped to two lines each and always reserve those two lines, and the give
 * block is pushed to the bottom with margin-top:auto. A long title or a short
 * teaser no longer moves the button.
 *
 * Loaded after refresh.css and written one selector deep (`html .card`) so it
 * wins the same way refresh.css does, without !important.
 */

html .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html .card__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
html .card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* One line for the name and age, two for the title, two for the teaser.
   min-height reserves the lines a short text does not use, so the money
   below starts at the same height on every card. */
html .card__who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}
html .card__teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.5;
  min-height: calc(2 * 1.5em);
}

/* The action block: always at the bottom of the card. */
html .card__give {
  margin-top: auto;
}
html .card__give .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Photos from a phone carry their rotation in EXIF. New uploads are turned
   upright on the server; this is the browser default anyway and is here so
   nothing later in the cascade can switch it off. */
html img {
  image-orientation: from-image;
}

/* "We start once we find a sponsor" (`_sponsor_banner.html`) and the pill on
 * the stories hero. Glass like the rest of the page; only drawn while no
 * sponsor runs. */
html .sponsor-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.45;
}
html .story-page .sponsor-banner,
html .rail .sponsor-banner { margin: 18px 0 0; }
html .sponsor-banner__link {
  font-weight: 800;
  color: #b0306e;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html .hero--stories .hero__cta { margin: 14px 0 0; }
html .sponsor-pill { border-radius: 999px; }

/* Cover photos carry width and height attributes (they stop the layout from
   jumping while the picture loads). Those attributes alone would draw the
   photo at its full pixel height, so the card keeps its own 4:3 frame. */
html .card__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}