/* Short dated answers on /trends (15 Oct 2026; SEO plan rank 4; site reskin, preview only).
   The block in includes/inc_rs_trends_answers.cfm, under the "Fueltool average today" card.
   Loaded through request.reskinCss = "county-prices,trends-answers" by price-trends.cfm, and only
   in the preview. It sits inside the page's own .pt-panel white card (price-trends.css pads the
   card's heading 28px, 18px under 768px; everything here uses the same, so it lines up with the
   cards around it). One dark green #194F35, hairline rules, no coloured edge bars, nothing under
   13px. Mobile first: the answers stack one to a row with a rule above each; from 768px two to
   a row, from 992px three (3 + 2 on a laptop). Every item grows, so a row that is short of
   answers (or a missing answer) stretches the rest instead of leaving a gap. */

/* The chart card follows straight on: the same gap the page leaves above the Brent card */
body.ft-reskin .rs-trends-answers { margin-bottom: 22px; }
@media (min-width: 768px) {
    body.ft-reskin .rs-trends-answers { margin-bottom: 28px; }
}

body.ft-reskin .rs-trends-answers .rs-eyebrow {
    margin: 0 0 8px;
}
body.ft-reskin .rs-trends-answers .pt-panel-head h2 {
    text-wrap: balance;
}
body.ft-reskin .rs-trends-answers .pt-subtitle {
    overflow-wrap: anywhere;
}

/* ---------- The answers ---------- */
body.ft-reskin .rs-trends-answers .rs-ta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    padding: 4px 18px 0;
}
body.ft-reskin .rs-trends-answers .rs-ta-item {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 18px;
    padding: 16px 0 6px;
    border-top: 1px solid #DFE6D8;
}
body.ft-reskin .rs-trends-answers .rs-ta-q {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: #183F2F;
    margin: 0 0 12px;
    text-wrap: balance;
}

/* The big number, then what it is */
body.ft-reskin .rs-trends-answers .rs-ta-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 0 0 10px;
}
body.ft-reskin .rs-trends-answers .rs-ta-figure strong {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.8px;
    color: #183F2F;
    font-variant-numeric: lining-nums tabular-nums;
}
body.ft-reskin .rs-trends-answers .rs-ta-figure > span {
    font-size: 13px;
    line-height: 1.4;
    color: #5F754F;
}
/* Two moves side by side (7 and 30 days): number over its label */
body.ft-reskin .rs-trends-answers .rs-ta-pair { gap: 8px 28px; align-items: flex-start; }
body.ft-reskin .rs-trends-answers .rs-ta-delta { display: block; }
body.ft-reskin .rs-trends-answers .rs-ta-delta strong { display: block; }
body.ft-reskin .rs-trends-answers .rs-ta-delta > span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #5F754F;
    margin-top: 4px;
}

body.ft-reskin .rs-trends-answers .rs-ta-text {
    font-size: 15px;
    line-height: 1.65;
    color: #4F5D4A;
    margin: 0 0 10px;
    max-width: 40em;
    overflow-wrap: anywhere;
}
body.ft-reskin .rs-trends-answers .rs-ta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.5;
}
body.ft-reskin .rs-trends-answers .rs-ta-text a,
body.ft-reskin .rs-trends-answers .rs-ta-links a,
body.ft-reskin .rs-trends-answers .rs-ta-note a {
    color: #194F35;
    font-weight: 600;
    text-underline-offset: 3px;
}
body.ft-reskin .rs-trends-answers .rs-ta-links a { text-decoration: none; }
body.ft-reskin .rs-trends-answers .rs-ta-links a:hover,
body.ft-reskin .rs-trends-answers .rs-ta-links a:focus-visible { text-decoration: underline; }

/* The line under the answers: what the figures are, and the way on to a real quote */
body.ft-reskin .rs-trends-answers .rs-ta-note {
    margin: 14px 18px 0;
    padding: 16px 0 20px;
    border-top: 1px solid #DFE6D8;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5F754F;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    /* Two to a row; the last one on its own row stretches to the full width */
    body.ft-reskin .rs-trends-answers .rs-ta-item { flex-basis: calc(50% - 17px); }
    body.ft-reskin .rs-trends-answers .rs-ta-grid { padding: 4px 28px 0; }
    body.ft-reskin .rs-trends-answers .rs-ta-note { margin: 14px 28px 0; padding: 18px 0 24px; }
    body.ft-reskin .rs-trends-answers .rs-ta-q { font-size: 18px; }
    body.ft-reskin .rs-trends-answers .rs-ta-figure strong { font-size: 34px; }
}
@media (min-width: 992px) {
    /* Three to a row (the three prices), the other two share the row under them */
    body.ft-reskin .rs-trends-answers .rs-ta-item { flex-basis: calc(33.333% - 22px); }
}