/* Tourist guides of the region on the region page (rendered by
   App_Code/RegionGuides.cs). The tiles, grid and list link are those of
   guide-related.css, linked just before this file; here only the guide's name
   with its theme under it, and the grid of eight tiles on small desktops.
   Scoped under #page like that file, so the order against the portal bundles
   does not matter. No min-height anywhere: Safari keeps a stale height when a
   phone is turned upright. Words stay whole (typography.css forces it on every
   element); hyphenated compounds may wrap through guide-related.css. */
#page .region-guides-text {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#page .region-guides-text .guide-related-name {
    min-width: 0;
}

/* Contrast 5.9:1 on the tile, 6.3:1 on the white hover background. */
#page .region-guides-theme {
    min-width: 0;
    color: #4a6278;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Eight tiles (every region with eight guides or more) from 992 px: two rows of
   four, instead of 3 + 3 + 2 between 992 and 1199 px (from 1200 px the shared
   rule gives four columns too). Only a min-width query, as in guide-related.css:
   no gap at fractional widths. */
@media (min-width: 992px) {
    #page .region-guides-section .guide-related-grid[data-count="8"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}