/**
 * Pricing page
 *
 * pawsies-ui.css owns the page grid, typography, grounds, buttons, tick lists,
 * the tab bar and the FAQ. This sheet defines the two shapes that exist
 * nowhere else on the site: the plan card and the comparison table.
 *
 * IT KEEPS SHRINKING, and that is the direction. The segment control was 32
 * lines here and is now .pw-tabs, the same pill the home page tour uses - it
 * had been a hand-built copy of that control down to the same literal
 * #F3EBE4. The plan feature lists were another 30 and are now .pw-points, the
 * same drawn tick as every other list on the site. Anything left in this file
 * should be here because the site has no name for it yet.
 */

.price-page .pw-hero { max-width: 50rem; }

.price-plans .pw-cc-head { margin-bottom: 1.5rem; }

.price-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}

.price-plan {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border: 1px solid var(--pw-line);
    border-radius: var(--radius-md);
    background: var(--white);
}

.price-plan[hidden] { display: none; }

.price-plan.is-popular {
    border-color: var(--coral);
    box-shadow: var(--shadow-soft);
}

.price-plan-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.price-plan-topline h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.price-popular {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: var(--coral-light);
    color: var(--coral-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
}

.price-plan-description {
    min-height: 4.7rem;
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.price-amount {
    display: flex;
    align-items: baseline;
    margin: 1.2rem 0 1.35rem;
    color: var(--text-primary);
    line-height: 1;
}

/*
 * THE NUMBER IS SET IN THE DISPLAY FACE, like every heading on the site, and
 * that one change is most of what stopped these cards reading as a pricing
 * table borrowed from somewhere else. The euro sign and the period stay in the
 * body face at body weight: they are units, not the number.
 */
.price-amount > span { align-self: flex-start; padding-top: 0.42rem; font-size: 1.2rem; }
.price-amount strong {
    font-family: 'bogart', Georgia, serif;
    font-size: clamp(2.7rem, 2rem + 1.8vw, 3.7rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.price-amount small { margin-left: 0.35rem; color: var(--text-muted); font-size: 1rem; }

/* Spanish and Catalan put the symbol after the amount, where it is read as
   part of the number and sits on the baseline with it - not raised the way a
   leading symbol is. See $euroTrails in pricing.php. */
.price-amount.is-trailing > span {
    align-self: baseline;
    padding-top: 0;
    margin-left: 0.22rem;
    font-size: 1.7rem;
}

.price-plan .pw-btn { justify-content: center; width: 100%; }

/* The rule under the button is the card's own: .pw-points brings the list and
   its tick, not the separation between the price and what it buys. */
.price-plan .pw-points {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pw-line);
}

.price-tax-note {
    max-width: 52rem;
    margin: 1.75rem auto 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
}

/*
 * THE TABLE SCROLLS SIDEWAYS AND HAS TO SAY SO. On a phone it shows the
 * feature column and about one plan of five; with nothing on screen to suggest
 * the other four exist, a reader concludes the page is broken rather than that
 * it moves.
 *
 * TWO CUES, because they say different things. The shadow down the right edge
 * of the frozen first column says "this column is pinned and the rest slides
 * under it". The fade at the right edge of the frame says "there is more that
 * way". Neither is a scrollbar, which a touch device does not show until you
 * are already scrolling and therefore already know.
 *
 * THE FADE LIVES ON A WRAPPER, not on the scroller. Anything painted on the
 * scroller itself is behind its content - and these cells are opaque, so the
 * cue would appear in stripes through the gaps and vanish under the header.
 * The wrapper does not scroll, so an overlay on it stays where it is put.
 */
.price-table-frame { position: relative; }
.price-table-frame::after {
    content: '';
    position: absolute;
    inset-block: 1px;
    right: 1px;
    width: 3.5rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: linear-gradient(to left, var(--white) 25%, rgba(255, 255, 255, 0));
    pointer-events: none;
}
/* Above this the table fits the wrap and there is nothing to scroll to, so
   the cue would be a lie. 62rem of table plus the page's own gutters. */
@media (min-width: 1300px) {
    .price-table-frame::after { content: none; }
}

.price-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--pw-line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    scrollbar-color: var(--text-muted) transparent;
    /* Momentum scrolling otherwise lands between two plans. proximity rather
       than mandatory, so a slow drag is never yanked out of the reader's
       hands.

       THE SNAP LINE IS NOT THE LEFT EDGE. The feature column is frozen over
       that edge, so a column snapping to it would land underneath the column
       naming its rows. scroll-padding moves the line to just past the frozen
       column, which is where a plan actually becomes readable. One variable
       for both, or the two drift and every swipe lands a few pixels wrong. */
    --price-label-w: 15rem;
    scroll-padding-left: var(--price-label-w);
    scroll-snap-type: x proximity;
}
.price-table-scroll:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.price-table {
    width: 100%;
    min-width: 62rem;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.price-table th,
.price-table td {
    padding: 1rem 0.9rem;
    border-bottom: 1px solid var(--pw-line);
    text-align: center;
    vertical-align: middle;
}

/*
 * THE HEADER ROW WAS NEAR-BLACK, and it was the loudest thing on the site: the
 * only surface anywhere near --text-primary is the one dark band a page gets,
 * and a table header wearing it read as a different product's table dropped
 * into this one. It is paper now, with the plan names in ink and a rule under
 * them doing the separating a fill was doing.
 *
 * Sticky needs an OPAQUE background, which is why this is a token and not
 * transparent: the rows scroll under it.
 */
.price-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cream-dark);
    border-bottom: 2px solid var(--pw-line);
    color: var(--text-primary);
    font-weight: 600;
}

.price-table thead th:first-child,
.price-table tbody tr:not(.price-table-group) > th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: var(--price-label-w);
    min-width: var(--price-label-w);
    text-align: left;
}

.price-table thead th:first-child { z-index: 3; }
.price-table thead th { scroll-snap-align: start; }
/* The label column is stuck to the left edge and is not somewhere to land. */
.price-table thead th:first-child { scroll-snap-align: none; }

.price-table tbody tr:not(.price-table-group) > th {
    background: var(--white);
    font-weight: 400;
}

/* The pinned column, given an edge. Without it the plan values slide under
   naked type and the column reads as a rendering fault. */
.price-table thead th:first-child,
.price-table tbody tr:not(.price-table-group) > th {
    box-shadow: 1px 0 0 var(--pw-line), 8px 0 9px -8px rgba(45, 37, 25, 0.22);
}

/* The group bars carry the brand tint rather than another grey. Five greys in
   one table - header, group, hairline, row label, absent glyph - is what made
   it read as a spreadsheet. */
.price-table-group th {
    padding: 0.85rem 0;
    background: var(--coral-light);
    color: var(--coral-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-align: left;
    text-transform: uppercase;
}
/* The label sticks, not the cell - see the note in pricing.php. The horizontal
   padding lives here rather than on the th for that reason: it has to travel
   with the words. */
.price-table-group th > span {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 0 1rem;
}

.price-table tbody tr:last-child > * { border-bottom: 0; }

.price-availability {
    display: inline-grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 50%;
}

.price-availability.is-included { background: var(--sage-light); color: #4F865F; }
.price-availability.is-absent { color: var(--text-muted); }
.price-table-value { font-weight: 400; white-space: nowrap; }

.price-included-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 3rem);
}

.price-included-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* The tile is .pw-feat-icon, straight off the feature menu, so these six rows
   are the same object the reader has already met in the nav and at the foot of
   every feature page. This file used to declare its own 3rem coral square,
   which was that tile with one colour and a different radius. */

.price-included-item h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.price-included-item p { margin: 0.45rem 0 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }

.price-closing p {
    max-width: 44rem;
    margin: 1rem auto 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.price-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 0.72rem is 13px: a caption on a 27-inch monitor and a squint on anything
   held in a hand. Both of these are labels somebody scans while deciding what
   to pay, which is the wrong place to be economical. */
@media (max-width: 820px) {
    .price-popular { font-size: max(0.85rem, 15px); }
    .price-table-group th > span { font-size: max(0.85rem, 15px); }
}

@media (max-width: 980px) {
    .price-plan-grid { grid-template-columns: 1fr; }
    .price-included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .price-plan-grid,
    .price-included-grid { grid-template-columns: 1fr; }
    .price-plan-description { min-height: 0; }
    .price-table { min-width: 54rem; }
    /*
     * ONE WHOLE PLAN HAS TO FIT BESIDE THE LABELS. At 11.5rem the frozen
     * column left 136px of a 160px plan column, so every column was cut
     * whatever you did, and a snap could only choose which half to hide.
     * 9.5rem leaves a full column and a sliver of the next, which is both
     * readable and its own invitation to keep going.
     *
     * On the scroller rather than the cells: the width and the scroll-padding
     * that lines a swipe up with it both read this, and they have to agree.
     */
    .price-table-scroll { --price-label-w: 9.5rem; }
    .price-table th,
    .price-table td { padding: 1rem 0.6rem; }
}