/* Home page sections (navigation phase 1, step 5; markup in Views/Shared/_HomeV2.cshtml).
   Live site colours: navy text, #C21E15 links, gold #E6BC75 with #032A44 for each call to action.
   Linked only from the two home views, so nothing here reaches other pages. The hero slides and
   the number of the week above keep their own styles (home-page.css and the LuckyNumber script). */

.pgh {
    --pgh-navy: #00263E;
    --pgh-blue: #C21E15;
    --pgh-gold: #E6BC75;
    --pgh-gold-ink: #032A44;
    --pgh-body: #3C3E41;
    --pgh-muted: #6E7075;
    --pgh-line: #DCDDDF;
    --pgh-soft: #F7F7F8;
    --pgh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--pgh-navy);
}

    .pgh *, .pgh *::before, .pgh *::after { box-sizing: border-box; }
    .pgh [hidden] { display: none !important; }

.pgh-mono { font-family: var(--pgh-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.pgh-fine { font-size: 13px; line-height: 1.5; color: var(--pgh-muted); }

/* Hero carousel (Grant, 26 Oct 2026): three 16:9 cards per view across the full page width on
   desktop, one card with the next peeking on phones. home-page.css styles the cards and controls
   and header.js sets the slider up. No fixed height, so banner text is only ever cut by artwork
   that is not 16:9. The container has no overflow clip because the arrows sit 20px outside it,
   inside this padding. */
#vc-slideshow .slideshow-container,
#vc-slideshow:empty {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 992px) {
    #vc-slideshow { padding: 20px 24px 0; }
    /* The placeholder's reserved shape is in home-page.css; content-box keeps the 20px top padding
       out of it. */
    #vc-slideshow:empty { box-sizing: content-box; }
}

/* Section heads */
.pgh-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pgh-h2 { margin: 0; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--pgh-navy); }

/* Buttons */
.pgh-btn {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 6px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

    .pgh-btn:focus-visible { outline: 3px solid var(--pgh-navy); outline-offset: 2px; }
.pgh-btn-gold, .pgh-btn-gold:hover { background: var(--pgh-gold); color: var(--pgh-gold-ink); }
/* Navy since the red primary (phase 1; the class name predates it): buttons that open a page rather
   than take the action (product entry points, the points card). Gold is kept for money in and the
   one action a screen exists for (Grant, 5 Oct). */
.pgh-btn-blue { background: var(--pgh-navy); color: #ffffff; }
    .pgh-btn-blue:hover, a:hover > .pgh-btn-blue { background: #0A3550; color: #ffffff; }

/* Reward points (logged in; Grant, 5 Oct): full width, bordered like the product cards. Phones stack
   the total, the progress and the button; desktop puts them in one row. */
.pgh-points { padding: 16px; border: 1px solid var(--pgh-line); border-radius: 12px; background: #ffffff; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-decoration: none; color: var(--pgh-navy); }
    .pgh-points:hover { border-color: var(--pgh-blue); color: var(--pgh-navy); }
    .pgh-points:focus-visible { outline: 3px solid var(--pgh-navy); outline-offset: 2px; }
.pgh-points-id { display: flex; align-items: center; gap: 12px; }
    .pgh-points-id > i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgba(204, 159, 83, .2); color: var(--pgh-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; }
    .pgh-points-id > span { display: flex; flex-direction: column; gap: 2px; }
.pgh-points-label { font-size: 13px; font-weight: 600; color: var(--pgh-muted); }
.pgh-points-num { font-size: 26px; line-height: 1.1; color: var(--pgh-navy); }
    .pgh-points-of { font-size: 15px; font-weight: 500; color: var(--pgh-muted); }
.pgh-points-mid, .pgh-points-progress { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pgh-bar { display: block; height: 8px; border-radius: 4px; background: #EDEEEF; overflow: hidden; }
    .pgh-bar span { display: block; height: 100%; border-radius: 4px; background: #E1251B; }
.pgh-points .pgh-mono { color: var(--pgh-navy); }
.pgh-points > .pgh-btn { width: 100%; }

/* Why Paradise Games (logged out): one bordered list, as on the board; four across on desktop. */
.pgh-why { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pgh-line); border-radius: 10px; display: grid; grid-template-columns: minmax(0, 1fr); }
    .pgh-why li { min-height: 56px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--pgh-line); }
        .pgh-why li:last-child { border-bottom: 0; }
    .pgh-why i { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgba(204, 159, 83, .2); color: var(--pgh-blue); display: flex; align-items: center; justify-content: center; font-size: 15px; }
    .pgh-why span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; color: var(--pgh-muted); }
    .pgh-why b { font-size: 15px; font-weight: 600; color: var(--pgh-navy); }
    /* The stores line links to Find a store (Grant, 5 Oct). */
    .pgh-why-link { flex-grow: 1; min-height: 40px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
        .pgh-why-link:hover b { color: var(--pgh-blue); }
        .pgh-why-link:focus-visible { outline: 3px solid var(--pgh-navy); outline-offset: 2px; border-radius: 6px; }
        .pgh-why-link em { font-style: normal; font-weight: 700; color: var(--pgh-blue); }
            .pgh-why-link em::after { content: "\f054"; margin-left: 6px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; }

/* Product cards (Grant, 5 Oct; "Home product cards" canvas, layout A): the product photo, a grid of
   equal tiles two across, one full-width call to action. Grid rows stretch the cards to one height
   and the button sits at the foot, so the three line up. The photo carries the product name. */
.pgh-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pgh-card { border: 1px solid var(--pgh-line); border-radius: 12px; overflow: hidden; background: #ffffff; display: flex; flex-direction: column; min-width: 0; }
.pgh-card-img { position: relative; height: 96px; overflow: hidden; background: #0A2A55; }
    .pgh-card-img > a:not(.pgh-draw) { display: block; height: 100%; }
    .pgh-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pgh-card-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
    .pgh-card-body > .pgh-btn { width: 100%; margin-top: auto; }

.pgh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pgh-tile {
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #F2F2F3;
    color: var(--pgh-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .pgh-tile::after { content: "\f054"; flex-shrink: 0; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--pgh-blue); }
    .pgh-tile:hover { background: #E8E8EA; color: var(--pgh-navy); }
    .pgh-tile:focus-visible { outline: 3px solid var(--pgh-gold); outline-offset: 2px; }
    /* A long name wraps to a second line inside its 44px tile rather than being cut off (narrow
       desktops around 992px and 320px phones); every tile keeps the same size.
       An odd last tile takes the whole row, centred (Winning numbers; a provider switched off). */
    .pgh-tiles > .pgh-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }

/* Next Paradise Picks draw (logged in): a badge on the Lottery photo, so the card keeps its height. */
.pgh-draw { position: absolute; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 38, 62, .88); color: #ffffff; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .pgh-draw:hover { color: #ffffff; }
    .pgh-draw .pgh-mono { color: #E6BC75; }

/* Start playing in three steps (logged out). Grant, 5 Oct: the grey panel got lost on the page, so
   it takes the "Why Paradise Games" treatment: one white bordered list with dividers (rows on phones,
   three columns on desktop), with Sign up centred below it. */
.pgh-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pgh-line); border-radius: 10px; background: #ffffff; display: grid; grid-template-columns: minmax(0, 1fr); }
    .pgh-steps li { min-height: 56px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--pgh-line); }
        .pgh-steps li:last-child { border-bottom: 0; }
    .pgh-steps span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; color: var(--pgh-muted); }
    .pgh-steps b { font-size: 15px; font-weight: 600; color: var(--pgh-navy); }
.pgh-step-num { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #E1251B; color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: var(--pgh-mono); font-weight: 700; }
.pgh-steps-wrap .pgh-btn { align-self: stretch; }

/* Find a store near you (both homes): bordered like the points card. Phones: the button full width
   with "See all stores" under it. Desktop: one row. */
.pgh-store { padding: 16px; border: 1px solid var(--pgh-line); border-radius: 12px; background: #ffffff; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; color: var(--pgh-navy); }
    .pgh-store > i { width: 44px; height: 44px; border-radius: 50%; background: rgba(204, 159, 83, .2); color: var(--pgh-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.pgh-store-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; color: var(--pgh-muted); }
    .pgh-store-text b { font-size: 16px; font-weight: 700; color: var(--pgh-navy); }
.pgh-store-actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
    .pgh-store-actions .pgh-btn { gap: 8px; }
.pgh-store-all { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--pgh-blue); text-decoration: none; }
    .pgh-store-all:hover { color: var(--pgh-navy); }

@media (min-width: 992px) {
    .pgh { padding: 20px 24px 40px; gap: 36px; }
    .pgh-h2 { font-size: 22px; }
    .pgh-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .pgh-why li { border-bottom: 0; border-right: 1px solid var(--pgh-line); padding: 14px 16px; }
        .pgh-why li:last-child { border-right: 0; }
    .pgh-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .pgh-card-img { height: 120px; }
    .pgh-card-body { padding: 16px; }
    .pgh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .pgh-steps li { border-bottom: 0; border-right: 1px solid var(--pgh-line); padding: 14px 16px; }
        .pgh-steps li:last-child { border-right: 0; }
    .pgh-steps-wrap .pgh-btn { align-self: center; min-width: 240px; }
    .pgh-points { padding: 18px 24px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; }
        .pgh-points > .pgh-btn { width: auto; min-width: 200px; }
    .pgh-store { padding: 18px 24px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
    .pgh-store-actions { grid-column: auto; flex-direction: row; align-items: center; gap: 16px; }
        .pgh-store-actions .pgh-btn { min-width: 200px; }
}