/*
 * Pattern layout. Owned by the patterns agent.
 *
 * The registered block styles (blocks.css) carry the components; this file only carries the page
 * layout the patterns in patterns/ need around them: band rhythm, the label column, fixed-count
 * grids, ruled rows, panels. Every rule hangs off an apfp- class that the patterns add, so a page
 * built without the patterns is untouched. Colour always comes from the --ctx-* tokens so a band
 * inverts with its palette background. Source: site.css in the design hand-off.
 */

/* Icons for download rows and external links (stroke icons, same weight as the arrow) */
:root{
	--apfp-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
	--apfp-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
}

/* ---------- Bands ---------- */

.apfp-band{padding-block:var(--space-section);padding-inline:var(--space-gutter)}
.apfp-band > *{margin-inline:auto}
/* Text blocks sit at the left edge of the 1280px content area, not centred in it */
/* !important: core's constrained layout centres every child with margin-inline:auto!important */
.apfp-band > :is(p,h1,h2,h3,h4,.wp-block-buttons,.wp-block-list){margin-inline-start:max(0px,calc((100% - 1280px) / 2))!important;margin-inline-end:auto!important}
.apfp-band > * + *{margin-block-start:var(--space-5)}
.apfp-band > :is(.wp-block-columns,.wp-block-group){max-width:1280px}
.apfp-band p{max-width:var(--measure)}
.apfp-band .apfp-lede{max-width:66ch;font-size:var(--fs-sub-header);line-height:var(--lh-sub-header);color:var(--ctx-text)}
.apfp-band :is(h1,h2,h3){margin-block-end:0}
.apfp-band .wp-block-column > * + *{margin-block-start:var(--space-5)}
.apfp-band .wp-block-column > p.apf-label:first-child{margin-block-start:0}
.apfp-band .wp-block-heading.is-style-apf-split{max-width:20ch}

/* Label column: the 240px label, then the content. The block style supplies the widths; this lines the label up with the heading. */
.apfp-labelcols{margin-block-end:0}
.apfp-labelcols > .wp-block-column:first-child > p.apf-label{padding-top:.55em}
.apfp-pagetitle .apfp-labelcols > .wp-block-column:first-child > p.apf-label{padding-top:.9em}
.apfp-pagetitle{padding-block:clamp(48px,6vw,96px) 0}
.apfp-pagetitle > p.apfp-crumbs + .wp-block-columns{margin-block-start:var(--space-4)}
.apfp-pagetitle .apfp-labelcols > .wp-block-column:first-child > p.apfp-crumbs{padding-top:.9em}
.apfp-pagetitle .wp-block-heading.is-style-apf-split{max-width:none}
.apfp-pagetitle .apfp-lede{max-width:var(--measure-narrow)}
@media (max-width:860px){.apfp-labelcols > .wp-block-column:first-child > p.apf-label,.apfp-pagetitle .apfp-labelcols > .wp-block-column:first-child > p.apf-label,.apfp-pagetitle .apfp-labelcols > .wp-block-column:first-child > p.apfp-crumbs{padding-top:0}}

/* Breadcrumbs (a paragraph of links, "Home / Section / Page") */
.apfp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:var(--fs-description);color:var(--ctx-text)}
.apfp-crumbs a{display:inline-flex;align-items:center;min-height:44px}
.apfp-crumbs__item{white-space:nowrap}
/* The design's separator: a slash with 8px either side, drawn here so the page content only holds the trail */
.apfp-crumbs__item::before{content:"/";margin-right:8px;color:var(--ctx-muted)}
.apfp-pagetitle + .apfp-band{padding-top:var(--space-7)}
/* The 1px rule that closes the title block, about 75px under the intro, as in the design */
.apfp-pagetitle > .wp-block-columns{padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--ctx-rule)}
/* In-page anchors clear the sticky header */
.apfp-band[id]{scroll-margin-top:120px}

/* ---------- Hero ---------- */

.apfp-slide.wp-block-cover{min-height:clamp(520px,50vw,680px);padding-block:var(--space-section);padding-inline:max(var(--space-gutter),88px)}
@media (max-width:781px){.apfp-slide.wp-block-cover{padding-inline:var(--space-gutter)}}
.apfp-slide .wp-block-cover__background{opacity:.85}
.apfp-slide .wp-block-cover__inner-container{width:100%;max-width:1280px;margin-inline:auto}
.apfp-hero__content > * + *{margin-block-start:var(--space-5)}
.apfp-hero__title{max-width:14ch}
.apfp-hero__intro{max-width:40ch}

.apfp-hero-split.wp-block-media-text{min-height:0}
.apfp-hero-split .wp-block-media-text__content{padding:var(--space-section) var(--space-gutter)}
.apfp-hero-split .wp-block-media-text__content > * + *{margin-block-start:var(--space-5)}
.apfp-hero-split .wp-block-media-text__content p{max-width:40ch}
.apfp-hero-split .wp-block-media-text__media{align-self:stretch}
.apfp-hero-split .wp-block-media-text__media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.apfp-hero-split .wp-block-media-text__media{min-height:420px}
.apfp-hero-split .wp-block-heading.is-style-apf-split{max-width:14ch}

/* ---------- Fixed-count grids (Columns, never auto-fit) ---------- */

.apfp-grid{gap:var(--space-5)}
.apfp-grid.apfp-grid-2{gap:var(--space-7) var(--space-6)}
.apfp-grid > .wp-block-column{flex-basis:0;min-width:0}
.apfp-grid > .wp-block-column > .wp-block-group{height:100%}
.apfp-grid:not(:first-child){margin-block-start:var(--space-7)}
@media (max-width:1100px){
	.apfp-grid-4{flex-wrap:wrap!important}
	.apfp-grid-4 > .wp-block-column{flex-basis:calc(50% - var(--space-5)) !important}
	.apfp-grid-3{flex-wrap:wrap!important}
	.apfp-grid-3 > .wp-block-column{flex-basis:100% !important}
	.apfp-card__media img{display:block;width:100%;aspect-ratio:3/2;max-height:260px;object-fit:cover}
}
@media (max-width:781px){.apfp-grid:not(.apfp-grid-4) > .wp-block-column{flex-basis:100% !important}}
@media (max-width:600px){.apfp-grid-4 > .wp-block-column{flex-basis:100% !important}}

/* Cards: kicker above the title, arrow meta at the foot */
.apfp-card__media{margin:0}
.apfp-card__title{padding-top:var(--space-5)}
.apfp-card__meta{margin-top:auto!important;padding-top:var(--space-5)}
.apfp-card__meta a,a.apfp-card__meta,.apfp-video__meta a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;position:relative;z-index:2}
.apfp-card__meta a:hover,a.apfp-card__meta:hover,.apfp-video__meta a:hover{text-decoration:underline}
.apfp-card__meta a::after,a.apfp-card__meta::after,.apfp-video__meta a::after{content:"";flex:none;width:16px;height:16px;background-color:currentColor;-webkit-mask:var(--apf-arrow) center/contain no-repeat;mask:var(--apf-arrow) center/contain no-repeat}
.apfp-video__meta a::after{-webkit-mask-image:var(--apfp-external);mask-image:var(--apfp-external)}
.apf-label a{text-decoration:none}
.wp-block-group.is-style-apf-card{height:100%}

/* Heading row with a link on the right */
.apfp-headrow{align-items:flex-end;gap:var(--space-4)}
.apfp-headrow > .wp-block-column:first-child{flex-basis:auto!important;flex-grow:1}
.apfp-headrow > .wp-block-column:last-child{flex-basis:auto!important;flex-grow:0}
.apfp-headrow .wp-block-column > *{margin-block:0}
@media (max-width:781px){.apfp-headrow{flex-wrap:nowrap!important}.apfp-headrow > .wp-block-column{flex-basis:auto!important}}

/* ---------- Rows (group rows: meta, title with text, trailing label) ---------- */

.apfp-rows{border-top:1px solid var(--ctx-rule)}
.apfp-rows > * + *{margin-block-start:0}
.apfp-row{position:relative;display:grid;grid-template-columns:var(--row-meta-col,180px) minmax(0,1fr) auto;align-items:center;gap:var(--space-3) var(--space-6);min-height:72px;padding:var(--space-4) var(--space-2);border-bottom:1px solid var(--ctx-rule);color:var(--ctx-text)}
.apfp-row > *{margin:0}
.apfp-row--nometa{grid-template-columns:minmax(0,1fr) auto}
.apfp-row__main{display:flex;flex-direction:column;gap:4px;min-width:0}
.apfp-row__main > *{margin:0!important}
.apfp-row__meta{font-family:var(--font-sans);font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ctx-muted)}
.apfp-row__title{font-size:var(--fs-sub-header);line-height:var(--lh-sub-header)}
.apfp-row--serif .apfp-row__title{font-family:var(--font-serif);font-size:var(--fs-small-header);line-height:var(--lh-small-header)}
.apfp-row__text{font-size:var(--fs-description);line-height:var(--lh-description);color:var(--ctx-muted)}
.apfp-row__trail{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.apfp-row--link .apfp-row__trail::after{content:"";width:24px;height:24px;background-color:currentColor;-webkit-mask:var(--apf-arrow) center/contain no-repeat;mask:var(--apf-arrow) center/contain no-repeat}
.apfp-row--download .apfp-row__trail::after{-webkit-mask-image:var(--apfp-download);mask-image:var(--apfp-download)}
.apfp-row__title a{color:inherit;text-decoration:none}
.apfp-row--link .apfp-row__title a::after{content:"";position:absolute;inset:0;z-index:1}
.apfp-row--link:hover{background:var(--ctx-btn2-hover)}
.apfp-row--link:hover .apfp-row__title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.apfp-row--link:has(a:focus-visible){outline:var(--focus-width) solid var(--ctx-focus);outline-offset:-3px}
.apfp-row--link a:focus-visible{outline:none}
/* Rows answer to the width of their own container (they sit beside a 240px label column), not the viewport */
.apfp-rows{container-type:inline-size}
@container (max-width:620px){
	.apfp-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4)}
	.apfp-row > .apfp-row__meta{grid-column:1/-1}
}
.apfp-rows .wp-block-post-template{margin:0;padding:0;list-style:none}
.apfp-rows .wp-block-post-template > li{margin-block-start:0}

.apfp-rows--narrow{--row-meta-col:64px}
.apfp-rows--wide{--row-meta-col:200px}
.apfp-band .wp-block-table th{text-align:left}
.apfp-band .wp-block-table figcaption{text-align:left;color:var(--ctx-muted)}

/* ---------- CTA panels ---------- */

.apfp-cta > *{margin-block:0}
.apfp-cta .wp-block-buttons{margin-top:var(--space-3)}

/* ---------- Facts, topics, profiles ---------- */

.apfp-facts{gap:var(--space-6)}
.apfp-facts > .wp-block-column{flex-basis:0}
.apfp-fact{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--ctx-rule);height:100%}
.apfp-fact > *{margin:0}
.apfp-fact__big{font-family:var(--font-serif);font-size:var(--fs-medium-header);line-height:var(--lh-medium-header);color:var(--ctx-display)}
.apfp-fact__big small{font-family:var(--font-sans);font-size:var(--fs-body)}
@media (max-width:781px){.apfp-facts > .wp-block-column{flex-basis:100%!important}}

.apfp-topic{padding-top:var(--space-6);border-top:1px solid var(--ctx-rule)}
.apfp-band > .apfp-topic + .apfp-topic{margin-block-start:var(--space-7)}
.apfp-topic .wp-block-column > p.apf-label{padding-top:.4em}

.apfp-profile{display:grid;grid-template-columns:240px minmax(0,1fr) 220px;gap:var(--space-5) var(--space-6);padding-block:var(--space-7);border-block:1px solid var(--ctx-rule);align-items:start}
.apfp-profile + .apfp-profile{border-top:0}
.apfp-profile > .wp-block-column{flex-basis:auto!important;min-width:0}
.apfp-profile > .wp-block-column > * + *{margin-block-start:var(--space-4)}
.apfp-profile figure.wp-block-image{width:160px;margin:0}
.apfp-profile figure.wp-block-image img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--apf-light-blue)}
.apfp-profile > .wp-block-column:last-child{display:flex;flex-direction:column;gap:var(--space-4)}
.apfp-profile > .wp-block-column:last-child > *{margin:0}
.apfp-profile > .wp-block-column:last-child > p.apf-label{padding-top:var(--space-4);border-top:1px solid var(--ctx-rule)}
.apfp-initials{display:grid;place-items:center;width:160px;aspect-ratio:1;border-radius:50%;padding:0}
.apfp-initials > *{margin:0}
.apfp-initials__text{font-family:var(--font-serif);color:var(--apf-navy)}
@media (max-width:1100px){
	.apfp-profile{grid-template-columns:180px minmax(0,1fr)}
	.apfp-profile > .wp-block-column:last-child{grid-column:2}
	.apfp-profile figure.wp-block-image,.apfp-initials{width:128px}
}
@media (max-width:640px){
	.apfp-profile{grid-template-columns:minmax(0,1fr)}
	.apfp-profile > .wp-block-column:last-child{grid-column:auto}
	.apfp-profile figure.wp-block-image,.apfp-initials{width:96px}
}

/* ---------- Video cards ---------- */

.apfp-video{display:flex;flex-direction:column;gap:var(--space-3);position:relative}
.apfp-video > *{margin:0}
.apfp-video__media{position:relative;border-radius:var(--radius-m);overflow:hidden}
.apfp-video__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-m)}
.apfp-video__media::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;pointer-events:none;
	background:var(--apf-blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C4C6D' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/28px 28px no-repeat}
.apfp-video__title{font-family:var(--font-sans);font-size:var(--fs-accent-header);line-height:var(--lh-accent-header);margin-top:var(--space-2)!important}
.apfp-video__title a{color:inherit;text-decoration:none}
.apfp-video__title a::after{content:"";position:absolute;inset:0;z-index:1}
.apfp-video:hover .apfp-video__title a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* ---------- Links grid, ruled details, panels ---------- */

.wp-block-list.apfp-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:0 var(--space-6);margin:0;padding:0;list-style:none}
.wp-block-list.apfp-links > li{display:flex;align-items:center;min-height:64px;border-bottom:1px solid var(--ctx-rule);font-size:var(--fs-sub-header)}
.wp-block-list.apfp-links > li > a{display:inline-flex;align-items:center;gap:8px}
.wp-block-list.apfp-links > li > a[target=_blank]::after{content:"";flex:none;width:20px;height:20px;background-color:currentColor;-webkit-mask:var(--apfp-external) center/contain no-repeat;mask:var(--apfp-external) center/contain no-repeat}

.apfp-dl{border-top:1px solid var(--ctx-rule)}
.apfp-dl > * + *{margin-block-start:0}
.apfp-dl__row{display:flex;flex-direction:column;gap:4px;padding:var(--space-4) 0;border-bottom:1px solid var(--ctx-rule)}
.apfp-dl__row > *{margin:0}
.apfp-dl__row p:not(.apf-label){font-size:var(--fs-sub-header);line-height:var(--lh-sub-header)}
.apfp-dl__row a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.apfp-small{font-size:var(--fs-description)}

.apfp-panel{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-m)}
.apfp-panel > *{margin-block:0}

.apfp-aside{gap:var(--space-8)}
.apfp-aside{align-items:flex-start}
.apfp-aside > .wp-block-column:first-child{flex-basis:0!important;flex-grow:1;min-width:0}
.apfp-aside > .wp-block-column:last-child{flex-basis:380px!important;flex-grow:0}
@media (min-width:1025px){.apfp-aside > .wp-block-column:last-child .apfp-panel{position:sticky;top:140px}}
@media (max-width:1024px){
	.apfp-aside{flex-wrap:wrap!important;gap:var(--space-7)}
	.apfp-aside > .wp-block-column:first-child,.apfp-aside > .wp-block-column:last-child{flex-basis:100%!important}
}
.apfp-panel h2{font-family:var(--font-sans)}
.apfp-intro{max-width:36ch;margin-block-end:var(--space-5)}

.apfp-register{gap:var(--space-8)}
.apfp-register > .wp-block-column{flex-basis:0!important;flex-grow:1}
@media (max-width:860px){.apfp-register{flex-wrap:wrap!important;gap:var(--space-6)}.apfp-register > .wp-block-column{flex-basis:100%!important}}

.apfp-slot{padding:var(--space-6);border:1px dashed var(--apf-navy);border-radius:var(--radius-m);min-height:420px}
.apfp-slot > * + *{margin-block-start:var(--space-4)}

.apfp-prose p{max-width:var(--measure)}

/* Notices keep clear of the heading below and run the full width of the box */
.apfp-band > :is(.is-style-apf-notice-important,.is-style-apf-notice-info){margin-block-end:var(--space-6)}
.apfp-notice__text{max-width:none!important}

/* Register band: the rule and rhythm of the design's .site-register */
.apfp-registerband .apfp-register{padding-top:var(--space-7);border-top:1px solid var(--ctx-rule);align-items:flex-start}
.apfp-registerband .apfp-register > .wp-block-column > * + *{margin-block-start:var(--space-3)}

/* Member benefits: the beneficiary payment chart (bars are heights of real text columns, read in order) */
.apfp-chart{display:flex;align-items:flex-end;gap:4px;margin:0;padding:0;border-bottom:1px solid var(--ctx-rule)}
.apfp-chart > .apfp-chart__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:var(--space-2);margin:0}
.apfp-chart__bar{background:var(--apf-navy);border-radius:2px 2px 0 0;margin:0}
.apfp-chart__value{margin:0;text-align:center;font-size:var(--fs-label);color:var(--ctx-text)}
.apfp-chart-axis{display:flex;gap:4px;margin:var(--space-2) 0 0}
.apfp-chart-axis > p{flex:1 1 0;min-width:0;margin:0;text-align:center;font-size:var(--fs-label);color:var(--ctx-muted)}

/* Join: step list beside the application */
.apfp-step__n{color:var(--ctx-muted);display:inline-block;min-width:2.5em}

/* ---------- Pattern band: one per page, above the footer, never behind text ---------- */

.apfp-pattern-band{margin-block:0}

/* blocks.css pins the label column's first and last children with !important at a higher specificity than its own
   860px stacking rule, so on phones the label stayed 240px wide and the content squeezed beside it. Restated here. */
@media (max-width:860px){
	.wp-block-columns.is-style-apf-label-columns > .wp-block-column:first-child,
	.wp-block-columns.is-style-apf-label-columns > .wp-block-column:last-child{flex-basis:100%!important}
}

/* Trailing arrow on the buttons the design gives one (overrides.css switches the parent's arrow off everywhere else) */
main .wp-block-button.apfp-arrow .wp-block-button__link::after{content:"";display:inline-block;flex:none;width:20px;height:20px;margin-inline-start:10px;vertical-align:-4px;background-color:currentColor;-webkit-mask:var(--apf-arrow) center/contain no-repeat;mask:var(--apf-arrow) center/contain no-repeat;transition:transform var(--duration-base) var(--ease-standard)}
main .wp-block-button.apfp-arrow .wp-block-button__link:hover::after{transform:translateX(3px)}

/* Articles: text, rows and notices share one measure; the first heading after body copy gets air */
.apfp-article > *{max-width:var(--measure)}
.apfp-article .apfp-lede{max-width:var(--measure)}
.apfp-article > h2{margin-block-start:var(--space-7)}

/* Breadcrumb row on articles: "Home / News" then "/ title" as one wrapping trail */
.apfp-crumbrow{gap:0 8px;align-items:center}
.apfp-crumbs--title{display:block}
.apfp-crumbs--title::before{content:"/";margin-right:8px;color:var(--ctx-muted)}

/* External-link arrow on standalone arrow links */
p.is-style-apf-arrow.apfp-external a::after{-webkit-mask-image:var(--apfp-external);mask-image:var(--apfp-external)}

/* The editor adds a flow gap between rows and inside them that the front end does not have */
.editor-styles-wrapper .apfp-rows > *,.editor-styles-wrapper .apfp-row > *,.editor-styles-wrapper .apfp-row__main > *{margin-block:0}