/*
 * Live price list rendering.
 *
 * Cards rather than a table, deliberately. The catalogue carries a features map
 * per plan that states exclusions as well as inclusions, and a comparison table
 * wide enough to hold that either scrolls sideways on a phone or drops the
 * columns that matter. Cards reflow instead.
 *
 * The grid is auto-fit with a minimum track, so the column count follows the
 * available width with no media queries: one column on a phone, two or three on
 * a laptop.
 */

.hh-pricing {
    margin: 1.5rem 0;
}

.hh-pricing__group {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    color: var(--MAIN-TITLES-TEXT-color, #5e5e5e);
}

.hh-pricing__group:first-child {
    margin-top: 0;
}

.hh-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}

.hh-pricing__card {
    border: 1px solid rgba(16, 57, 93, 0.15);
    border-radius: 6px;
    padding: 1rem 1.15rem 1.15rem;
    background: #fff;
}

.hh-pricing__name {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: var(--MAIN-TITLES-TEXT-color, #5e5e5e);
}

.hh-pricing__price {
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.hh-pricing__amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--MAIN-LINK-color, #10395d);
}

.hh-pricing__unit {
    display: block;
    font-size: 0.8rem;
    color: #767676;
}

.hh-pricing__desc {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Freeform sizing guidance from the catalogue. Advisory — it gates nothing. */
.hh-pricing__hint {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-style: italic;
    color: #767676;
}

.hh-pricing__features {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(16, 57, 93, 0.1);
}

/*
 * Label left, value right, wrapping to two lines when the card is too narrow to
 * hold both. This is what keeps a twelve-row feature list readable at 320px.
 */
.hh-pricing__feature {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.15rem 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(16, 57, 93, 0.07);
}

.hh-pricing__feature:last-child {
    border-bottom: 0;
}

/*
 * Sub-heading over one job's compute — "Site Resources", "Database Resources".
 * Spans the row rather than sitting in the label column, so the figures below it
 * stay aligned with the feature rows further down the card.
 */
.hh-pricing__spec-group {
    padding: 0.6rem 0 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--MAIN-TITLES-TEXT-color, #5e5e5e);
}

.hh-pricing__spec-group:first-child {
    padding-top: 0.25rem;
}

/* Indents a figure under the heading it belongs to. */
.hh-pricing__feature--nested .hh-pricing__feature-label {
    padding-left: 0.9rem;
    font-weight: 400;
}

.hh-pricing__feature-label {
    font-weight: 600;
    color: var(--MAIN-TEXT-color, #323232);
}

.hh-pricing__feature-value {
    color: #555;
    text-align: right;
}

/* Not hidden. A reader comparing plans needs to see what a plan leaves out. */
.hh-pricing__feature--excluded .hh-pricing__feature-label,
.hh-pricing__feature--excluded .hh-pricing__feature-value {
    color: #9a9a9a;
    font-weight: 400;
}

.hh-pricing__loading {
    margin: 0;
    font-style: italic;
    color: #767676;
}