/*
COLLARTIVE / OUR PROGRAMMES / v1.4
Find 'EDIT PROGRAMMES DESIGN' to make simple changes.
These rules are isolated from homepage and Social Impact page.
Shared colours, buttons, grid background and footer are in style.css.
*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* EDIT PROGRAMMES DESIGN 01 / HERO */
.pg-hero { background-color: var(--pink); position:relative; overflow:hidden; }
.pg-hero-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); align-items:stretch; min-height:700px; gap:3.5%; }
.pg-hero-text { padding: clamp(86px,9vw,145px) 0 85px; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.pg-kicker { display:inline-flex; align-items:center; gap:10px; padding:9px 12px; background:var(--cream); font-size:11px; font-weight:900; letter-spacing:.05em; }
.pg-kicker-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.pg-hero h1 { margin:30px 0 20px; font:900 clamp(76px,9vw,150px)/.86 var(--display); letter-spacing:-.105em; }
.pg-hero h1 span:not(.pg-period){ color:var(--blue); }
.pg-period { color:var(--hot-pink); }
.pg-hero-text > p { max-width:520px; font-size:clamp(17px,1.45vw,21px); font-weight:600; line-height:1.55; margin:12px 0 32px; }
.pg-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.pg-hero-actions > span { font-size:10px; font-weight:900; letter-spacing:.08em; }
/* EDIT PROGRAMMES HERO COLLAGE v1.7:
   Independent circular crops sit in percentage based positions. Change width,
   height, top, bottom, left or right to move an individual photo.
   Decorative petals and bursts are CSS only. The photographs remain real.
*/
.pg-hero-art { position:relative; min-height:670px; isolation:isolate; }
.pg-hero-petal { position:absolute; z-index:0; pointer-events:none; }
.pg-petal-pink { width:64%; height:57%; top:10%; right:12%; background:var(--hot-pink); border-radius:44% 66% 30% 54%; transform:rotate(26deg); }
.pg-petal-blue { width:54%; height:47%; bottom:5%; right:1%; background:#1535d9; border-radius:52% 30% 60% 30%; transform:rotate(-18deg); }
.pg-shot { position:absolute; margin:0; overflow:hidden; border:7px solid #fff; border-radius:50%; background:#f1d1db; box-shadow:0 12px 28px rgba(6,24,10,.12); }
.pg-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.pg-shot-main { width:61%; height:52%; right:4%; top:12%; z-index:2; }
.pg-shot-main img { object-position:50% 41%; }
.pg-shot-top { width:28%; height:25%; right:0; top:4%; z-index:3; }
.pg-shot-bottom-left { width:39%; height:36%; left:1%; top:33%; z-index:4; }
.pg-shot-bottom-mid { width:42%; height:36%; left:8%; bottom:3%; z-index:3; }
.pg-shot-bottom-right { width:39%; height:33%; right:2%; bottom:7%; z-index:5; }
.pg-hero-burst { position:absolute; z-index:6; left:45%; top:60%; color:#ff7700; font-size:145px; line-height:1; transform:rotate(-7deg); pointer-events:none; }
.pg-hero-label { position:absolute; bottom:4%; right:1%; background:var(--hot-pink); padding:15px 18px; font:900 15px/1.1 var(--display); transform:rotate(7deg); z-index:7; }
.pg-hero-round { position:absolute; right:0; top:4%; border:3px solid var(--ink); background:var(--sun); border-radius:50%; width:105px; height:105px; display:flex; flex-direction:column; justify-content:center; align-items:center; font:900 46px/.9 var(--display); letter-spacing:-.08em; transform:rotate(10deg); z-index:8; }
.pg-hero-round small { font-size:15px; letter-spacing:0; }
.pg-hero-foot { border-top:2px solid var(--ink); display:flex; justify-content:space-between; padding:17px max(25px,calc((100vw - var(--container))/2)); font-size:10px; font-weight:900; letter-spacing:.11em; }
/* EDIT PROGRAMMES DESIGN 02 / AUDIENCE STRIP */
.pg-audiences { background:var(--forest); color:var(--white); padding-block:92px 100px; }
.pg-audience-heading { display:flex; gap:40px; align-items:end; justify-content:space-between; margin:39px 0 52px; }
.pg-audience-heading h2 { font:900 clamp(54px,6.2vw,98px)/.91 var(--display); letter-spacing:-.09em; margin:0; }
.pg-audience-heading h2 span { color:var(--sun); }
.pg-audience-heading p { font-size:17px; line-height:1.5; max-width:340px; margin:0 0 6px; }
.pg-audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid rgba(255,255,255,.6); }
.pg-audience-grid > div { padding:24px; min-height:215px; border-right:1px solid rgba(255,255,255,.6); display:flex; flex-direction:column; }
.pg-audience-grid > div:last-child { border-right:0; }
.pg-audience-number { font:800 13px var(--body); color:var(--sun); }
.pg-audience-grid h3 { margin:auto 0 10px; font:900 clamp(26px,2.7vw,40px)/1 var(--display); letter-spacing:-.05em; }
.pg-audience-grid p { font-size:14px; line-height:1.45; max-width:330px; margin:0; }
/* EDIT PROGRAMMES DESIGN 03 / DIRECTORY, SEARCH AND FILTERS */
.pg-directory { background:var(--cream); }
.pg-directory-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin:39px 0 65px; }
.pg-directory-heading h2 { font:900 clamp(64px,8vw,128px)/.87 var(--display); letter-spacing:-.095em; margin:0; }
.pg-directory-heading h2 span { color:var(--blue); }
.pg-directory-heading p { font-size:18px; font-weight:600; line-height:1.5; max-width:405px; margin:0 0 10px; }
.pg-toolbar { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:22px; border-bottom:2px solid var(--ink); padding-bottom:25px; }
.pg-filter-list { display:flex; flex-wrap:wrap; gap:9px; max-width:980px; }
.pg-filter { cursor:pointer; background:transparent; border:2px solid var(--ink); padding:11px 12px; font:900 11px var(--display); line-height:1.15; transition:background .2s,color .2s; }
.pg-filter:hover, .pg-filter.is-selected { background:var(--ink); color:white; }
.pg-filter span { opacity:.55; margin-left:5px; }
.pg-search { display:flex; align-items:center; gap:8px; border-bottom:2px solid var(--ink); padding:8px 3px; min-width:min(100%,252px); max-width:340px; flex:1; }
.pg-search-icon { font-size:25px; line-height:1; }
.pg-search input { width:100%; border:0; outline:none; font:600 14px var(--body); color:var(--ink); background:transparent; }
.pg-search:focus-within { border-bottom-color:var(--blue); }
.pg-results { margin:20px 0 30px; display:flex; justify-content:space-between; gap:16px; font:900 11px var(--display); letter-spacing:.045em; text-transform:uppercase; }
.pg-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
/* SECURITY HARDENING v1.8: card colours moved from inline style attributes into CSS.
   This permits a strict Content Security Policy without unsafe-inline. */
.programme-card[data-category="paint"] { --card-tint:#ffe6eb; }
.programme-card[data-category="print"] { --card-tint:#ffb900; }
.programme-card[data-category="form"] { --card-tint:#dce5c4; }
.programme-card[data-category="digital"] { --card-tint:#dff1f9; }
.programme-card[data-category="motion"] { --card-tint:#bde2ef; }
/* EDIT PROGRAMMES DESIGN 04 / PROGRAMME CARDS
   Top band colour is --card-tint on each article in programmes.html.
   To change how tall the cards are, adjust min-height below. */
.programme-card { min-width:0; display:flex; flex-direction:column; border:2px solid var(--ink); background:#fff; transition:transform .18s,box-shadow .18s; }
.programme-card:hover { transform:translateY(-4px); box-shadow:7px 7px 0 rgba(6,24,10,.14); }
.programme-card[hidden] { display:none !important; }
.programme-card-top { min-height:99px; background:var(--card-tint,var(--pink)); border-bottom:2px solid var(--ink); padding:16px 18px; display:flex; justify-content:space-between; align-items:start; }
.programme-card-index { font:900 11px var(--display); }
.programme-card-symbol { font:900 59px/.95 var(--display); letter-spacing:-.08em; }
.programme-card-content { padding:24px 20px 28px; flex:1; min-height:206px; }
.programme-card-category { font:900 11px var(--display); letter-spacing:.07em; color:var(--blue); }
.programme-card h3 { margin:12px 0 14px; font:900 clamp(23px,2.2vw,32px)/1.02 var(--display); letter-spacing:-.065em; text-wrap:balance; }
.programme-card p { font-size:14px; line-height:1.47; font-weight:500; margin:0; }
.programme-card-link { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:2px solid var(--ink); padding:14px 20px; font:900 10px var(--display); letter-spacing:.015em; background:var(--cream); }
.programme-card-link span { font-size:21px; }
.programme-card-link:hover { background:var(--sun); }
.pg-no-results { padding:70px 15px; text-align:center; border:2px solid var(--ink); }
.pg-no-results[hidden] { display:none; }
.pg-no-results h3 { font:900 35px var(--display); letter-spacing:-.05em; }
.pg-no-results p { max-width:520px; margin:0 auto 25px; }
.pg-no-results button { border:2px solid var(--ink); font:900 13px var(--display); background:var(--sun); cursor:pointer; padding:15px 20px; }
/* EDIT PROGRAMMES DESIGN 05 / PHOTO INTERLUDE */
.pg-photo-story { background:var(--blue); color:#fff; padding-block:86px; }
.pg-photo-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:45px; align-items:center; }
.pg-photo-copy h2 { margin:39px 0 24px; font:900 clamp(54px,5.7vw,92px)/.9 var(--display); letter-spacing:-.09em; }
.pg-photo-copy h2 em { font-style:normal; color:var(--sun); }
.pg-photo-copy p { max-width:430px; font-size:17px; line-height:1.5; }
.pg-photo-pair { display:grid; grid-template-columns:1.1fr .8fr; gap:12px; align-items:end; }
.pg-photo-pair img { width:100%; height:340px; object-fit:cover; border:7px solid #fff; }
.pg-photo-pair img:last-child { height:255px; }
/* EDIT PROGRAMMES DESIGN 06 / CUSTOM ENQUIRY */
.pg-custom { background-color:var(--sun); padding-block:100px; }
.pg-custom-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:65px; align-items:end; }
.pg-custom h2 { font:900 clamp(62px,7vw,107px)/.9 var(--display); letter-spacing:-.09em; margin:34px 0 0; }
.pg-custom h2 span { color:var(--blue); }
.pg-custom-right p { font-size:19px; font-weight:600; line-height:1.5; }
.pg-custom-right .button { margin:18px 0 28px; }
.pg-custom-right .pg-custom-note { font-size:13px; font-weight:500; background:rgba(255,255,255,.7); padding:14px; }
@media (max-width: 1120px){
  .pg-hero-grid { gap:0; }
  .pg-hero h1 { font-size:clamp(68px,8.5vw,110px); }
  .pg-hero-art { min-height:620px; }
  .pg-audience-heading h2 { font-size:clamp(48px,6vw,80px); }
  .pg-directory-heading h2 { font-size:clamp(60px,7.5vw,110px); }
  .pg-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px){
  .pg-hero-grid { grid-template-columns:1fr; }
  .pg-hero-text { padding:75px 0 25px; }
  .pg-hero h1 { font-size:clamp(82px,13vw,120px); }
  .pg-hero-art { min-height:560px; }
  .pg-hero-round { top:5%; right:1%; }
  .pg-hero-burst { font-size:115px; }
  .pg-hero-label { bottom:3%; }
  .pg-audience-heading, .pg-directory-heading, .pg-custom-layout { display:block; }
  .pg-audience-heading p, .pg-directory-heading p { margin-top:25px; max-width:600px; }
  .pg-audience-grid { grid-template-columns:1fr; }
  .pg-audience-grid > div { min-height:160px; border-right:0; border-bottom:1px solid rgba(255,255,255,.6); }
  .pg-audience-grid > div:last-child { border-bottom:0; }
  .pg-audience-grid h3 { margin:28px 0 10px; }
  .pg-photo-layout { grid-template-columns:1fr; }
  .pg-photo-pair img { height:300px; }
  .pg-custom-right { margin-top:35px; }
  .pg-hero-foot { padding-inline:20px; }
}
@media (max-width: 560px){
  .pg-hero h1 { font-size:clamp(62px,14.5vw,88px); }
  .pg-hero-text { padding:60px 0 10px; }
  .pg-hero-text > p { font-size:16px; }
  .pg-hero-actions { align-items:flex-start; }
  .pg-hero-actions .button { width:100%; }
  .pg-hero-art { min-height:410px; }
  .pg-shot { border-width:4px; }
  .pg-shot-main { width:62%; height:51%; right:2%; top:10%; }
  .pg-shot-top { width:29%; height:25%; right:0; top:1%; }
  .pg-shot-bottom-left { width:40%; height:35%; left:0; top:33%; }
  .pg-shot-bottom-mid { width:42%; height:34%; left:7%; bottom:4%; }
  .pg-shot-bottom-right { width:42%; height:35%; right:0; bottom:6%; }
  .pg-hero-burst { font-size:86px; top:59%; left:42%; }
  .pg-hero-round { width:70px; height:70px; font-size:29px; top:0; right:0; }
  .pg-hero-round small { font-size:10px; }
  .pg-hero-label { font-size:10px; padding:10px 11px; bottom:2%; right:1%; }
  .pg-hero-foot span:last-child { display:none; }
  .pg-audiences { padding-block:68px; }
  .pg-audience-heading h2, .pg-directory-heading h2, .pg-custom h2 { font-size:clamp(47px,11.7vw,67px); }
  .pg-directory-heading { margin:28px 0 39px; }
  .pg-cards { grid-template-columns:1fr; }
  .pg-filter-list { gap:6px; }
  .pg-filter { padding:10px; font-size:10px; }
  .pg-results span:last-child { display:none; }
  .programme-card-content { min-height:unset; }
  .pg-photo-copy h2 { font-size:clamp(49px,11.5vw,64px); }
  .pg-photo-pair img { height:190px; border-width:4px; }
  .pg-photo-pair img:last-child { height:155px; }
  .pg-custom { padding-block:65px; }
  .pg-custom-right p { font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ .programme-card { transition:none; } }