/* 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 slides (Grant, 5 Oct: smaller). The banners are uploaded at 960x338, so on wide screens
   they show at that size, centred, instead of stretching to the window (about 507px tall at
   1440px). header.js sizes the carousel to this container, so the height follows (width / 2.84).
   Phones stay full width. Cropping to a fixed height was ruled out: it cuts banner text. */
#vc-slideshow .slideshow-container,
#vc-slideshow:empty {
    max-width: 960px;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 992px) {
    #vc-slideshow { padding: 20px 24px 0; }
        #vc-slideshow .slideshow-container { border-radius: 12px; overflow: hidden; }
    /* The empty placeholder (logged-in home, slides loaded by AJAX) reserves the same height as the
       loaded hero: 960 x 338 of content plus the 20px top padding, not 338 including 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; }
}