/* "What is clinical vulnerability": a guided explainer rather than a long document.
   Loaded after the cvf-site stylesheet on that page only. */

.cvf-info { --i-gap: clamp(2.75rem, 2rem + 2.5vw, 4rem); }
.cvf-info-hero { margin-bottom: 1.1rem; }

/* ---- One quiet page guide ---- */
.cvf-info-guide { margin: 0 0 var(--i-gap); }
.cvf-info-guide summary { list-style: none; display: inline-block; margin: 0 0 .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cvf-mauve-ink, #8A4690); }
.cvf-info-guide summary::-webkit-details-marker { display: none; }
.cvf-info-guide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 0; }
.cvf-info-guide li { margin: 0; }
.cvf-info-guide li + li::before { content: "\00B7"; margin: 0 .7rem; color: var(--cvf-mauve, #E0B9E3); font-weight: 800; }
.cvf-info-guide a { color: var(--cvf-navy, #17304A); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.cvf-info-guide a:hover, .cvf-info-guide a:focus-visible { color: var(--cvf-mauve-ink, #8A4690); border-bottom-color: var(--cvf-mauve, #E0B9E3); }
@media (min-width: 761px) { .cvf-info-guide summary { pointer-events: none; } }
@media (max-width: 760px) {
  .cvf-info-guide__d { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--cvf-radius, 12px); padding: .7rem 1rem; }
  .cvf-info-guide summary { display: flex; justify-content: space-between; margin: 0; cursor: pointer; font-size: .85rem; }
  .cvf-info-guide summary::after { content: "Jump to a section \2193"; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--cvf-navy, #17304A); }
  .cvf-info-guide__d[open] summary::after { content: "Close \2191"; }
  .cvf-info-guide ul { display: grid; gap: .5rem; margin-top: .7rem; }
  .cvf-info-guide li + li::before { content: none; }
}

/* ---- Cards: heights follow their content; evidence opens on request ---- */
.cvf-info .cvf-info-cards { align-items: start; margin-top: 1.5rem; }
.cvf-info-card > p:first-of-type { font-size: 1rem; line-height: 1.55; }
.cvf-info-more { margin: .7rem 0 0; }
.cvf-info-more summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .92rem; font-weight: 700; color: var(--cvf-mauve-ink, #8A4690); text-decoration: underline; text-decoration-color: var(--cvf-mauve, #E0B9E3); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cvf-info-more summary::-webkit-details-marker { display: none; }
.cvf-info-more summary::after { content: "\2192"; display: inline-block; transition: transform var(--cvf-dur, 320ms) var(--cvf-ease, ease); }
.cvf-info-more[open] summary::after { transform: rotate(90deg); }
.cvf-info-more summary:hover { color: var(--cvf-plum, #4A254A); text-decoration-color: currentColor; }
.cvf-info-more summary:focus-visible { outline: 3px solid var(--cvf-mauve-ink, #8A4690); outline-offset: 3px; border-radius: 4px; }
.cvf-info-more > p { margin: .6rem 0 0 !important; font-size: .95rem !important; line-height: 1.6; color: var(--cvf-ink-2, #3b4a5c); }
.cvf-info-more--intro { margin: -.25rem 0 1.25rem; max-width: 46rem; }

/* ---- Two kinds of risk: the formula is the centrepiece ---- */
.cvf-info .cvf-info-eq { margin: 1.75rem 0 1.5rem; gap: .75rem; }
.cvf-info .cvf-eq-part { padding: 1.25rem 1.3rem; border-width: 2px; border-color: var(--cvf-mauve, #E0B9E3); }
.cvf-info .cvf-eq-part h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.cvf-info .cvf-eq-part--result { background: var(--cvf-plum, #4A254A); border-color: var(--cvf-plum, #4A254A); }
.cvf-info .cvf-eq-op { font-size: 2.2rem; }
.cvf-info-quote { margin-bottom: 0; }

/* ---- Hierarchy of controls: one vertical journey ---- */
.cvf-info .cvf-info-layers { gap: 1rem; }
.cvf-info .cvf-info-layers::before { content: ""; position: absolute; left: 1.05rem; top: 1.2rem; bottom: 1.2rem; width: 3px; border-radius: 2px; background: linear-gradient(var(--cvf-plum, #4A254A), var(--cvf-mauve, #E0B9E3)); }
.cvf-info .cvf-info-layers { position: relative; }
.cvf-layer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.cvf-layer-pair > div { background: var(--cvf-mauve-soft, #F3E6F4); border-radius: var(--cvf-radius, 12px); padding: 1rem 1.15rem; }
.cvf-layer-pair h4 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--cvf-navy, #17304A); }
.cvf-layer-pair p { font-size: .95rem; line-height: 1.55; }
@media (max-width: 760px) { .cvf-layer-pair { grid-template-columns: 1fr; } }

/* ---- The UK terms: quieter ---- */
#uk-terms h2 { font-size: var(--cvf-text-h3, 1.6rem); }
#uk-terms .cvf-info-reports { margin-top: 1rem; }
#uk-terms .cvf-info-reports a { padding: 1rem 1.2rem; }
#uk-terms .cvf-info-reports strong { font-size: 1.08rem; }

/* ---- Why labels are blunt: a little more presence ---- */
.cvf-info-blunt { padding: clamp(1.75rem, 4vw, 3.25rem); }
.cvf-info-pull { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.35; }

/* ---- Who is at greater risk: compact two-column accordions, table last ---- */
.cvf-groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: start; }
.cvf-groups-grid .cvf-group { margin: 0; }
.cvf-groups-grid .cvf-group[open] { grid-column: 1 / -1; }
.cvf-groups-grid .cvf-group--table { grid-column: 1 / -1; background: var(--cvf-mauve-soft, #F3E6F4); border-color: transparent; }
.cvf-groups-grid summary h3 { font-size: 1.02rem; }
.cvf-groups-grid .cvf-group__body { max-width: 52rem; }
@media (max-width: 760px) { .cvf-groups-grid { grid-template-columns: 1fr; } }
.cvf-info-sec > .cvf-info-h3 { margin-top: 1.5rem; }

/* ---- Threat cards with a photograph behind: the text sits on a navy wash at the foot of the card ---- */
.cvf-info-card--photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding-top: 6rem !important; background-color: var(--cvf-navy, #17304A) !important; background-size: cover; background-repeat: no-repeat; border: 0 !important; border-top: 4px solid var(--cvf-mauve, #E0B9E3) !important; color: #fff; }
.cvf-info-card--photo.cvf-info-card--lead { min-height: 320px; border-top-color: var(--cvf-pink, #B957B8) !important; }
.cvf-info-card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 48, 74, .05) 0%, rgba(23, 48, 74, .55) 32%, rgba(23, 48, 74, .88) 60%, rgba(23, 48, 74, .94) 100%); }
.cvf-info-card--photo h3 { color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cvf-info-card--photo p, .cvf-info-card--photo .cvf-info-more > p { color: rgba(255, 255, 255, .93) !important; }
.cvf-info-card--photo a { color: var(--cvf-mauve, #E0B9E3) !important; text-decoration-color: rgba(224, 185, 227, .6); }
.cvf-info-card--photo a:hover { color: #fff !important; }
.cvf-info-card--photo .cvf-info-more summary { color: var(--cvf-mauve, #E0B9E3); text-decoration-color: rgba(224, 185, 227, .55); }
.cvf-info-card--photo .cvf-info-more summary:hover { color: #fff; }
.cvf-info-card--photo .cvf-info-more summary:focus-visible { outline-color: var(--cvf-mauve, #E0B9E3); }
/* Opened evidence: the whole card darkens so long text stays readable over any photo */
.cvf-info-card--photo:has(.cvf-info-more[open])::before { background: linear-gradient(180deg, rgba(23, 48, 74, .35) 0%, rgba(23, 48, 74, .9) 22%, rgba(23, 48, 74, .95) 100%); }
@media (max-width: 760px) {
  .cvf-info-card--photo, .cvf-info-card--photo.cvf-info-card--lead { min-height: 240px; padding-top: 5rem !important; }
}

/* Readability: the wash is fixed to where the text starts (not to the card's height), so it holds at every width */
.cvf-info-card--photo::before { background: linear-gradient(180deg, rgba(23, 48, 74, .08) 0, rgba(23, 48, 74, .5) 3rem, rgba(23, 48, 74, .9) 5.25rem, rgba(23, 48, 74, .93) 100%); }
.cvf-info-card--photo { padding-top: 6rem !important; }
.cvf-info-card--photo:has(.cvf-info-more[open])::before { background: linear-gradient(180deg, rgba(23, 48, 74, .2) 0, rgba(23, 48, 74, .9) 5.25rem, rgba(23, 48, 74, .95) 100%); }
@media (max-width: 760px) {
  .cvf-info-card--photo, .cvf-info-card--photo.cvf-info-card--lead { min-height: 0; padding-top: 6rem !important; }
}

/* Wide screens: the guide links always show, whatever state the menu was left in */
@media (min-width: 761px) { .cvf-info-guide__d::details-content { content-visibility: visible; } }

/* Opened evidence: the whole photograph shows across the top of the card, fading into navy, with the text below */
.cvf-info-card--photo { transition: padding-top 380ms cubic-bezier(.2, .7, .2, 1); }
.cvf-info-card--photo:has(.cvf-info-more[open]) { padding-top: calc(66.6% - 2.75rem) !important; background-size: 100% auto; background-position: 50% 0 !important; }
.cvf-info-card--photo:has(.cvf-info-more[open])::before { inset: 0 0 auto 0; aspect-ratio: 3 / 2; height: auto; background: linear-gradient(180deg, rgba(23, 48, 74, 0) 0%, rgba(23, 48, 74, 0) 55%, rgba(23, 48, 74, .75) 82%, rgba(23, 48, 74, 1) 100%); }
@media (prefers-reduced-motion: reduce) { .cvf-info-card--photo { transition: none; } }

/* Opened: the photo becomes its own 3:2 layer at the top, so the text area below is always solid navy */
.cvf-info-card--photo:has(.cvf-info-more[open]) { background-size: 0 0 !important; }
.cvf-info-card--photo:has(.cvf-info-more[open])::after { content: ""; position: absolute; z-index: -2; top: 0; left: 0; right: 0; aspect-ratio: 3 / 2; background-image: inherit; background-size: cover; background-position: 50% 40%; background-repeat: no-repeat; }

/* Opened: heading starts in the last, darkest part of the fade */
.cvf-info-card--photo:has(.cvf-info-more[open]) { padding-top: calc(66.6% - 1.5rem) !important; }
.cvf-info-card--photo:has(.cvf-info-more[open])::before { background: linear-gradient(180deg, rgba(23, 48, 74, 0) 0%, rgba(23, 48, 74, 0) 50%, rgba(23, 48, 74, .6) 75%, rgba(23, 48, 74, .92) 88%, rgba(23, 48, 74, 1) 100%); }

/* Wildfire smoke fills the height of its row beside Air pollution */
.cvf-info-cards > .cvf-info-card--lead + .cvf-info-card--photo { align-self: stretch; }

/* "The person's health": a desaturated photograph under a navy wash */
.cvf-info .cvf-eq-part--photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 9.5rem; background-color: var(--cvf-navy, #17304A); background-size: cover; background-repeat: no-repeat; border-color: var(--cvf-navy, #17304A); }
.cvf-info .cvf-eq-part--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 48, 74, .55) 0%, rgba(23, 48, 74, .82) 45%, rgba(23, 48, 74, .9) 100%); }
.cvf-info .cvf-eq-part--photo h3 { color: #fff; }
.cvf-info .cvf-eq-part--photo p { color: rgba(255, 255, 255, .92); }

/* "From the person's own health": the desaturated dialysis photo behind the card, text on a navy wash */
.cvf-info-duo > .cvf-duo--photo { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 7rem; background-color: var(--cvf-navy, #17304A); background-size: cover; background-repeat: no-repeat; border-color: var(--cvf-navy, #17304A); }
.cvf-info-duo > .cvf-duo--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 48, 74, .1) 0, rgba(23, 48, 74, .55) 3.5rem, rgba(23, 48, 74, .9) 6.25rem, rgba(23, 48, 74, .93) 100%); }
.cvf-info-duo > .cvf-duo--photo h3 { color: #fff; }
.cvf-info-duo > .cvf-duo--photo p { color: rgba(255, 255, 255, .93); }

/* Her face sits in a clear band at the top: no blue wash over her, the text still on solid navy below */
.cvf-info-duo > .cvf-duo--photo { padding-top: 10rem; background-position: 80% 92% !important; }
.cvf-info-duo > .cvf-duo--photo::before { background: linear-gradient(180deg, rgba(23, 48, 74, 0) 0, rgba(23, 48, 74, 0) 5.5rem, rgba(23, 48, 74, .6) 7.5rem, rgba(23, 48, 74, .92) 9.25rem, rgba(23, 48, 74, .94) 100%); }

/* Keep her face in the clear band at every width */
.cvf-info-duo > .cvf-duo--photo { background-position: 100% 50% !important; }
@media (max-width: 760px) {
  .cvf-info-duo > .cvf-duo--photo { padding-top: 11.5rem; }
  .cvf-info-duo > .cvf-duo--photo::before { background: linear-gradient(180deg, rgba(23, 48, 74, 0) 0, rgba(23, 48, 74, 0) 7.25rem, rgba(23, 48, 74, .6) 9rem, rgba(23, 48, 74, .92) 10.75rem, rgba(23, 48, 74, .94) 100%); }
}

/* "From what is around them": the room, centred */
.cvf-info-duo > .cvf-duo--env { background-position: 45% 40% !important; }

/* "From what is around them": the whole photo across the top (so the objects in the room show), text below on navy */
.cvf-info-duo > .cvf-duo--env { background-size: 0 0 !important; padding-top: calc(43.9% - 1.5rem) !important; justify-content: flex-start; }
.cvf-info-duo > .cvf-duo--env::after { content: ""; position: absolute; z-index: -2; top: 0; left: 0; right: 0; aspect-ratio: 1024 / 450; background-image: inherit; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.cvf-info-duo > .cvf-duo--env::before { inset: 0 0 auto 0; aspect-ratio: 1024 / 450; height: auto; background: linear-gradient(180deg, rgba(23, 48, 74, 0) 0%, rgba(23, 48, 74, 0) 74%, rgba(23, 48, 74, .7) 88%, rgba(23, 48, 74, 1) 100%) !important; }

.cvf-info-duo + p { margin-top: 1.25rem; }

/* Boxes run the full width of the content, so their right edges line up with the cards above */
.cvf-info .cvf-info-inset, .cvf-info .cvf-info-warn { max-width: none; }
.cvf-info .cvf-info-inset > p, .cvf-info .cvf-info-inset > details { max-width: 50rem; }

/* The two "kinds of risk" cards: identical structure, the photo in the same-sized band at the top,
   the fade and the heading starting at exactly the same point, on dark plum */
.cvf-info-duo > .cvf-duo--photo { --duo-photo: 50% 50%; background-size: 0 0 !important; background-color: var(--cvf-plum, #4A254A) !important; border-color: var(--cvf-plum, #4A254A) !important; padding-top: calc(43.9% - 1.5rem) !important; justify-content: flex-start; }
.cvf-info-duo > .cvf-duo--photo:not(.cvf-duo--env) { --duo-photo: 100% 30%; }
.cvf-info-duo > .cvf-duo--photo::after { content: ""; position: absolute; z-index: -2; top: 0; left: 0; right: 0; aspect-ratio: 1024 / 450; background-image: inherit; background-size: cover; background-position: var(--duo-photo); background-repeat: no-repeat; }
.cvf-info-duo > .cvf-duo--photo::before { inset: 0 0 auto 0 !important; aspect-ratio: 1024 / 450; height: auto; background: linear-gradient(180deg, rgba(74, 37, 74, 0) 0%, rgba(74, 37, 74, 0) 74%, rgba(74, 37, 74, .7) 88%, rgba(74, 37, 74, 1) 100%) !important; }
@media (max-width: 760px) {
  .cvf-info-duo > .cvf-duo--photo { padding-top: calc(43.9% - 1.5rem) !important; }
  .cvf-info-duo > .cvf-duo--photo::before { background: linear-gradient(180deg, rgba(74, 37, 74, 0) 0%, rgba(74, 37, 74, 0) 74%, rgba(74, 37, 74, .7) 88%, rgba(74, 37, 74, 1) 100%) !important; }
}

/* ---- One right edge on this page: no inner text caps; text fills its box or column ---- */
.cvf-info :is(.cvf-info-def, .cvf-info-explains, .cvf-info-intro, .cvf-info-warn, .cvf-info-blunt__rest, .cvf-info-blunt__foot, .cvf-info-more--intro, .cvf-info-quote p, .cvf-group__body, .cvf-info-callout > div),
.cvf-info .cvf-info-inset > p, .cvf-info .cvf-info-inset > details,
.cvf-info :is(ol, ul).cvf-info-layers, .cvf-groups-grid .cvf-group__body { max-width: none !important; }

/* "Who is at greater risk": the table is the section; seven columns fit on desktop, and it stacks into cards on phones */
.cvf-info .cvf-info-tablenote { margin: 0 0 1.25rem; font-size: .95rem; }
@media (min-width: 761px) {
  .cvf-info-tablewrap .cvf-info-table { font-size: .9rem; }
  .cvf-info-tablewrap .cvf-info-table th, .cvf-info-tablewrap .cvf-info-table td { padding: .8rem .75rem; }
  .cvf-info-tablewrap .cvf-info-table tbody th { width: 16%; }
  .cvf-info-tablewrap .cvf-info-table sup a { white-space: nowrap; }
}

/* Table cells: a big plum tick (or dash) at the top, any note under it, the references at the foot of the cell */
.cvf-info-table td.cvf-cell { text-align: center; }
.cvf-info-table td.cvf-cell > span[aria-hidden="true"] { display: block; font-size: 1.75rem; line-height: 1; font-weight: 800; color: var(--cvf-plum, #4A254A); }
.cvf-info-table td.cvf-cell .cvf-cell-note { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.35; color: var(--cvf-ink-2, #4B5563); }
.cvf-info-table td.cvf-cell .cvf-cell-refs { display: block; margin-top: .4rem; font-size: .78rem; line-height: 1.3; }
.cvf-info-table td.cvf-cell .cvf-cell-refs sup { font-size: 1em; vertical-align: baseline; }
@media (min-width: 761px) {
  .cvf-info-tablewrap .cvf-info-table td.cvf-cell { position: relative; padding-bottom: 2.4rem; }
  .cvf-info-tablewrap .cvf-info-table td.cvf-cell .cvf-cell-refs { position: absolute; left: .4rem; right: .4rem; bottom: .7rem; margin: 0; }
}
@media (max-width: 760px) {
  .cvf-info-table td.cvf-cell { text-align: left; }
  .cvf-info-table td.cvf-cell > span[aria-hidden="true"] { display: inline-block; font-size: 1.5rem; margin-right: .35rem; }
  .cvf-info-table td.cvf-cell .cvf-cell-note { display: inline; }
}

/* The formula: an illustration behind the top of each box, the words beneath it */
.cvf-info .cvf-info-eq > .cvf-eq-part { padding-top: 6.25rem; background-repeat: no-repeat; background-position: center 1rem; background-size: auto 4.5rem; text-align: center; }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(1) { background-image: url(eq-health.png); }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(2) { background-image: url(eq-threat.png); }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(3) { background-image: url(eq-around.svg); }
.cvf-info .cvf-info-eq > .cvf-eq-part--result { background-image: url(eq-risk.png); }

/* Formula icons in the same style as the flowers on the national team cards: a large, faded illustration
   tucked into the bottom-right corner, partly off the edge, behind the words */
.cvf-info .cvf-info-eq > .cvf-eq-part { position: relative; isolation: isolate; overflow: hidden; padding-top: 1.25rem; padding-bottom: 1.5rem; padding-right: 3.5rem; text-align: left; background-image: none !important; }
.cvf-info .cvf-info-eq > .cvf-eq-part::after { content: ""; position: absolute; z-index: -1; right: -14px; bottom: -16px; width: 104px; height: 104px; background: no-repeat center / contain; opacity: .45; pointer-events: none; }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(1)::after { background-image: url(eq-health.png?v=3); }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(2)::after { background-image: url(eq-threat.png?v=3); }
.cvf-info .cvf-info-eq > .cvf-eq-part:nth-of-type(3)::after { background-image: url(eq-around.svg?v=2); }
.cvf-info .cvf-info-eq > .cvf-eq-part--result::after { background-image: url(eq-risk.png?v=3); opacity: .55; }

/* Hierarchy of controls diagram, and the standard term on each step */
.cvf-hoc { margin: 1.5rem 0 1.75rem; }
.cvf-hoc-svg { display: block; width: 100%; max-width: 860px; height: auto; }
.cvf-hoc-svg text { font-family: inherit; }
.cvf-hoc-svg .hoc-axis { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--cvf-mauve-ink, #8A4690); }
.cvf-layer-term { margin: 0 0 .2rem !important; font-size: .72rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cvf-mauve-ink, #8A4690); }

@media (max-width: 640px) { .cvf-hoc { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cvf-hoc-svg { min-width: 600px; } }

/* Steps match the pyramid: no stagger, each step takes its layer's colour. */
.cvf-info .cvf-info-layers li:nth-child(n){margin-left:0}
.cvf-info .cvf-info-layers li{--layer:#4A254A;--layer-ink:#FFFFFF}
.cvf-info .cvf-info-layers li:nth-child(2){--layer:#8A4690}
.cvf-info .cvf-info-layers li:nth-child(3){--layer:#B67CBB;--layer-ink:#4A254A}
.cvf-info .cvf-info-layers li:nth-child(4){--layer:#E0B9E3;--layer-ink:#4A254A}
.cvf-info .cvf-info-layers li .cvf-layer-dot{background:var(--layer);color:var(--layer-ink)}
.cvf-info .cvf-info-layers li > div{border-left:6px solid var(--layer)}
.cvf-info .cvf-info-layers li:nth-child(3){--layer-ink:#FFFFFF}

/* Protect the person themselves: icons behind the two boxes, as on the formula boxes */
.cvf-info .cvf-layer-pair > div { position: relative; isolation: isolate; overflow: hidden; padding-right: 3.5rem; }
.cvf-info .cvf-layer-pair > div::after { content: ""; position: absolute; z-index: -1; right: -14px; bottom: -16px; width: 104px; height: 104px; background: no-repeat center / contain; opacity: .45; pointer-events: none; }
.cvf-info .cvf-layer-pair > div:nth-child(1)::after { background-image: url(ppe-vaccine.svg?v=1); }
.cvf-info .cvf-layer-pair > div:nth-child(2)::after { background-image: url(ppe-respirator.svg?v=4); }

/* Banner photo at the top of the page */
.cvf-info .cvf-info-heroimg { margin: 0 0 1.5rem; }
.cvf-info .cvf-info-heroimg img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 85%; border-radius: var(--cvf-radius-lg, 20px); }
@media (max-width: 640px) { .cvf-info .cvf-info-heroimg img { aspect-ratio: 16 / 10; object-position: 45% 70%; } }

/* Top of the page: photo fading in from the right with the definition over it, as on the front page */
.cvf-info .cvf-info-heroimg { display: none; }
.cvf-info .cvf-info-cover { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 40vw, 480px); display: flex; align-items: center; margin: 0 0 1.5rem; border-radius: var(--cvf-radius-lg, 20px); background: var(--cvf-warm-white, #FAF9F6); }
.cvf-info .cvf-info-cover__img { position: absolute; z-index: -1; top: 0; right: 0; width: 64%; height: 100%; max-width: none; object-fit: cover; object-position: 75% 70%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.5) 22%, rgba(0,0,0,.85) 36%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.5) 22%, rgba(0,0,0,.85) 36%, #000 50%); }
.cvf-info .cvf-info-cover::before { content: ""; position: absolute; z-index: 0; left: -6%; bottom: -16%; width: 58%; height: 30%; background: var(--cvf-mauve, #E0B9E3); clip-path: polygon(0 55%, 22% 22%, 100% 0, 92% 70%, 60% 100%, 0 100%); opacity: .95; pointer-events: none; }
.cvf-info .cvf-info-cover__text { position: relative; z-index: 1; width: min(47%, 540px); padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.5rem); }
.cvf-info .cvf-info-cover .cvf-info-def { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.25; font-weight: 600; color: var(--cvf-navy, #17304A); margin: 0; text-shadow: 0 0 18px rgba(250,249,246,.9); }
.cvf-info .cvf-info-hero > .cvf-info-explains:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 760px) {
	.cvf-info .cvf-info-cover { display: block; min-height: 0; border-radius: 0; background: none; }
	.cvf-info .cvf-info-cover__img { position: relative; z-index: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: 60% 70%; border-radius: var(--cvf-radius-lg, 20px); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
	.cvf-info .cvf-info-cover::before { display: none; }
	.cvf-info .cvf-info-cover__text { width: auto; margin-top: -1.75rem; padding: 0 0 .5rem; }
	.cvf-info .cvf-info-cover .cvf-info-def { font-size: 1.4rem; }
}

/* ---- Sections 04 to 07: more variety ---- */
/* Icons in a round lilac badge at the top of each card */
#emergency .cvf-info-card::before, #infections .cvf-info-card::before { content: ""; display: block; width: 2.75rem; height: 2.75rem; margin: 0 0 .8rem; border-radius: 50%; background: var(--cvf-mauve-soft, #F4E6F5) no-repeat center / 1.5rem; }
#emergency .cvf-info-card--lead::before, #infections .cvf-info-card--lead::before { background-color: #fff; }
#emergency .cvf-info-card:nth-child(1)::before { background-image: url(info-bolt.svg); }
#emergency .cvf-info-card:nth-child(2)::before { background-image: url(info-drop.svg); }
#emergency .cvf-info-card:nth-child(3)::before { background-image: url(info-plan.svg); }
#infections .cvf-info-card:nth-child(1)::before { background-image: url(info-hospital.svg); }
#infections .cvf-info-card:nth-child(2)::before { background-image: url(info-lungs.svg); }
#infections .cvf-info-card:nth-child(3)::before { background-image: url(info-germ.svg); }
#infections .cvf-info-card:nth-child(4)::before { background-image: url(info-thermo.svg); }

/* 04: a dark band, like the front page, with three equal cards */
.cvf-info .cvf-info-sec#emergency { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) !important; border-radius: var(--cvf-radius-lg, 20px); background: linear-gradient(135deg, var(--cvf-navy, #17304A) 0%, #2E2A55 58%, var(--cvf-plum, #4A254A) 100%); color: #EEF0F6; }
.cvf-info .cvf-info-sec#emergency::after { content: ""; position: absolute; z-index: -1; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 185, 227, .28), rgba(224, 185, 227, 0) 70%); pointer-events: none; }
#emergency > .cvf-eyebrow { color: var(--cvf-mauve, #E0B9E3) !important; }
#emergency > h2, #emergency > h2 * { color: #fff !important; }
#emergency > .cvf-info-intro { color: #E6E8F0; }
#emergency > .cvf-info-more > summary { color: var(--cvf-mauve, #E0B9E3); }
#emergency > .cvf-info-more > p, #emergency > .cvf-info-more > *:not(summary) { color: #E6E8F0; }
#emergency > .cvf-info-more a { color: var(--cvf-mauve, #E0B9E3); }
#emergency .cvf-info-card, #emergency .cvf-info-card--lead, #emergency .cvf-info-card:nth-child(n+3) { grid-column: span 2; border: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
#emergency .cvf-info-cards { align-items: stretch; }
#emergency > .cvf-info-note { background: rgba(255, 255, 255, .08); border-color: var(--cvf-mauve, #E0B9E3); color: #EEF0F6; }

/* 05: an even two-by-two grid, and the key line on a lilac panel with the front page's wind drawing */
#infections .cvf-info-card, #infections .cvf-info-card--lead, #infections .cvf-info-card:nth-child(n+3) { grid-column: span 3; }
#infections .cvf-info-cards { align-items: stretch; }
#infections .cvf-info-quote { position: relative; isolation: isolate; overflow: hidden; margin: 2rem 0 1rem; padding: 1.6rem clamp(1.25rem, 14vw, 11rem) 1.6rem 1.6rem; border-left-width: 6px; border-radius: 0 var(--cvf-radius-lg, 20px) var(--cvf-radius-lg, 20px) 0; background: var(--cvf-mauve-soft, #F4E6F5); }
#infections .cvf-info-quote::after { content: ""; position: absolute; z-index: -1; right: -2%; bottom: -12%; width: 38%; height: 120%; background: url(/wp-content/themes/cvf-editorial/assets/icons/icon-wind.png) no-repeat right bottom / contain; opacity: .22; pointer-events: none; }

/* 06: a white panel, with the front page's faint drawings on the two link cards */
.cvf-info .cvf-info-sec#uk-terms { padding: clamp(1.5rem, 3vw, 2.25rem) !important; background: #fff; border: 1px solid #E8E6EB; border-radius: var(--cvf-radius-lg, 20px); }
#uk-terms .cvf-info-reports a { position: relative; isolation: isolate; overflow: hidden; background: var(--cvf-mauve-soft, #F4E6F5); border-color: transparent; min-height: 7.5rem; }
#uk-terms .cvf-info-reports a::after { content: ""; position: absolute; z-index: -1; inset: 0; background: no-repeat right -2% bottom -18% / 34% auto; opacity: .16; pointer-events: none; }
#uk-terms .cvf-info-reports li:nth-child(1) a::after { background-image: url(/wp-content/themes/cvf-editorial/assets/icons/icon-checklist.png); }
#uk-terms .cvf-info-reports li:nth-child(2) a::after { background-image: url(/wp-content/themes/cvf-editorial/assets/icons/icon-shield.png); }

/* 07: the rings motif in the corner of the lilac panel */
.cvf-info .cvf-info-blunt { position: relative; isolation: isolate; overflow: hidden; }
.cvf-info .cvf-info-blunt::before { content: ""; position: absolute; z-index: -1; right: -140px; top: -140px; width: 460px; height: 460px; background: url(/wp-content/themes/cvf-editorial/assets/icons/rings-motif.png) no-repeat center / contain; opacity: .35; pointer-events: none; }

@media (max-width: 860px) {
	#emergency .cvf-info-card, #emergency .cvf-info-card--lead, #emergency .cvf-info-card:nth-child(n+3), #infections .cvf-info-card, #infections .cvf-info-card--lead, #infections .cvf-info-card:nth-child(n+3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
	.cvf-info .cvf-info-sec#emergency, .cvf-info .cvf-info-sec#uk-terms { padding: 1.1rem 1.1rem .6rem !important; margin-bottom: 1rem !important; }
	#emergency .cvf-acc-chev { background-color: rgba(255, 255, 255, .9); }
	#emergency > .cvf-eyebrow:has(+ h2.cvf-acc-h) { border-top: 0 !important; padding-top: 0 !important; }
	#infections .cvf-info-quote { padding-right: 1.25rem; }
	#infections .cvf-info-quote::after { width: 60%; opacity: .14; }
}

#emergency .cvf-info-card { color: var(--cvf-navy, #17304A); }
#emergency .cvf-info-card p, #emergency .cvf-info-card .cvf-info-more > *:not(summary) { color: var(--cvf-ink-2, #3B4A5C) !important; }
#emergency .cvf-info-card a { color: var(--cvf-mauve-ink, #8A4690); }

.cvf-info .cvf-info-blunt::before { opacity: .14; width: 420px; height: 420px; right: -150px; top: -150px; }

@media (max-width: 760px) {
	.entry-content #emergency h2.cvf-acc-h .cvf-acc-chev, .entry-content #emergency h2.cvf-acc-h:has(.cvf-acc-btn[aria-expanded="true"]) .cvf-acc-chev { background: var(--cvf-mauve, #E0B9E3) !important; box-shadow: none; }
	.entry-content #emergency h2.cvf-acc-h .cvf-acc-chev::before { border-color: var(--cvf-plum, #4A254A) !important; }
	.cvf-info .cvf-info-sec#emergency { margin-top: .75rem !important; }
	#emergency h2.cvf-acc-h { border-top: 0 !important; }
}

@media (max-width: 760px) { .entry-content #uk-terms > .cvf-eyebrow { border-top: 0 !important; padding-top: 0 !important; } .entry-content #uk-terms h2.cvf-acc-h { border-top: 0 !important; } }

/* ---- Round 2: infections, terms, vaccines and the labels section ---- */
/* The key line on infections: the pale blue of the clean-air icon, with the wind drawing in white */
#infections .cvf-info-quote { background: #E6F0FB; border-left-color: #7DB3EC; }
#infections .cvf-info-quote::after { background: #fff; -webkit-mask: url(/wp-content/themes/cvf-editorial/assets/icons/icon-wind.png) no-repeat right bottom / contain; mask: url(/wp-content/themes/cvf-editorial/assets/icons/icon-wind.png) no-repeat right bottom / contain; opacity: .95; }
#infections .cvf-info-quote p { color: var(--cvf-navy, #17304A); }

/* The UK terms: the shield for clinical vulnerability, the rings for the Inquiry */
#uk-terms .cvf-info-reports li:nth-child(1) a::after { background-image: url(/wp-content/themes/cvf-editorial/assets/icons/icon-shield.png); background-size: 26% auto; background-position: right 4% bottom -14%; }
#uk-terms .cvf-info-reports li:nth-child(2) a::after { background-image: url(/wp-content/themes/cvf-editorial/assets/icons/rings-motif.png); background-size: 44% auto; background-position: right -10% bottom -60%; opacity: .2; }

/* Who is offered vaccines and treatments: a grid of cards that open into labelled panels */
.cvf-vac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; margin: 1.25rem 0 .5rem; }
.cvf-vac-grid .cvf-vac { margin: 0; border-color: #E8E6EB; transition: box-shadow .25s, border-color .25s; }
.cvf-vac-grid .cvf-vac:hover { border-color: var(--cvf-mauve, #E0B9E3); }
.cvf-vac-grid .cvf-vac[open] { grid-column: 1 / -1; background: var(--cvf-warm-white, #FAF9F6); }
.cvf-vac > summary { display: grid; grid-template-columns: 2.75rem 1fr auto; grid-template-areas: "icon title plus" "icon tags plus"; column-gap: .9rem; row-gap: .15rem; align-items: center; padding: 1rem 1.2rem; }
.cvf-vac > summary::before { content: ""; grid-area: icon; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--cvf-mauve-soft, #F4E6F5) no-repeat center / 1.5rem; }
.cvf-vac > summary h3 { grid-area: title; font-size: 1.15rem; }
.cvf-vac > summary::after { grid-area: plus; }
.cvf-vac__tags { grid-area: tags; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--cvf-mauve-ink, #8A4690); }
#vac-covid > summary::before { background-image: url(info-germ.svg); }
#vac-flu > summary::before { background-image: url(info-thermo.svg); }
#vac-rsv > summary::before { background-image: url(info-baby.svg); }
#vac-pneumo > summary::before { background-image: url(info-lungs.svg); }
#vac-measles > summary::before { background-image: url(info-spots.svg); }
.cvf-info .cvf-vac__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; max-width: none; padding: .25rem 1.2rem 1.3rem; }
.cvf-vt { background: #fff; border: 1px solid #E8E6EB; border-radius: var(--cvf-radius, 12px); padding: 1rem 1.1rem 1.05rem; }
.cvf-vt__label { display: flex; align-items: center; gap: .55rem; margin: 0 0 .65rem !important; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cvf-plum, #4A254A); }
.cvf-vt__label strong { font-weight: inherit; }
.cvf-vt__label::before { content: ""; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--cvf-mauve-soft, #F4E6F5) no-repeat center / 1.1rem; }
.cvf-vt--vaccine .cvf-vt__label::before { background-image: url(info-syringe.svg); }
.cvf-vt--treatment .cvf-vt__label::before { background-image: url(info-pill.svg); }
.cvf-vt--risk .cvf-vt__label::before { background-image: url(info-alert.svg); }
.cvf-vt--risk { background: var(--cvf-mauve-soft, #F4E6F5); border-color: transparent; }
.cvf-vt--risk .cvf-vt__label::before { background-color: #fff; }
.cvf-vt ul { margin: 0 !important; padding: 0 0 0 1.05rem !important; }
.cvf-vt li { margin: 0 0 .55rem; font-size: .97rem; line-height: 1.55; color: var(--cvf-ink-2, #3B4A5C); }
.cvf-vt li:last-child { margin-bottom: 0; }
.cvf-vt li::marker { color: var(--cvf-mauve-ink, #8A4690); }

/* The labels section: now last, in the dark blue style */
.cvf-info .cvf-info-blunt { background: linear-gradient(135deg, var(--cvf-navy, #17304A) 0%, #2E2A55 58%, var(--cvf-plum, #4A254A) 100%) !important; color: #EEF0F6; }
.cvf-info .cvf-info-blunt::before { opacity: .07; filter: brightness(3); }
.cvf-info-blunt > .cvf-eyebrow { color: var(--cvf-mauve, #E0B9E3) !important; }
.cvf-info-blunt > h2, .cvf-info-blunt > h2 * { color: #fff !important; }
.cvf-info-blunt .cvf-info-pull { color: #fff; }
.cvf-info-blunt .cvf-info-blunt__rest, .cvf-info-blunt .cvf-info-blunt__foot { color: #E6E8F0; }
.cvf-info-blunt .cvf-info-blunt__rest strong { color: #fff; }
.cvf-info-blunt > .cvf-info-more > summary { color: var(--cvf-mauve, #E0B9E3); }
.cvf-info-blunt > .cvf-info-more > p { color: #E6E8F0; }
.cvf-info-blunt > .cvf-info-more a { color: var(--cvf-mauve, #E0B9E3); }
.cvf-info-blunt .cvf-info-three li { box-shadow: 0 14px 34px rgba(0, 0, 0, .18); border: 0; }
.cvf-info-blunt .cvf-info-three li, .cvf-info-blunt .cvf-info-three li p { color: var(--cvf-ink-2, #3B4A5C); }
.cvf-info-blunt .cvf-info-three li h3 { color: var(--cvf-navy, #17304A); }

@media (max-width: 760px) {
	.cvf-vac-grid { grid-template-columns: 1fr; }
	.cvf-info .cvf-vac__body { grid-template-columns: 1fr; padding: .25rem .9rem 1rem; }
	.entry-content #blunt h2.cvf-acc-h .cvf-acc-chev, .entry-content #blunt h2.cvf-acc-h:has(.cvf-acc-btn[aria-expanded="true"]) .cvf-acc-chev { background: var(--cvf-mauve, #E0B9E3) !important; box-shadow: none; }
	.entry-content #blunt h2.cvf-acc-h .cvf-acc-chev::before { border-color: var(--cvf-plum, #4A254A) !important; }
}
