/*
 * Deal hub pages (/deals/, /brunch/, /erlebnisse/, /restaurantdeals/): hero and tiles.
 *
 * The hero and tiles are ordinary editor blocks (cover, columns, image) inside a group
 * with the class `gn-hub`, so Culinarius edits them in the block editor. This file only
 * adds what the block styles leave to the theme. Loaded by inc/deal_pages.php on deal
 * landing pages only.
 */

.gn-hub {
    margin: 12px 0 36px;
}
/* A flex column defaults to min-width: auto, so one long word ("Niederösterreich")
   pushed the third tile past the edge of a phone screen. */
.gn-hub .wp-block-column {
    min-width: 0;
}
/* The block default is 2em (32px) between columns, which made five brunch cards narrow
   with wide gutters. One gap for every tile row, horizontally and between stacked rows. */
.gn-hub .gn-hub-regions,
.gn-hub .gn-hub-occasions {
    gap: 20px;
    margin: 0;
}
.gn-hub .gn-hub-occasions + .gn-hub-occasions {
    margin-top: 20px;
}
/* main.css (the theme's port of the pre-5.0 block styles) also puts 12px of margin on
   each side of every column, which turned the 20px gap into 44px. The gap alone spaces them. */
.gn-hub .gn-hub-regions > .wp-block-column,
.gn-hub .gn-hub-occasions > .wp-block-column {
    margin: 0;
}
/* Occasion cards come and go with their deals (inc/deal_pages.php), so a row keeps a
   fixed card width and wraps, rather than stretching two cards across the page. Four per
   row; three or five when that is exactly how many are left. */
@media (min-width: 782px) {
    .gn-hub .gn-hub-occasions:not(.gn-hub-categories) {
        flex-wrap: wrap !important;
    }
    .gn-hub .gn-hub-occasions:not(.gn-hub-categories) > .wp-block-column {
        flex: 0 0 calc((100% - 60px) / 4) !important;
    }
    .gn-hub .gn-hub-occasions:not(.gn-hub-categories):has(> .wp-block-column:nth-child(5):last-child) > .wp-block-column {
        flex-basis: calc((100% - 80px) / 5) !important;
    }
    .gn-hub .gn-hub-occasions:not(.gn-hub-categories):has(> .wp-block-column:nth-child(3):last-child) > .wp-block-column {
        flex-basis: calc((100% - 40px) / 3) !important;
    }
}

/* Six category cards on /deals/: one columns block (so phones get three even rows of two)
   that wraps to two rows of three on wider screens instead of six narrow cards in a row. */
@media (min-width: 782px) {
    .gn-hub .gn-hub-categories {
        flex-wrap: wrap !important;
    }
    .gn-hub .gn-hub-categories > .wp-block-column {
        flex: 0 0 calc((100% - 40px) / 3) !important;
    }
}
/* The theme breaks headings anywhere (word-break: break-word), which split
   "Muttertagsbrunch" before its last letter. Break between syllables instead; the page
   is lang="de-AT", so the browser hyphenates German. */
.gn-hub h3 {
    word-break: normal;
    overflow-wrap: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
}

/* Hero */
.gn-hub .gn-hub-hero {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 28px;
    padding: 40px 48px;
}
.gn-hub .gn-hub-hero .wp-block-cover__inner-container {
    max-width: 640px;
}
.gn-hub .gn-hub-hero h1 {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    margin: 0 0 14px;
}
.gn-hub .gn-hub-hero .gn-hub-lead {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}
.gn-hub .gn-hub-hero .wp-block-button__link {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 22px;
}

/* Section titles with the pink rule from the mockup */
.gn-hub .gn-hub-title {
    position: relative;
    margin: 30px 0 14px;
    padding-left: 52px;
    font-size: 24px;
}
.gn-hub .gn-hub-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 2px;
    background: #ad3e81;
}

/* Bundesland tiles: image with text on it */
.gn-hub .gn-hub-region {
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.gn-hub .gn-hub-region h3,
.gn-hub .gn-hub-region h3 a {
    color: #fff;
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.15;
    text-decoration: none;
}
.gn-hub .gn-hub-region p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Occasion tiles: image, title, one line */
.gn-hub .gn-hub-occasion {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.gn-hub .gn-hub-occasion figure {
    margin: 0;
}
.gn-hub .gn-hub-occasion img {
    display: block;
    width: 100%;
}
.gn-hub .gn-hub-occasion h3 {
    margin: 14px 16px 4px;
    font-size: 17px;
    line-height: 1.25;
}
.gn-hub .gn-hub-occasion h3 a {
    color: inherit;
    text-decoration: none;
}
.gn-hub .gn-hub-occasion p {
    margin: 0 16px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #5f5f5f;
    text-wrap: pretty;
}

/*
 * Whole card clickable: the title link stretches over the card ("stretched link"), so the
 * markup stays one ordinary link the editor can change. The layer is sized by the nearest
 * positioned ancestor, so the card is positioned and nothing between it and the link may
 * be: a positioned title shrank the clickable area to the title itself. To keep the cover
 * text above its dark overlay without positioning it, image and overlay go behind the
 * text inside the card (isolation keeps the negative z-index within the card).
 */
.gn-hub .gn-hub-region,
.gn-hub .gn-hub-occasion {
    position: relative;
    isolation: isolate;
}
.gn-hub .gn-hub-region .wp-block-cover__inner-container,
.gn-hub .gn-hub-region h3,
.gn-hub .gn-hub-region h3 a,
.gn-hub .gn-hub-occasion h3,
.gn-hub .gn-hub-occasion h3 a {
    position: static;
}
.gn-hub .gn-hub-region .wp-block-cover__image-background,
.gn-hub .gn-hub-region .wp-block-cover__background {
    z-index: -1;
}
.gn-hub .gn-hub-region h3 a::after,
.gn-hub .gn-hub-occasion h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.gn-hub .gn-hub-region img {
    transition: transform .3s ease;
}
.gn-hub .gn-hub-region:hover img {
    transform: scale(1.04);
}
.gn-hub .gn-hub-occasion {
    transition: box-shadow .2s ease;
}
.gn-hub .gn-hub-occasion:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}

@media (prefers-reduced-motion: reduce) {
    .gn-hub .gn-hub-region img,
    .gn-hub .gn-hub-occasion {
        transition: none;
    }
    .gn-hub .gn-hub-region:hover img {
        transform: none;
    }
}

@media (max-width: 781px) {
    .gn-hub .gn-hub-hero {
        min-height: 360px !important;
        padding: 24px 20px;
    }
    .gn-hub .gn-hub-hero .gn-hub-lead {
        font-size: 18px;
    }
    .gn-hub .gn-hub-title {
        font-size: 19px;
        padding-left: 38px;
    }
    .gn-hub .gn-hub-title::before {
        width: 28px;
    }
    .gn-hub .gn-hub-regions {
        gap: 8px;
    }
    .gn-hub .gn-hub-region h3 {
        text-wrap: wrap;
    }
    .gn-hub .gn-hub-region {
        min-height: 150px !important;
        padding: 10px 8px;
    }
    /* Small enough that "Burgenland →" keeps its arrow on the same line at 390px */
    .gn-hub .gn-hub-region h3,
    .gn-hub .gn-hub-region h3 a {
        font-size: 14px;
    }
    .gn-hub .gn-hub-region p {
        display: none;
    }
    /* Two occasions per row, as in the mockup, instead of one */
    .gn-hub .gn-hub-occasions {
        flex-wrap: wrap !important;
        gap: 12px;
    }
    .gn-hub .gn-hub-occasions + .gn-hub-occasions {
        margin-top: 12px;
    }
    .gn-hub .gn-hub-occasion h3 {
        margin: 12px 12px 4px;
        font-size: 16px;
    }
    .gn-hub .gn-hub-occasion p {
        margin: 0 12px 12px;
    }
    .gn-hub .gn-hub-occasions > .wp-block-column {
        flex-basis: calc(50% - 6px) !important;
    }
    /* An odd last card (five brunch occasions) takes the whole row instead of standing
       alone at half width, with a flatter picture so it does not tower over the rest. */
    .gn-hub .gn-hub-occasions > .wp-block-column:last-child:nth-child(odd) {
        flex-basis: 100% !important;
    }
    .gn-hub .gn-hub-occasions > .wp-block-column:last-child:nth-child(odd) img {
        aspect-ratio: 2 / 1 !important;
    }
}