/* About us page (6 Nov 2026, Owen's mockup). Loaded by page-about-us.php only; every rule sits under .skp-about or the
   page's body class. The content is core blocks (group, columns, heading, paragraph, buttons, social links):
   the icons are CSS masks on the blocks' class names, so Phil never sees SVG in the editor.
   Tokens from style.css: navy/blue headings, red accents and button, 9px radius; tile and band blues as contact.css. */
.skp-about-page { --a-band: #DCE5F1; --a-band-2: #EAF0F7; --a-tile: #E1E8F2; --a-rule: #C7D1DF; --a-gut: max(var(--skp-gutter), calc((100% - var(--skp-container)) / 2)); } /* lines up with .container (7 Nov) */
.skp-about-page .skp-main { padding: 0; }

/* Icons (line icons from the Contact page, same strokes) */
.skp-about {
  --i-news: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Crect x='6.5' y='7.5' width='5' height='4.5' rx='.5'/%3E%3Cpath d='M14 8h3.5M14 11h3.5M6.5 15h11M6.5 17.5h11'/%3E%3C/svg%3E");
  --i-reviews: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.75 5.6 6.15.9-4.45 4.35 1.05 6.15L12 17.1l-5.5 2.9 1.05-6.15L3.1 9.5l6.15-.9Z'/%3E%3C/svg%3E");
  --i-advice: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5Z'/%3E%3C/svg%3E");
  --i-mail: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
  --i-people: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5M15.5 4.8a3.3 3.3 0 0 1 0 6.4M17.5 13.8c2.4.7 4 2.9 4 6.2'/%3E%3C/svg%3E");
}

/* Every band runs full width; its content lines up with the site container */
.skp-about > * { padding-left: var(--a-gut); padding-right: var(--a-gut); margin: 0; }
.skp-about .wp-block-columns { margin: 0; }
.skp-about h2 { font-weight: 700; }

/* ---- 1. Hero: a text band on its own (no photo, Owen 6 Nov): breadcrumb, title with the red rule, intro ---- */
/* The header breadcrumb leaves the flow (same place, top: auto) so the band starts right under the nav */
.skp-about-page .skp-crumbs { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2; }
.skp-about .skp-about-hero { padding-top: 72px; padding-bottom: 56px; background: var(--a-band); } /* one flat colour, no gradient (Owen, 6 Nov) */
.skp-about h1.skp-about-title { font-size: 42px; font-weight: 700; color: var(--skp-blue); margin: 0 0 20px; }
.skp-about h1.skp-about-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--skp-red); margin-top: 12px; }
/* a lead paragraph at a comfortable reading width, left aligned with the cards and columns below */
.skp-about .skp-about-intro { max-width: 640px; margin: 0; font-size: 19px; line-height: 1.6; color: #1A1A1A; }

/* ---- 2. Section cards: icon tile, linked title, one line; the whole card is the link ---- */
.skp-about .skp-about-band { background: #fff; border-bottom: 1px solid var(--skp-line); }
.skp-about .skp-about-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.skp-about .skp-about-card { position: relative; padding: 26px 24px 26px 94px; }
.skp-about .skp-about-card:first-child { padding-left: 70px; }
/* inset divider between cards, drawn as a background line so the card pseudo-elements stay free for tile and icon */
.skp-about .skp-about-card + .skp-about-card { background: linear-gradient(var(--skp-line), var(--skp-line)) no-repeat left center / 1px calc(100% - 52px); }
.skp-about .skp-about-card::before, .skp-about .skp-about-card::after { content: ""; position: absolute; top: 26px; pointer-events: none; }
.skp-about .skp-about-card::before { left: 24px; width: 52px; height: 52px; border-radius: 9px; background: var(--a-tile); } /* tile */
.skp-about .skp-about-card::after { left: 36px; margin-top: 12px; width: 28px; height: 28px; background: var(--skp-blue); -webkit-mask: var(--i) no-repeat center / contain; mask: var(--i) no-repeat center / contain; } /* icon */
.skp-about .skp-about-card:first-child::before { left: 0; }
.skp-about .skp-about-card:first-child::after { left: 12px; }
.skp-about .skp-about-card-news { --i: var(--i-news); }
.skp-about .skp-about-card-reviews { --i: var(--i-reviews); }
.skp-about .skp-about-card-advice { --i: var(--i-advice); }
.skp-about .skp-about-card-title { font-size: 24px; margin: 0 0 6px; }
.skp-about .skp-about-card-title a { color: var(--skp-blue); text-decoration: none; }
.skp-about .skp-about-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 9px; } /* the whole card is the link */
.skp-about .skp-about-card:hover .skp-about-card-title a { color: var(--skp-red); text-decoration: underline; text-underline-offset: 4px; }
.skp-about .skp-about-card-title a:focus-visible { outline: none; color: var(--skp-red); }
.skp-about .skp-about-card-title a:focus-visible::after { outline: 3px solid var(--skp-red); outline-offset: -3px; }
.skp-about .skp-about-card p { font-size: 16px; line-height: 1.5; margin: 0; color: #1A1A1A; }

/* ---- 3. What we cover, beside the Get involved panel ---- */
.skp-about .skp-about-more { padding-top: 40px; padding-bottom: 48px; }
.skp-about .skp-about-more-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; align-items: start; }
.skp-about .skp-about-cover { padding-right: 36px; border-right: 1px solid var(--a-rule); }
.skp-about .skp-about-cover h2, .skp-about .skp-about-involved h2 { font-size: 28px; margin: 0 0 12px; }
.skp-about .skp-about-cover p { margin: 0 0 1em; color: #1A1A1A; max-width: var(--skp-measure); }
.skp-about .skp-about-cover p:last-child { margin-bottom: 0; }
.skp-about .skp-about-cover a { color: var(--skp-blue); font-weight: 600; text-underline-offset: 3px; }
.skp-about .skp-about-cover a:hover { color: var(--skp-red); }
.skp-about .skp-about-involved { margin-left: 36px; background: var(--a-band); border-radius: 9px; padding: 24px 26px 18px; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; align-self: start; column-gap: 10px; } /* core sets align-items: normal !important on columns; the panel keeps its own height */
.skp-about .skp-about-involved > * { flex: 1 1 100%; }
.skp-about .skp-about-involved-title { display: flex; align-items: center; gap: 12px; }
.skp-about .skp-about-involved-title::before { content: ""; flex: 0 0 30px; height: 30px; background: var(--skp-blue); -webkit-mask: var(--i-people) no-repeat center / contain; mask: var(--i-people) no-repeat center / contain; }
.skp-about .skp-about-involved > p { margin: 0 0 18px; color: #1A1A1A; }
.skp-about .skp-about-buttons { margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--a-rule); }
.skp-about .skp-about-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; background: var(--skp-red-2); color: #fff; padding: 11px 26px; border-radius: 9px; font-size: 17px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background-color .15s; }
.skp-about .skp-about-btn .wp-block-button__link::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-mail) no-repeat center / contain; mask: var(--i-mail) no-repeat center / contain; }
.skp-about .skp-about-btn .wp-block-button__link:hover, .skp-about .skp-about-btn .wp-block-button__link:focus { background: #B5142A; color: #fff; }
.skp-about .skp-about-involved > p.skp-about-follow { flex: 0 0 auto; margin: 0; padding: 10px 0; font-size: 16px; }
.skp-about .wp-block-social-links.skp-about-social { flex: 0 0 auto; margin: 6px 0 0; padding: 0; gap: 2px; font-size: 24px; }
.skp-about .wp-block-social-links.skp-about-social .wp-social-link { color: var(--skp-blue); background: none; margin: 0; }
.skp-about .wp-block-social-links.skp-about-social .wp-social-link a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 9px; transition: background-color .15s, color .15s; }
.skp-about .wp-block-social-links.skp-about-social .wp-social-link svg { width: 24px; height: 24px; }
.skp-about .wp-block-social-links.skp-about-social .wp-social-link a:hover, .skp-about .wp-block-social-links.skp-about-social .wp-social-link a:focus-visible { color: var(--skp-red); background: rgba(255, 255, 255, .6); }
.skp-about .wp-block-social-links.skp-about-social .wp-social-link:hover { transform: none; }

/* ---- Tablet: cards and the lower section stack ---- */
@media (max-width: 900px) {
  .skp-about .skp-about-cards { grid-template-columns: minmax(0, 1fr); }
  .skp-about .skp-about-card, .skp-about .skp-about-card:first-child { padding: 20px 0 20px 70px; }
  .skp-about .skp-about-card::before, .skp-about .skp-about-card::after { top: 20px; }
  .skp-about .skp-about-card::before, .skp-about .skp-about-card:first-child::before { left: 0; }
  .skp-about .skp-about-card::after, .skp-about .skp-about-card:first-child::after { left: 12px; }
  .skp-about .skp-about-card + .skp-about-card { background: linear-gradient(var(--skp-line), var(--skp-line)) no-repeat left top / 100% 1px; }
  .skp-about .skp-about-more-cols { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .skp-about .skp-about-cover { padding-right: 0; border-right: 0; }
  .skp-about .skp-about-involved { margin-left: 0; }
}
/* ---- Phone: a shorter hero band, smaller title and lead ---- */
@media (max-width: 767px) {
  .skp-about .skp-about-hero { padding-top: 56px; padding-bottom: 36px; }
  .skp-about h1.skp-about-title { font-size: 34px; margin-bottom: 16px; }
  .skp-about .skp-about-intro { font-size: 18px; }
  .skp-about .skp-about-cover h2, .skp-about .skp-about-involved h2 { font-size: 24px; }
  .skp-about .skp-about-card-title { font-size: 22px; }
  .skp-about .skp-about-involved { padding: 20px 18px 14px; }
}