/* ── Homepage price band — public/index.php ────────────────────────────────
   Loaded only on the homepage (PublicController::index), not site-wide: it is
   the one page that needs it and style.css is already carrying every other
   homepage component.

   The band exists because the homepage named no figure anywhere on it, so every
   enquiry arrived asking what a website costs. It sits between the hero and the
   contact banner so the answer comes before the ask. */

.pricePeek {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--clr-linen, #f8fafc);
    border-bottom: 1px solid var(--clr-parchment, #e2e8f0);
}

.pricePeek__head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.pricePeek__title {
    font-family: var(--font-serif, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--clr-primary, #0d1b2a);
    margin: 0.5rem 0 0.75rem;
}

.pricePeek__lead {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.75;
    color: var(--clr-earth, #475569);
    margin: 0;
}

.pricePeek__lead strong {
    color: var(--clr-primary, #0d1b2a);
    font-weight: 800;
}

/* ── The pills ─────────────────────────────────────────────────────────────
   A row rather than cards: this band answers "roughly how much", and full
   cards here would duplicate /price-list and give a visitor a reason not to
   go there. Each pill is a link, so the whole row funnels to one place.

   Grid rather than wrapped flex: package names vary a lot in length
   ("CMS Website" vs "Restaurant Website with Booking"), and flex-basis sizes
   each pill to its own content, so a wrapped row came out ragged — different
   widths, different heights, worst on mobile where every row wraps. Grid
   tracks are all the same size regardless of what is inside them. */
.pricePeek__list {
    list-style: none;
    padding: 0;
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
    max-width: 56rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}
/* The <li> is the actual grid item — .pricePill just fills it, so both grid
   sizing (grid-column, track height) and the last-odd-item span below target
   the <li>, not the link. */
.pricePeek__list li {
    display: flex;
}

.pricePill {
    display: flex;
    flex:1 1 auto;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.85rem 1.15rem;
    background: #fff;
    border: 1px solid var(--clr-parchment, #e2e8f0);
    border-radius: 0.85rem;
    text-decoration: none;
    text-align: center;
    transition: transform var(--trans, .2s ease), box-shadow var(--trans, .2s ease),
                border-color var(--trans, .2s ease);
}
.pricePill:hover {
    transform: translateY(-3px);
    border-color: var(--clr-secondary, #5cb338);
    box-shadow: 0 10px 24px rgba(13, 27, 42, 0.08);
}

.pricePill__name {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--clr-stone, #64748b);
}

.pricePill__amount {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--clr-secondary, #5cb338);
}

.pricePill__deposit {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--clr-stone, #64748b);
}

/* ── Call to action ────────────────────────────────────────────────────── */
.pricePeek__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.pricePeek__note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--clr-stone, #64748b);
}

/* ── Price badge on a service card ─────────────────────────────────────────
   Sits under the card title, above the description, so the cost is read as
   part of what the service IS rather than as a footnote to it. Its own link,
   because someone who has just found out a package is £199 is one click from
   the page that sells it. A solid fill rather than a subtle tint: every price
   here is fixed, not a starting estimate, so it is stated plainly. */
.svcCard__price {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--clr-secondary, #5cb338), #4a9122);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(92, 179, 56, .25);
    transition: transform var(--trans, .2s ease), box-shadow var(--trans, .2s ease);
}
.svcCard__price:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(92, 179, 56, .35);
    color: #fff;
}

/* Below the width where every pill fits on one row, auto-fit divides into
   whatever column count fits (usually 3 or 4) and a 5th trailing pill is
   then alone in the last row — same half-empty-row problem the mobile fix
   below solves, so it gets the same trailing-item-spans-full-width rule. */
@media (max-width: 991px) {
    .pricePeek__list li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    /* Fixed 2-up grid rather than auto-fit: at phone width auto-fit still
       gave 2 columns most of the time but flipped to 1 for a long name,
       which is the exact unevenness this is meant to fix. */
    .pricePeek__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .pricePill {
        padding: 0.7rem 0.6rem;
    }
    .pricePill__name {
        font-size: 0.72rem;
    }
    .pricePill__amount {
        font-size: 1.15rem;
    }
}