/* =========================================================
   Meteopanel - style.css
   Cieľ:
   - .tile má pevnú výšku
   - .textbox vyplní priestor nad .imgbox (až po imgbox)
   - .imgbox je nalepený na spodok dlaždice
   ========================================================= */

/* 1) Reset + box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: #000;
  background: #fff;
}

/* 2) Typografia helpery (nech nemusíš meniť HTML) */
.f1 { font-size: 18px; }
.f2 { font-size: 14px; }
.f3 { font-size: 12px; }
.f4 { font-size: 10px; }

/* 3) Linky */
a {
  color: #0a58ca;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* 4) Grid dlaždíc */
#dlazdice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 5px;
}

/* 5) Dlaždica (oreginal bolo 435 x 435 px) */
.tile {
  width: 500px;
  height: 500px;

  border: 1px solid #000;
  background: #fff;

  padding: 5px;
  overflow: hidden;

  /* kľúč: stĺpcový flex layout */
  display: flex;
  flex-direction: column;
}

/* 6) Textbox a imgbox rozdelenie výšky v rámci .tile
   - textbox: vyplní všetko nad imgboxom
   - imgbox: je dole, berie len svoju výšku
*/
.tile .textbox {
  flex: 1 1 auto;     /* vyplní všetok voľný priestor nad imgboxom */
  min-height: 0;      /* dôležité vo flexe (proti pretekaniu) */
}

/* odstávce v textboxe – zruš defaultné marginy */
.tile .textbox p {
  margin: 0 0 4px 0;
}
.tile .textbox p:last-child {
  margin-bottom: 0;
}

/* imgbox – spodná časť */
.tile .imgbox {
  flex: 0 0 auto;     /* neťahať do výšky */
  margin-top: auto;   /* poistka: pritlačí na spodok dlaždice */
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* obrázok sa zmestí do imgboxu */
.tile .imgbox img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 7) Meteogram: širší imgbox než dlaždica (tvoj existujúci hack) */
.tile .imgbox.meteogram {
  width: calc(100% + 12px);
  margin-left: -4px;
}

/* 8) Ak niekde necháš img bez imgboxu, nech sa aspoň nesekne */
.tile img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 9) Logo dlaždica – voliteľné */
.tile.logo {
  justify-content: space-between;
}
.tile.logo .imgbox {
  justify-content: center;
}

/* 10) Responsívne */
@media (max-width: 920px) {
  #dlazdice {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #dlazdice { padding: 0; gap: 8px; }
  .tile { width: calc(100vw - 8px); height: calc(100vw - 8px); }
}