/**
 * @file
 * Publication and Report listing cards.
 *
 * One stylesheet for both pages, because both are displays of a single view
 * (duplicate_of_publication: page_1 -> /resource/reports, page_2 ->
 * /resource/publication1) and both carry that view's CSS class "reports".
 * Whatever is set right here is set right on both.
 *
 * Two layouts are described below. Modern browsers use the CSS grid Views
 * already emits. Internet Explorer 11 supports neither that grid, nor the
 * custom properties that size it, nor object-fit, so the last section rebuilds
 * the same columns from inline-blocks and sizes the cover by height instead.
 * Those rules sit behind a media query no other browser matches, so nothing
 * else pays for them.
 */

/* ---------------------------------------------------------------------------
   Card shell

   A card has to fill its grid cell for a row to end level, and height: 100%
   only reaches the card if every wrapper between the cell and it passes the
   height down. Views emits four.
   --------------------------------------------------------------------------- */
.reports .views-view-responsive-grid__item,
.reports .views-view-responsive-grid__item-inner,
.reports .views-view-responsive-grid__item-inner .views-field,
.reports .views-view-responsive-grid__item-inner .field-content {
  height: 100%;
}

/* .field-content is a <span>, and an inline box ignores height. */
.reports .views-view-responsive-grid__item-inner .field-content {
  display: block;
}

.reports .reportsection {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dfe6ec;
  border-radius: 10px;
  /* The shadow this replaces was `3px 7px 8px` with no colour given, so it
     painted in currentColor -- near black, hard offset, no spread. */
  box-shadow: 0 3px 10px rgba(16, 40, 24, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.reports .reportsection:hover {
  transform: translateY(-4px);
  border-color: #2e7d32;
  box-shadow: 0 12px 26px rgba(16, 40, 24, 0.18);
}

/* ---------------------------------------------------------------------------
   Cover image

   These are COVERS -- a whole designed page, titled top to bottom -- not
   photographs, so no part of one is spare. Cropping a cover cuts the end off
   its own title: the 260px band this replaces was 1.42 times wider than it was
   tall, while the covers themselves measure about 0.71 (A4 portrait, checked
   across the uploaded files -- the bulk sit between 0.69 and 0.79). Filling
   that band meant discarding roughly the bottom half of every one, which is
   why "...ON BIODIVERSITY 2026" and "...Achievements" ran out of card.

   So the band is given the covers' OWN proportion, 5/7, and the image is fitted
   inside it rather than made to fill it:

   - an A4 cover meets that ratio, so it lands edge to edge with no visible
     border and nothing lost -- the same full-bleed look as before, only whole;
   - a cover cut to some other shape is centred and shown complete, with the
     leftover sliver of band reading as a mat around it rather than as a
     mistake.

   Stated as a ratio rather than as a pixel height so it holds at every column
   count: the grid hands the card a different width at each breakpoint, and the
   band follows it instead of needing a value written per media query. Cards in
   a row are equal width, therefore equal band height, which is what keeps every
   green title bar on one line across the row.
   --------------------------------------------------------------------------- */
.reports .reportsection img {
  display: block;
  width: 100%;
  /* Read only by browsers without aspect-ratio, and by IE via the block at the
     foot of this file. Roughly a 5/7 band at the three-column width. */
  height: 500px;
  /* The mat behind a cover that does not meet the band's ratio; also what
     shows while the image is still loading. */
  background: #eef2f5;
  border-bottom: 1px solid #e2e8ee;
  object-fit: contain;
  object-position: center;
}

@supports (aspect-ratio: 5 / 7) {
  .reports .reportsection img {
    height: auto;
    aspect-ratio: 5 / 7;
    /* One card across a phone is wide, and 5/7 of wide is a cover that scrolls
       for a screen and a half before its title bar appears. The cap trades a
       little of the cover's size for being able to see a whole card at once;
       above this width it never comes into play. */
    max-height: 78vh;
  }
}

/* ---------------------------------------------------------------------------
   Title bar

   Titles here run from one line to three. Letting the bar grow into whatever
   space is left over is what lands the "English" row of every card on the
   same baseline.
   --------------------------------------------------------------------------- */
.reports .reportsection h4 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* The bar is the full width of the card, so scaling it on hover pushed its
   corners past the card edge. The whole card lifts instead. */
.reports .reportsection h4:hover {
  transform: none;
}

/* ---------------------------------------------------------------------------
   Language links
   --------------------------------------------------------------------------- */
.reports .report-links {
  padding: 10px 12px;
  background: #ffffff;
}

.reports .report-links a {
  display: inline-block;
  margin: 2px 3px;
  padding: 3px 12px;
  border: 1px solid #cfe0d4;
  border-radius: 14px;
  color: #1b5e20;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.reports .report-links a:hover,
.reports .report-links a:focus {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Group headings

   The orange caption itself is styled by `.reports h3` in custom-media.css.
   Only the space around it belongs here, so the captions do not sit flush
   against the row of cards above them.
   --------------------------------------------------------------------------- */
.reports h3 {
  margin: 28px 0 16px;
}

.reports h3:first-child {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Narrow screens

   The cover band is deliberately NOT touched here. It is sized by ratio now,
   so it already narrows with the card; a height set at a breakpoint would
   override the ratio and bring back the crop this file exists to remove.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .reports h3 {
    font-size: 112%;
  }
}

/* ---------------------------------------------------------------------------
   Internet Explorer 11

   Matched by IE 10 and 11 and by nothing else, so every rule below is invisible
   to the browsers that handled the sections above correctly. Kept last so it
   wins over the responsive blocks on the one browser that reads both.

   Views' grid collapses to a stack in IE, which is what made each card run the
   full width of the page. The columns are rebuilt from inline-blocks, and the
   cover -- which object-fit cannot letterbox here -- is sized by height with
   width: auto, so it keeps its proportions instead of being stretched to the
   302px box the old rule gave it.
   --------------------------------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .reports .views-view-responsive-grid {
    display: block;
    margin: 0 -8px;
    /* Kills the whitespace between inline-blocks; restored on the item. */
    font-size: 0;
  }

  .reports .views-view-responsive-grid__item {
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    height: auto;
    padding: 0 8px 16px;
    font-size: 14px;
    vertical-align: top;
  }

  /* object-fit does not exist in IE, and there is no wrapper element around
     the image to crop it with, so the band height is dropped instead of the
     image being stretched into it. Full width is kept -- which is the part
     that matters -- and the height follows the cover's own proportions, so
     nothing is squashed. Cards in a row then end at slightly different
     heights, which is the honest trade for a browser that cannot crop. */
  .reports .reportsection img {
    width: 100%;
    height: auto;
  }
}

@media all and (-ms-high-contrast: none) and (max-width: 991px),
  (-ms-high-contrast: active) and (max-width: 991px) {
  .reports .views-view-responsive-grid__item {
    width: 50%;
  }
}

@media all and (-ms-high-contrast: none) and (max-width: 575px),
  (-ms-high-contrast: active) and (max-width: 575px) {
  .reports .views-view-responsive-grid__item {
    width: 100%;
  }
}