/*
 * The Schools Challenge: individual news article template.
 * Load after screenNEW.css and home.css.
 * Scoped by .newsblock so other body#results pages are unaffected.
 * Header, navigation and footer are untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

body#results:has(.newsblock) > #container {
  --tsc-navy:#192b6d;
  --tsc-blue:#2f5caa;
  --tsc-sky:#91c5ed;
  --tsc-pale:#edf6fc;
  --tsc-ink:#172243;
  --tsc-muted:#5e6981;
  --tsc-line:rgba(25,43,109,.16);
  --tsc-serif:'Playfair Display',Georgia,serif;
  --tsc-sans:'DM Sans',Arial,sans-serif;
  box-sizing:border-box;
  width:min(1000px,calc(100% - 2*clamp(18px,4vw,56px)))!important;
  max-width:1000px!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:clamp(42px,6vw,70px) 0 clamp(54px,8vw,86px)!important;
  background:transparent!important;
  color:var(--tsc-ink);
  font:400 16px/1.72 var(--tsc-sans);
  -webkit-font-smoothing:antialiased;
}

body#results:has(.newsblock) > #container::before {
  content:'';
  position:fixed;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,var(--tsc-pale) 0,#fff 720px);
}

body#results:has(.newsblock) > #container *,
body#results:has(.newsblock) > #container *::before,
body#results:has(.newsblock) > #container *::after { box-sizing:border-box; }

body#results:has(.newsblock) #container .contentfullwidth {
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

body#results:has(.newsblock) #container h1,
body#results:has(.newsblock) #container h2,
body#results:has(.newsblock) #container h3 { color:var(--tsc-navy);font-family:var(--tsc-serif)!important;font-weight:500!important;letter-spacing:-.02em; }

body#results:has(.newsblock) #container .contentfullwidth > h1.centeredonsmallscreen {
  max-width:780px;
  margin:0 auto clamp(34px,5vw,52px)!important;
  padding:0!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(2.25rem,4.6vw,3.7rem)!important;
  line-height:1.1!important;
  text-align:center!important;
}

body#results:has(.newsblock) #container .contentfullwidth > h1 br { display:none!important; }

/* The optional image and article text form the two columns. */
body#results:has(.newsblock) #container .newsblock {
  display:grid!important;
  grid-template-columns:minmax(210px,260px) minmax(0,1fr);
  grid-template-areas:'title title' 'image copy';
  align-items:start;
  gap:0 30px;
  float:none!important;
  width:100%!important;
  margin:0!important;
  padding:0 0 clamp(30px,4vw,46px)!important;
  overflow:hidden;
  border:1px solid var(--tsc-line)!important;
  border-top:5px solid var(--tsc-navy)!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(25,43,109,.075);
}

body#results:has(.newsblock) #container .newsblock > .articletitle {
  grid-area:title;
  width:100%!important;
  margin:0 0 clamp(25px,3.5vw,36px)!important;
  padding:clamp(23px,3.5vw,34px)!important;
  border:0!important;
  border-bottom:1px solid var(--tsc-line)!important;
  background:var(--tsc-pale)!important;
  color:var(--tsc-navy)!important;
  font-size:clamp(1.55rem,3vw,2.35rem)!important;
  line-height:1.22!important;
  text-align:left!important;
}

body#results:has(.newsblock) #container .newsblock > .newscontent {
  grid-area:image;
  width:100%!important;
  margin:0!important;
  padding:0 0 0 30px!important;
}

body#results:has(.newsblock) #container .newscontent > a {
  position:relative;
  display:block!important;
  width:100%;
  text-decoration:none!important;
}

body#results:has(.newsblock) #container img.newsfloatleft {
  display:block!important;
  float:none!important;
  width:100%!important;
  max-width:250px!important;
  height:auto!important;
  margin:0!important;
  border:6px solid #fff!important;
  border-radius:0!important;
  outline:1px solid var(--tsc-line);
  object-fit:contain;
  box-shadow:0 9px 24px rgba(25,43,109,.15);
  transition:transform .18s ease,box-shadow .18s ease;
}

body#results:has(.newsblock) #container .newscontent > a:hover img.newsfloatleft { transform:translateY(-2px);box-shadow:0 13px 28px rgba(25,43,109,.2); }

body#results:has(.newsblock) #container .newsblock > .newsarticleindent {
  grid-area:copy;
  float:none!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 34px 0 0!important;
  color:var(--tsc-muted)!important;
  font:400 15px/1.78 var(--tsc-sans)!important;
  text-align:left!important;
  overflow-wrap:anywhere;
}

body#results:has(.newsblock) #container .newsarticleindent > p {
  width:100%!important;
  margin:0 0 18px!important;
  padding:0!important;
  color:var(--tsc-muted)!important;
  font:400 15px/1.78 var(--tsc-sans)!important;
  text-align:left!important;
}

body#results:has(.newsblock) #container .newsarticleindent > p:first-child br:first-child { display:none!important; }
body#results:has(.newsblock) #container .newsarticleindent strong { color:var(--tsc-navy);font-weight:700; }
body#results:has(.newsblock) #container .newsarticleindent a { color:var(--tsc-blue)!important;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px; }
body#results:has(.newsblock) #container .newsarticleindent a:hover { color:var(--tsc-navy)!important;text-decoration-thickness:2px; }

/* Articles without an image use the full card width. */
body#results:has(.newsblock) #container .newsblock:not(:has(img.newsfloatleft)) { grid-template-columns:1fr;grid-template-areas:'title' 'copy'; }
body#results:has(.newsblock) #container .newsblock:not(:has(img.newsfloatleft)) > .newscontent { display:none!important; }
body#results:has(.newsblock) #container .newsblock:not(:has(img.newsfloatleft)) > .newsarticleindent { max-width:850px!important;margin:0 auto!important;padding:0 34px!important; }

/* Compact sharing area */
body#results:has(.newsblock) #container table.newsshareicons {
  width:auto!important;
  margin:28px 0 0!important;
  border:0!important;
  border-collapse:separate!important;
  border-spacing:8px 0!important;
}

body#results:has(.newsblock) #container table.newsshareicons td { width:auto!important;padding:0!important;border:0!important;background:transparent!important; }
body#results:has(.newsblock) #container table.newsshareicons a { display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:3px;border:1px solid var(--tsc-line);background:var(--tsc-pale); }
body#results:has(.newsblock) #container table.newsshareicons img { display:block!important;width:32px!important;height:32px!important;margin:0!important; }

body#results:has(.newsblock) #container .newsblock > .clearallclass { display:none!important; }
body#results:has(.newsblock) #container > .blocksurround { display:none!important; }

@media (max-width:720px) {
  body#results:has(.newsblock) > #container { width:calc(100% - 30px)!important;padding:36px 0 55px!important; }
  body#results:has(.newsblock) #container .contentfullwidth > h1.centeredonsmallscreen { font-size:2.25rem!important; }
  body#results:has(.newsblock) #container .newsblock { grid-template-columns:1fr;grid-template-areas:'title' 'image' 'copy';gap:0;padding-bottom:28px!important; }
  body#results:has(.newsblock) #container .newsblock > .articletitle { padding:22px 20px!important; }
  body#results:has(.newsblock) #container .newsblock > .newscontent { padding:0 20px 24px!important; }
  body#results:has(.newsblock) #container img.newsfloatleft { width:auto!important;max-width:100%!important;max-height:480px!important;margin:0 auto!important; }
  body#results:has(.newsblock) #container .newsblock > .newsarticleindent,
  body#results:has(.newsblock) #container .newsblock:not(:has(img.newsfloatleft)) > .newsarticleindent { max-width:none!important;margin:0!important;padding:0 20px!important; }
}

@media (prefers-reduced-motion:reduce) {
  body#results:has(.newsblock) #container *,body#results:has(.newsblock) #container *::before,body#results:has(.newsblock) #container *::after { transition:none!important; }
}