/* Subject copy and equal cells, after the shared frame and illustrated-cell rules. */
body.subjects-page .framework-panels { display: flex; flex-direction: column; }
body.subjects-page .framework-panels > [data-content-panel]:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
body.subjects-page .framework-panels > [data-content-panel] > .section-head {
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px 20px;
}
body.subjects-page .framework-panels .section-head > .subject-art {
  grid-row: 1 / span 2;
  width: 120px;
  height: 75px;
}
body.subjects-page.cell-art-page .framework-panels > [data-content-panel] > .learning-subject-grid,
body.subjects-page .framework-panels #languages > .learning-languages {
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 12px;
  margin-block: 12px;
}
body.subjects-page .framework-panels #languages > .learning-languages {
  grid-template-columns: minmax(0, 1fr);
}
body.subjects-page .framework-panels .subject-card > p { margin: 0; line-height: 1.45; }
body.subjects-page .framework-panels .subject-card { overflow-wrap: anywhere; }
body.subjects-page .framework-panels > [data-content-panel] > .subject-note {
  margin-block: 4px 12px;
  font-size: .95em;
  line-height: 1.45;
}
body.subjects-page .framework-panels > [data-content-panel] > .learning-links {
  margin-block: auto 0;
  padding-top: 12px;
  gap: 8px 24px;
}
body.subjects-page.cell-art-page .framework-panels #send-support .send-points > .picture-cell {
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
body.subjects-page.cell-art-page #send-support .picture-cell-media {
  min-height: 92px;
  aspect-ratio: auto;
  border-radius: 15px 0 0 15px;
}
body.subjects-page #send-support .picture-cell-copy { align-self: center; padding: 10px 12px; }
body.subjects-page #send-support .send-points h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.3; }
body.subjects-page #send-support .send-points p { margin: 0; font-size: .95rem; line-height: 1.4; }

@media (min-width: 760px) {
  body.subjects-page .framework-panels #languages > .learning-languages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1000px) {
  body.subjects-page .framework-panels #languages > .learning-languages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.subjects-page .framework-panels #languages .subject-card { padding: 14px; }
  body.subjects-page .framework-panels #languages dt { font-size: 1rem; margin-bottom: 6px; }
  body.subjects-page .framework-panels #languages dd { font-size: .95rem; line-height: 1.4; }
}
@media (max-width: 759px) {
  body.subjects-page .framework-panels > [data-content-panel] > .section-head {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 12px;
  }
  body.subjects-page .framework-panels .section-head > .subject-art {
    grid-row: 1;
    width: 88px;
    height: 55px;
  }
  body.subjects-page .framework-panels .section-head > h2 { align-self: center; font-size: 1.5rem; }
  body.subjects-page .framework-panels .section-head > p { grid-column: 1 / -1; }
  body.subjects-page .framework-panels #languages .subject-card { padding: 14px 16px; }
}
@media print {
  body.subjects-page .framework-panels,
  body.subjects-page .framework-panels > [data-content-panel]:not([hidden]) { display: block; }
}
/* Owner, 30 Oct: each subject's title and intro sit in swash cells over one
   shared pixel sky, in that subject's own colour. On framed laptops the sky
   is fixed to the window, so title and intro read as a single crop. */
body.subjects-page .framework-panels > [data-content-panel] > .section-head > :is(h2, p) {
  margin: 0;
  padding: 6px 14px;
  border-radius: 14px;
  color: #fff8ea;
  background: var(--subject-tint), #1b1b2a url("assets/loading-pixel-sky.png") var(--sky-pos, center) / cover;
  box-shadow: inset 0 0 0 1px #ffffff26;
}
body.subjects-page .framework-panels > [data-content-panel] > .section-head > h2 { padding-block: 4px; }
@media screen and (min-width: 1000px) {
  body.subjects-page[data-page-frame] .framework-panels > [data-content-panel] > .section-head > :is(h2, p) {
    background: var(--subject-tint) fixed, #1b1b2a url("assets/loading-pixel-sky.png") var(--sky-pos, center) / cover fixed;
  }
}
body.subjects-page #english { --subject-tint: linear-gradient(120deg, #361329ed, #49234bc9 55%, #103f4de6); --sky-pos: 12% 20%; }
body.subjects-page #maths { --subject-tint: linear-gradient(120deg, #064a4aed, #0e7470c9 55%, #0f3a48e6); --sky-pos: 80% 28%; }
body.subjects-page #science { --subject-tint: linear-gradient(120deg, #12342aed, #1f4a37c9 55%, #0d3a40e6); --sky-pos: 35% 85%; }
body.subjects-page #languages { --subject-tint: linear-gradient(120deg, #3d1f0ced, #6a3714c9 55%, #2a2a3ae6); --sky-pos: 90% 70%; }
body.subjects-page #psychology { --subject-tint: linear-gradient(120deg, #1f1340ed, #3a2675c9 55%, #102a4ce6); --sky-pos: 55% 40%; }
body.subjects-page #art { --subject-tint: linear-gradient(120deg, #3d0f2aed, #6b1f45c9 55%, #2a1838e6); --sky-pos: 20% 60%; }
body.subjects-page #send-support { --subject-tint: linear-gradient(120deg, #0f2147ed, #1d3a6bc9 55%, #12304ae6); --sky-pos: 70% 12%; }
/* Owner, 30 Oct: SEND swash in the blue-green pixel sky (the social posts' sky). */
body.subjects-page #send-support > .section-head > :is(h2, p) {
  background: linear-gradient(120deg, #0a3446d9, #0d5a5e8c 55%, #0a3a4cc4), #0b3f51 url("assets/teal-pixel-sky.webp") 40% 45% / cover;
}
@media screen and (min-width: 1000px) {
  body.subjects-page[data-page-frame] #send-support > .section-head > :is(h2, p) {
    background: linear-gradient(120deg, #0a3446d9, #0d5a5e8c 55%, #0a3a4cc4) fixed, #0b3f51 url("assets/teal-pixel-sky.webp") 40% 45% / cover fixed;
  }
}
/* Owner, 30 Oct: every subject panel ends with a proper CTA beside its links. */
body.subjects-page .framework-panels > [data-content-panel] > .learning-links { align-items: center; }
body.subjects-page .framework-panels .learning-links > .subject-cta { min-height: 44px; margin-right: 8px; text-decoration: none; line-height: 1.3; }
/* Owner, 30 Oct: Art and DT each get a photo card, like Where we teach. */
body.subjects-page #art .subject-photo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 12px 4px; }
body.subjects-page #art .subject-photo-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
body.subjects-page #art .subject-photo { display: block; width: 100%; height: clamp(120px, 27vh, 240px); max-height: none; object-fit: cover; border-radius: 0; }
body.subjects-page #art .subject-photo--art { object-position: center 40%; }
body.subjects-page #art .subject-photo--dt { object-position: center 50%; }
body.subjects-page #art .subject-photo-body { padding: 12px 14px; }
body.subjects-page #art .subject-photo-body h3 { margin: 0 0 6px; }
body.subjects-page #art .subject-photo-body p { margin: 0 0 6px; }
@media (max-width: 760px) { body.subjects-page #art .subject-photo-cards { grid-template-columns: minmax(0, 1fr); } }
/* Owner, 30 Oct: six SEND cells (three rows) still fit one laptop screen. */
@media screen and (min-width: 1000px) { body.subjects-page.cell-art-page[data-page-frame] #send-support .send-points { gap: 10px; margin-block: 8px; } }
/* Owner, 30 Oct: English, Maths, Science and Psychology cells each get a stock photo, beside the copy like SEND. */
body.subjects-page.cell-art-page .framework-panels .learning-subject-grid > .photo-cell { grid-template-columns: 34% minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
body.subjects-page.cell-art-page .framework-panels .photo-cell .picture-cell-media { min-height: clamp(104px, 21vh, 170px); aspect-ratio: auto; border-radius: 15px 0 0 15px; background: #d9d2c4; }
body.subjects-page.cell-art-page .framework-panels .photo-cell .picture-cell-media > img { object-fit: cover; object-position: center 45%; }
body.subjects-page .framework-panels .photo-cell .picture-cell-copy { align-self: center; padding: 10px 12px; }
body.subjects-page .framework-panels .photo-cell h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.3; }
body.subjects-page .framework-panels .photo-cell p { margin: 0; font-size: .95rem; line-height: 1.4; }
@media screen and (min-width: 1000px) { body.subjects-page.cell-art-page[data-page-frame] .framework-panels .learning-subject-grid:has(> .photo-cell) { grid-auto-rows: 1fr; align-items: stretch; } }
@media (max-width: 759px) {
  body.subjects-page.cell-art-page .framework-panels .learning-subject-grid > .photo-cell { grid-template-columns: minmax(0, 1fr); }
  body.subjects-page.cell-art-page .framework-panels .photo-cell .picture-cell-media { min-height: 0; aspect-ratio: 16 / 9; border-radius: 15px 15px 0 0; }
}
/* Owner, 30 Oct: the panel CTA stands out as the site's cream button on every dark subject panel. */
body.subjects-page .framework-panels .learning-links > .subject-cta { border-color: transparent; background: #f3ece2; color: #0b3f51; box-shadow: 0 6px 18px #00000033; }
body.subjects-page .framework-panels .learning-links > .subject-cta:hover { background: #fffaf3; color: #0b3f51; }
body.subjects-page .framework-panels .learning-links > .subject-cta:focus-visible { outline: 3px solid #f2a57a; outline-offset: 3px; }
/* Owner, 30 Oct: each panel's CTA text takes a deep shade of its own subject colour. */
body.subjects-page #english { --cta-ink: #6b2a5e; }
body.subjects-page #maths { --cta-ink: #0b5e5a; }
body.subjects-page #science { --cta-ink: #1f5640; }
body.subjects-page #languages { --cta-ink: #8a4b0b; }
body.subjects-page #psychology { --cta-ink: #3b2f7a; }
body.subjects-page #art { --cta-ink: #8a2450; }
body.subjects-page #send-support { --cta-ink: #1d3a6b; }
body.subjects-page .framework-panels .learning-links > .subject-cta,
body.subjects-page .framework-panels .learning-links > .subject-cta:hover { color: var(--cta-ink, #0b3f51); font-weight: 800; }
/* Owner, 30 Oct: SEND invites visitors to the projects and custom tools, bottom right. */
body.subjects-page #send-support .learning-links > .send-projects-link { margin-left: auto; }
/* Owner, 30 Oct: on smaller framed laptops the six SEND cells stay two lines each. */
@media screen and (min-width: 1000px) and (max-width: 1399px) {
  body.subjects-page.cell-art-page .framework-panels #send-support .send-points > .picture-cell { grid-template-columns: 21% minmax(0, 1fr); }
  body.subjects-page #send-support .picture-cell-copy { padding: 8px 10px; }
  body.subjects-page #send-support .send-points h3 { margin-bottom: 4px; font-size: .95rem; }
  body.subjects-page #send-support .send-points p { font-size: .88rem; line-height: 1.35; }
}
/* Owner, 31 Oct: SEND cells match every other subject's cells; dark mode had them a shade darker. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.subjects-page.cell-art-page #send-support .send-points > .picture-cell { background: #204653; }
}
:root[data-theme="dark"] body.subjects-page.cell-art-page #send-support .send-points > .picture-cell { background: #204653; }
/* Owner, 31 Oct: the language cells take the same height as the English, Maths and Science
   cells (their photo's clamp(104px, 21vh, 170px) plus the 1px card border), so the panels line up. */
@media screen and (min-width: 1000px) {
  body.subjects-page.cell-art-page[data-page-frame] .framework-panels .learning-languages > .subject-card { min-height: calc(clamp(104px, 21vh, 170px) + 2px); }
}