/* Pano module wall: one grid for the home page. The row unit equals the
   column width, so spans are square modules; tiles may still grow with text. */

.g-wall-host {
  container-type: inline-size;
}

.g-wall {
  --g-cols: 2;
  --g-gap: 8px;
  --g-unit: calc((100cqw - (var(--g-cols) - 1) * var(--g-gap)) / var(--g-cols) / 2);
  display: grid;
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--g-unit), auto);
  grid-auto-flow: dense;
  gap: var(--g-gap);
}

@media (min-width: 768px) {
  .g-wall {
    --g-cols: 6;
    --g-gap: 10px;
    --g-unit: calc((100cqw - (var(--g-cols) - 1) * var(--g-gap)) / var(--g-cols));
  }
}

@media (min-width: 1200px) {
  .g-wall {
    --g-cols: 12;
  }

  .g-wall--half {
    --g-cols: 6;
  }
}

/* A section opens with a slim band: that row follows its content. */
.g-section .g-wall,
.g-video .g-wall,
.g-home-memorial .g-wall {
  grid-template-rows: auto;
}

/* A flow-layout group's spacing must not reach the wall's tiles. */
.g-wall > * {
  margin-block: 0;
  min-width: 0;
}

/* The home page's opening area. */
.g-home-top .g-strip,
.g-home-top .gorunum-headline,
.g-home-top .g-latest,
.g-home-top [data-bik-reklam-id="ustalan"] {
  grid-column: 1 / -1;
}

.g-home-top [data-bik-reklam-id="mansetalti"] {
  order: 2;
  grid-column: 1 / -1;
  grid-row: span 3;
}

.g-wall .gorunum-ad--rectangle,
.g-home-top .gorunum-ad--leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--mist);
}

.g-home-top .gorunum-ad--leaderboard {
  display: none;
}

@media (min-width: 768px) {
  .g-home-top .g-latest {
    grid-column: span 3;
    grid-row: span 2;
  }

  .g-home-top [data-bik-reklam-id="mansetalti"] {
    order: 0;
    grid-column: span 3;
    grid-row: span 2;
  }

  /* No ad on a tablet: the cards take a row of their own. */
  .g-home-top:not(:has([data-bik-reklam-id="mansetalti"])) .g-latest {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The ad script asks for this slot from 728px, so it has to be visible from there. */
@media (min-width: 728px) {
  .g-home-top .gorunum-ad--leaderboard {
    display: block;
  }
}

@media (min-width: 1200px) {
  .g-home-top .gorunum-headline {
    grid-column: 1 / span 8;
    grid-row: 1 / span 7;
  }

  .g-home-top .g-strip {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
  }

  .g-home-top [data-bik-reklam-id="mansetalti"] {
    grid-column: 9 / span 4;
    grid-row: 3 / span 3;
  }

  .g-home-top .g-latest {
    grid-column: 9 / span 4;
    grid-row: 6 / span 2;
  }

  /* No ad: the cards take its rows. No weather or ticker: everything moves up. */
  .g-home-top:not(:has([data-bik-reklam-id="mansetalti"])) .g-latest {
    grid-column: 9 / span 4;
    grid-row: 3 / span 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g-home-top:not(:has(.g-strip)) [data-bik-reklam-id="mansetalti"] {
    grid-row: 1 / span 3;
  }

  .g-home-top:not(:has(.g-strip)) .g-latest {
    grid-row: 4 / span 4;
  }

  .g-home-top:not(:has(.g-strip)):not(:has([data-bik-reklam-id="mansetalti"])) .g-latest {
    grid-row: 1 / span 7;
  }

  .g-home-top .gorunum-ad--leaderboard {
    display: flex;
    flex-direction: row;
    gap: 12px;
    min-height: 0;
    --gorunum-ad-width: 970px;
  }

  .g-home-top .gorunum-ad--leaderboard .gorunum-ad__label {
    width: auto;
  }
}

/* Tiles */
.g-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--wp--preset--color--tile);
  color: var(--wp--preset--color--ink);
}

.g-card--tile {
  gap: 0;
}

/* The photo never gets less than this shape: a long title makes the tile taller. */
.g-card--tile .g-card__media {
  flex: 1 0 auto;
  aspect-ratio: 3 / 2;
}

/* A row with a small photo beside the title. */
.g-card--compact {
  flex-direction: row;
  gap: 0;
}

.g-card--compact .g-card__media {
  flex: 0 0 clamp(84px, 30%, 128px);
}

.g-card--compact .g-card__media img {
  position: absolute;
  inset: 0;
}

.g-card--compact .g-card__body {
  flex: 1 1 0;
  justify-content: center;
  padding: 8px 10px;
}

.g-card--tile .g-card__media img {
  position: absolute;
  inset: 0;
}

.g-card--tile .g-card__body,
.g-tile.g-card--text .g-card__body {
  padding: 8px 10px 10px;
}

.g-tile.g-card--text {
  justify-content: center;
}

.g-tile .g-card__title {
  font-size: var(--wp--preset--font-size--pano-card-md);
  line-height: 1.08;
}

.g-tile .g-card__meta {
  font-size: var(--wp--preset--font-size--pano-meta);
  line-height: 1.3;
}

.g-tile.g-t-feature .g-card__title { font-size: var(--wp--preset--font-size--pano-card-feature); }
.g-tile.g-t-xl .g-card__title { font-size: var(--wp--preset--font-size--pano-card-xl); }
.g-tile.g-t-lg .g-card__title { font-size: var(--wp--preset--font-size--pano-card-lg); }
.g-tile.g-t-text .g-card__title,
.g-tile.g-t-compact .g-card__title { font-size: var(--wp--preset--font-size--pano-card-text); }

.g-tile--red {
  background: var(--wp--preset--color--brand);
  color: #ffffff;
  justify-content: flex-end;
}

.g-tile--red:hover .g-card__title,
.g-tile--red:focus-visible .g-card__title,
.g-tile--red .g-card__meta,
.g-tile--red .g-card__category {
  color: #ffffff;
}

@media (min-width: 768px) {
  .g-card--tile .g-card__body,
  .g-tile.g-card--text .g-card__body {
    padding: 10px 14px 12px;
  }

  .g-card--compact .g-card__body {
    padding: 8px 14px;
  }

  /* Tiles are wide on tablets: a shallower photo keeps stories on screen. */
  .g-card--tile .g-card__media {
    aspect-ratio: 16 / 9;
  }

  .g-t-xl.g-card--tile .g-card__media,
  .g-t-feature.g-card--tile .g-card__media {
    aspect-ratio: 19 / 10;
  }
}

/* Spans per range; a tile names its size for each one. */
.g-mc-1 { grid-column: span 1; }
.g-mc-2 { grid-column: span 2; }
.g-mr-1 { grid-row: span 1; }
.g-mr-2 { grid-row: span 2; }
.g-mr-3 { grid-row: span 3; }
.g-mr-4 { grid-row: span 4; }
.g-mr-5 { grid-row: span 5; }
.g-mr-6 { grid-row: span 6; }

.g-hide-mobile { display: none; }

@media (min-width: 768px) {
  .g-hide-mobile { display: flex; }
}

@media (min-width: 768px) {
  .g-tc-1 { grid-column: span 1; }
  .g-tc-2 { grid-column: span 2; }
  .g-tc-3 { grid-column: span 3; }
  .g-tc-4 { grid-column: span 4; }
  .g-tc-5 { grid-column: span 5; }
  .g-tc-6 { grid-column: span 6; }
  .g-tr-1 { grid-row: span 1; }
  .g-tr-2 { grid-row: span 2; }
  .g-tr-3 { grid-row: span 3; }
  .g-tr-4 { grid-row: span 4; }
  .g-tr-5 { grid-row: span 5; }
  .g-tr-6 { grid-row: span 6; }
}

@media (min-width: 1200px) {
  .g-card--tile .g-card__media,
  .g-t-xl.g-card--tile .g-card__media,
  .g-t-feature.g-card--tile .g-card__media {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1200px) {
  .g-c-1 { grid-column: span 1; }
  .g-c-2 { grid-column: span 2; }
  .g-c-3 { grid-column: span 3; }
  .g-c-4 { grid-column: span 4; }
  .g-c-5 { grid-column: span 5; }
  .g-c-6 { grid-column: span 6; }
  .g-c-7 { grid-column: span 7; }
  .g-c-8 { grid-column: span 8; }
  .g-c-9 { grid-column: span 9; }
  .g-c-10 { grid-column: span 10; }
  .g-c-11 { grid-column: span 11; }
  .g-c-12 { grid-column: span 12; }
  .g-r-1 { grid-row: span 1; }
  .g-r-2 { grid-row: span 2; }
  .g-r-3 { grid-row: span 3; }
  .g-r-4 { grid-row: span 4; }
  .g-r-5 { grid-row: span 5; }
  .g-r-6 { grid-row: span 6; }
  .g-r-7 { grid-row: span 7; }
}

@media (min-width: 1200px) {
  /* No widget and no notice image: the cards run across the whole wall. */
  .g-home-memorial:not(:has(.g-notice-box)) .g-memorial-head {
    grid-column: span 12;
  }

  .g-home-memorial:not(:has(.g-notice-box)) .g-memorial-card {
    grid-column: span 4;
  }
}