/*
 * Education Futures additions for the Editorial theme.
 * Kept separate from the generated theme stylesheet so upstream theme updates
 * remain easy to compare and adopt.
 */

.home-template .hero__title {
   font-size: clamp(2rem, 1.35rem + 2.5vw, 4.35rem);
   line-height: 1.05;
   margin-top: 0;
   overflow-wrap: anywhere;
}

.home-template .hero__text > p {
   max-width: 42rem;
}

.home-template .hero__text .author__name {
   font-weight: var(--font-weight-bold);
   font-variation-settings: "wght" var(--font-weight-bold);
}

.home-template .hero__nav-prev svg,
.home-template .hero__nav-next svg {
   fill: var(--link-color);
}

.home-template .hero__nav-prev:hover svg,
.home-template .hero__nav-prev:focus svg,
.home-template .hero__nav-next:hover svg,
.home-template .hero__nav-next:focus svg {
   fill: var(--link-color-hover);
}

.home-template .hero__nav-prev:focus-visible,
.home-template .hero__nav-next:focus-visible {
   outline: 2px solid var(--link-color);
   outline-offset: 0.35rem;
}

.ef-intro {
   background: var(--contrast-section-bg);
   padding: clamp(3.5rem, 5.25vw, 5.75rem) 0;
}

.ef-intro__inner {
   display: grid;
   gap: clamp(3rem, 7vw, 7rem);
}

.ef-intro__statement {
   align-self: start;
}

.ef-eyebrow {
   color: var(--text-color-lightest);
   font-family: var(--body-font);
   font-size: 0.72rem;
   font-variation-settings: "wght" var(--font-weight-bold);
   letter-spacing: 0.12em;
   margin: 0 0 1.15rem;
   text-transform: uppercase;
}

.home-template .ef-intro .ef-eyebrow {
   color: var(--text-color-lighter);
}

.ef-intro__statement h1 {
   font-size: clamp(2.15rem, 1.55rem + 2.2vw, 4rem);
   line-height: 1.08;
   margin: 0;
   max-width: 18ch;
}

.ef-intro__lede {
   font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
   line-height: 1.65;
   margin: 1.7rem 0 0;
   max-width: 39rem;
}

.ef-intro__actions {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem 1.7rem;
   margin-top: 2.3rem;
}

.ef-text-link {
   border-bottom: 1px solid currentColor;
   font-size: 0.9rem;
   padding-bottom: 0.18rem;
}

.ef-intro__pathways {
   border-top: 1px solid var(--border-color-darker);
   border-top-color: color-mix(
      in srgb,
      var(--border-color-darker) 78%,
      var(--text-color-normal)
   );
}

.ef-intro__pathways > .ef-eyebrow {
   margin: 1.2rem 0 0.4rem;
}

.ef-pathway {
   align-items: center;
   border-bottom: 1px solid var(--border-color-darker);
   border-bottom-color: color-mix(
      in srgb,
      var(--border-color-darker) 78%,
      var(--text-color-normal)
   );
   color: var(--text-color-normal);
   display: grid;
   gap: 0.25rem 1.2rem;
   grid-template-columns: minmax(0, 1fr) auto;
   padding: 1.25rem 0;
   position: relative;
}

.ef-pathway__title {
   font-family: var(--heading-font);
   font-size: clamp(1.12rem, 1.02rem + 0.35vw, 1.35rem);
   font-weight: var(--font-weight-bold);
   font-variation-settings: "wght" var(--font-weight-bold);
   line-height: 1.25;
}

.ef-pathway__description {
   color: var(--text-color-lighter);
   font-size: 0.82rem;
   grid-column: 1;
   line-height: 1.5;
   max-width: 38rem;
}

.ef-pathway__arrow {
   font-size: 1.5rem;
   grid-column: 2;
   grid-row: 1 / span 2;
   transition: transform 0.2s ease;
}

.ef-pathway:hover .ef-pathway__arrow,
.ef-pathway:focus .ef-pathway__arrow {
   transform: translateX(0.35rem);
}

.ef-pathway:hover,
.ef-pathway:focus {
   color: var(--link-color);
}

.latest .feed__inner {
   position: relative;
}

.ef-latest__more {
   border-top: 1px solid var(--border-color-lighter);
   grid-column: 1 / -1;
   margin-top: 3.4rem;
   padding-top: 1.7rem;
}

.ef-featured {
   background: var(--background);
   border-bottom: 1px solid var(--border-color-lighter);
   padding-bottom: clamp(4rem, 6vw, 6rem);
}

.ef-featured .section__title,
.home-template .latest .section__title {
   color: var(--headings-color);
}

.ef-featured .section__title::before,
.home-template .latest .section__title::before {
   content: none;
}

.ef-featured .feed__author {
   color: var(--text-color-lighter);
}

.ef-featured .feed__author:hover,
.ef-featured .feed__author:focus {
   color: var(--link-color);
}

.ef-featured .feed__text h3 a,
.ef-featured .feed__list h3 a {
   color: var(--text-color-normal);
}

.ef-featured .feed__text h3 a:hover,
.ef-featured .feed__text h3 a:focus,
.ef-featured .feed__list h3 a:hover,
.ef-featured .feed__list h3 a:focus {
   color: var(--link-color);
}

.ef-page-hero {
   background: var(--contrast-section-bg);
   border-bottom: 1px solid var(--contrast-section-border-color);
   padding: clamp(3.75rem, 6vw, 6.5rem) 0;
}

.ef-page-hero__inner {
   align-items: center;
   display: grid;
   gap: clamp(2.75rem, 6vw, 6rem);
}

.ef-page-hero__title {
   font-size: clamp(2.65rem, 1.8rem + 3.2vw, 5.25rem);
   line-height: 1.02;
   margin: 0;
   max-width: 14ch;
}

.ef-page-hero:not(.has-image) .ef-page-hero__title {
   font-size: clamp(2.55rem, 1.85rem + 2.65vw, 4.75rem);
   max-width: 26ch;
}

.ef-page-hero:not(.has-image) {
   padding-bottom: clamp(3.5rem, 5vw, 5.5rem);
   padding-top: clamp(3.5rem, 5vw, 5.5rem);
}

.ef-page-hero__lede,
.ef-page-canvas__lede {
   font-family: var(--body-font);
   font-size: clamp(1.08rem, 1rem + 0.42vw, 1.35rem);
   line-height: 1.6;
   margin-top: 1.7rem;
   max-width: 44rem;
}

.ef-page-hero__lede > :first-child,
.ef-page-canvas__lede > :first-child {
   margin-top: 0;
}

.ef-page-hero__image {
   aspect-ratio: 4 / 3;
   background: var(--lighter);
   margin: 0;
   overflow: hidden;
   position: relative;
}

.ef-page-hero__image img {
   height: 100%;
   object-fit: cover;
   width: 100%;
}

.ef-page-hero__image figcaption,
.ef-page-canvas__image figcaption {
   background: var(--background);
   bottom: 0.85rem;
   color: var(--text-color-lighter);
   font-size: 0.78rem;
   left: 0.85rem;
   margin: 0;
   max-width: calc(100% - 1.7rem);
   padding: 0.35rem 0.55rem;
   position: absolute;
}

.ef-page-body,
.ef-page-canvas__body {
   padding: clamp(3.75rem, 6vw, 6.5rem) 0;
}

.ef-page__entry {
   margin-top: 0;
   width: 100%;
}

.ef-page__entry--narrative {
   margin-left: auto;
   margin-right: auto;
   max-width: 68rem;
}

.ef-page__entry--narrative > :is(
      p,
      ul,
      ol,
      dl,
      h2,
      h3,
      h4,
      h5,
      h6,
      blockquote,
      pre,
      hr
   ) {
   margin-left: auto;
   margin-right: auto;
   max-width: 48rem;
}

.ef-page__entry--narrative > ul,
.ef-page__entry--narrative > ol {
   padding-left: 2rem;
}

.ef-page__entry--narrative h2,
.ef-page__entry--narrative h3 {
   font-family: var(--heading-font);
   font-weight: var(--headings-weight);
   font-variation-settings: "wght" var(--headings-weight);
}

.ef-page__entry--narrative > :is(
      figure,
      .gallery-wrapper,
      .gallery,
      table,
      iframe,
      video
   ) {
   margin-left: auto;
   margin-right: auto;
   max-width: 68rem;
   width: 100%;
}

.ef-page__subpages {
   margin: clamp(3.5rem, 6vw, 6rem) auto 0;
   max-width: 68rem;
}

.ef-page-canvas__header {
   background: var(--contrast-section-bg);
   border-bottom: 1px solid var(--contrast-section-border-color);
   padding: clamp(3.5rem, 5vw, 5.5rem) 0;
}

.ef-page-canvas__title {
   font-size: clamp(2.5rem, 1.8rem + 2.65vw, 4.75rem);
   line-height: 1.04;
   margin: 0;
   max-width: 20ch;
}

.ef-page-canvas__image {
   background: var(--lighter);
   height: clamp(20rem, 55vw, 44rem);
   margin: 0;
   overflow: hidden;
   position: relative;
   width: 100%;
}

.ef-page-canvas__image img {
   height: 100%;
   object-fit: cover;
   width: 100%;
}

.ef-page__entry--canvas {
   max-width: none;
}

.ef-page__entry--canvas > :first-child {
   margin-top: 0;
}

.ef-resources__hero {
   background: var(--contrast-section-bg);
   color: var(--contrast-section-text-color);
   padding: clamp(4rem, 7vw, 7.5rem) 0;
}

.ef-resources__hero .ef-eyebrow {
   color: var(--contrast-section-text-color);
}

.ef-resources__hero h1 {
   color: var(--contrast-section-link-color);
   font-size: clamp(2.7rem, 1.75rem + 3.2vw, 5.5rem);
   line-height: 0.98;
   margin: 0;
   max-width: 11ch;
}

.ef-resources__hero-inner {
   display: grid;
   gap: clamp(3rem, 7vw, 7rem);
}

.ef-resources__lede {
   font-size: clamp(1.05rem, 0.97rem + 0.35vw, 1.3rem);
   line-height: 1.6;
   margin-top: 1.7rem;
   max-width: 42rem;
}

.ef-resources__lede:empty {
   display: none;
}

.ef-resources__lede p {
   margin: 0;
}

.ef-resources__nav {
   border-top: 1px solid var(--contrast-section-border-color);
   display: none;
}

.ef-resources__nav.is-ready {
   display: block;
}

.ef-resources__nav .ef-eyebrow {
   margin: 1.2rem 0 0.4rem;
}

.ef-resources__nav a {
   border-bottom: 1px solid var(--contrast-section-border-color);
   color: var(--contrast-section-link-color);
   display: block;
   font-size: 0.88rem;
   line-height: 1.35;
   padding: 0.8rem 1.4rem 0.8rem 0;
   position: relative;
}

.ef-resources__nav a::after {
   content: "\2193";
   position: absolute;
   right: 0;
   top: 0.8rem;
}

.ef-resources__content {
   font-family: var(--body-font);
   margin: 0;
   max-width: none;
}

.ef-resources__introduction {
   display: grid;
   font-family: var(--post-entry-font);
   font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem);
   gap: 1.4rem clamp(2rem, 5vw, 5rem);
   line-height: 1.7;
   padding: clamp(3.5rem, 6vw, 6rem) 0;
}

.ef-resources__introduction p {
   margin: 0;
}

.ef-resource-section {
   border-top: 1px solid var(--border-color-darker);
   padding: clamp(3.5rem, 6vw, 6rem) 0;
   scroll-margin-top: 2rem;
}

.ef-resource-section__header {
   display: grid;
   gap: 1rem clamp(2rem, 5vw, 5rem);
   margin-bottom: clamp(2.25rem, 4vw, 4rem);
}

.ef-resource-section__header h2 {
   font-family: var(--heading-font);
   font-size: clamp(2rem, 1.6rem + 1.4vw, 3.25rem);
   font-variation-settings: "wght" var(--font-weight-bold);
   line-height: 1.08;
   margin: 0;
}

.ef-resource-section__header p {
   color: var(--text-color-lightest);
   font-size: 0.95rem;
   line-height: 1.6;
   margin: 0;
}

.ef-resource-section__grid {
   display: grid;
   gap: 1.25rem;
}

.ef-resource-card {
   background: var(--lighter);
   border-top: 3px solid var(--link-color);
   display: flex;
   flex-direction: column;
   padding: clamp(1.4rem, 2.5vw, 2.2rem);
}

.ef-resource-card h4 {
   font-family: var(--heading-font);
   font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.48rem);
   line-height: 1.28;
   margin: 0 0 1.15rem;
}

.ef-resource-card h4 a {
   text-decoration: none;
}

.ef-resource-card p {
   font-size: 0.92rem;
   line-height: 1.62;
   margin: 0 0 1rem;
}

.ef-resource-card p:last-child {
   border-top: 1px solid var(--border-color-lighter);
   color: var(--text-color-lightest);
   font-size: 0.82rem;
   margin: auto 0 0;
   padding-top: 1rem;
}

.ef-resource-card p:last-child a {
   color: var(--link-color);
   font-variation-settings: "wght" var(--font-weight-bold);
}

.ef-resource-section__body {
   font-family: var(--post-entry-font);
   line-height: 1.7;
   max-width: 54rem;
}

.ef-resource-section__body > :first-child {
   margin-top: 0;
}

@media all and (min-width: 56.25em) {
   .home-template .hero__inner,
   .home-template .hero__content {
      height: calc(clamp(31rem, 59vh, 36rem) + 5.1rem);
   }

   .home-template .hero__text {
      padding-bottom: 4.2rem;
      padding-top: 4.2rem;
   }

   .ef-intro__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
   }

   .ef-page-hero.has-image .ef-page-hero__inner {
      grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
   }

   .ef-resources__hero-inner {
      align-items: end;
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.38fr);
   }

   .ef-resources__introduction,
   .ef-resource-section__header {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.75fr);
   }

   .ef-resource-section__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media all and (min-width: 75em) {
   .ef-featured .editor-picks__feed {
      column-gap: clamp(3.25rem, 4.5vw, 4rem);
      grid-template-columns:
         minmax(20rem, 1.25fr)
         minmax(18rem, 1.1fr)
         minmax(15rem, 0.9fr);
   }
}

@media all and (max-width: 56.1875em) {
   .home-template .hero__text {
      padding-bottom: 2rem;
   }

   .home-template .hero__nav {
      height: 4rem;
   }

}

@media (prefers-reduced-motion: reduce) {
   .ef-pathway__arrow {
      transition: none;
   }
}