/* BLOCKS */


/* Block heading: icon tile + title, used by the newsletter CTA */

.block-heading {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.block-heading-icon {
  align-items: center;
  border: 1px solid var(--color-titles);
  color: var(--color-titles);
  display: inline-flex;
  flex-shrink: 0;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.block-heading-title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0;
}

.block-intro {
  color: var(--color-lighter);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* Newsletter blocks share .newsletter-cta: "The Unhyd Brief" on the homepage (subscribe-cta.hbs,
   copy from the newsletter-cta page) and "Already subscribed?" on the Newsletters page
   (newsletters/manage-panel.hbs, which narrows it in mews-newsletters.css).
   This is the homepage layout, after unhyd.com's block: a full-width box with the copy at most
   28rem wide and the form taking the rest, side by side from 960px, stacked below. */

.newsletter-cta-inner {
  align-items: center;
  border: 1px solid var(--color-lightest);
  display: grid;
  gap: 2rem 4rem;
  padding: 3.5rem;
}

@media (min-width: 960px) {
  .newsletter-cta-inner {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  }
}

/* A shade darker than other intros, between --color-lighter and the body text, in both schemes */
.newsletter-cta-copy .block-intro {
  color: color-mix(in srgb, var(--color-lighter) 55%, var(--color-body-text));
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* The form itself: .nl-form--inline in mews-newsletters.css */

@media (max-width: 719.98px) {
  .newsletter-cta-inner {
    padding: 2rem 1.5rem;
  }

  .block-heading-title {
    font-size: 1.5rem;
  }
}


/* Feature Grid Block */

.feature-grid > .container > .row > .col:nth-child(2) {
  border-left: 1px solid var(--color-lightest);
  border-right: 1px solid var(--color-lightest);
}

.feature-grid > .container > .row > .col:nth-child(1) > .row > .col:nth-child(1) .snippet:after,
.feature-grid-alt .col.left > .row > .col > .row > .col:not(:last-child) .snippet:after {
  background-color: var(--color-lightest);
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  right: 0; bottom: -0.75rem; left: 0;
}

.feature-grid > .container > .row > .col:nth-child(1),
.feature-grid > .container > .row > .col:nth-child(3) {
  width: 25%;
}

.feature-grid > .container > .row > .col:nth-child(2) {
  width: 50%;
}

.feature-grid .col-latest .row {
  margin-bottom: -1rem;
}

.feature-grid .col-latest .col {
  margin-bottom: 1rem;
}

.feature-grid .snippet.sm {
  border-top: 1px solid var(--color-lightest);
  padding-top: 1rem;
}

.col-feature-grid-lg h2.text-xxl.mb-075rem {
  font-size: 3rem;
  margin-bottom: 1rem!important;
}

@media (min-width: 480px) {
  .col-feature-grid-lg .snippet {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .col-feature-grid-lg .snippet > div {
    flex-grow: 1;
  }
}


/* Feature Grid Alt Block */

.feature-grid-alt.is-top {
  order: 1;
}

.feature-grid-alt .col.left {
  width: 50%;
}

.feature-grid-alt .col.left > .row > .col {
  border-right: 1px solid var(--color-lightest);
  width: 50%;
}

.feature-grid-alt .col.right {
  height: calc(100vh - 4rem);
  height: calc(100svh - 4rem);
  padding-left: 2rem;
  position: sticky;
  top: 2rem;
  transition: 0.3s ease-out;
  width: 50%;
}

body.nav-visible .feature-grid-alt .col.right {
  height: calc(100vh - var(--navbar-compact-height) - 4rem);
  height: calc(100svh - var(--navbar-compact-height) - 4rem);
  top: calc(var(--navbar-compact-height) + 2rem);
}

.feature-grid-alt .col.right :is(picture,video) {
  inset: 0;
}

.feature-grid-alt .col.right .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 3rem;
}

.feature-grid-alt .col.right h2 {
  position: relative;
  z-index: 2;
}

.feature-grid-alt .col.right h2:hover {
  text-decoration: underline;
}


/* Snippets Block */

.snippets .col {
  width: 25%;
}

.snippets-title {
  border-top: 1px solid var(--color-lightest);
  border-bottom: 1px solid var(--color-lightest);
  padding: 1rem 0;
  width: 100%;
}


/* Featured Slider */

.featured-slider-block .snippets-title svg {
  cursor: pointer;
  height: 1.5rem;
  margin-left: 0.75rem;
  min-width: 1.5rem;
  width: 1.5rem;
}

.featured-slider .flickity-viewport {
  overflow: visible;
}

.featured-slider .carousel-cell {
  margin-right: 2rem;
  width: calc(33.33333% - 1.5rem);
}

.featured-slider.text-over .carousel-cell {
  width: 40%;
}

.featured-slider.text-over .carousel-cell > div {
  aspect-ratio: 4/3;
}

.featured-slider .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 1.5rem;
}

.featured-slider .inner > div {
  max-width: 75%;
}

.featured-slider-prev path, .featured-slider-next path {
  fill: var(--color-titles);
  transition: 0.15s ease-out;
}

.featured-slider-prev.disabled path, .featured-slider-next.disabled path {
  fill: var(--color-lightest);
}

.featured-slider-prev.disabled, .featured-slider-next.disabled {
  cursor: unset;
  pointer-events: none;
}

.featured-slider.text-over h2 {
  position: relative;
  z-index: 2;
}


/* Featured Posts */

.block.featured-text-below.is-slider,
.block.featured-text-over.is-slider, 
.block.featured-two-col.is-slider {
  padding-bottom: calc(3rem - 8px);
}

.featured-text-over .outer, 
.featured-text-below :is(picture,video) {
  aspect-ratio: 16/9;
}

.featured-text-over h2,
.featured-two-col h2 {
  position: relative;
  z-index: 2;
}

.featured-text-over h2:hover,
.featured-two-col h2:hover {
  text-decoration: underline;
}

.featured-two-col .flickity-slider {
  display: flex;
}

.featured-two-col .carousel-cell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.featured-two-col .carousel-cell:after {
  background-color: var(--color-body-bg);
  content: '';
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
}

.featured-two-col .outer {
  border: 1px solid var(--color-lightest);
}

.featured-two-col .row {
  align-items: stretch;
  flex-grow: 1;
  margin-left: 0;
  margin-right: 0;
}

.featured-two-col .col {
  padding: 0;
  width: 50%;
}

.featured-two-col.right .col:nth-child(1) {
  order: 2;
}

.featured-two-col .col:nth-child(2) > div {
  padding: 3rem 5rem;
}

.featured-text-over .inner {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%);
  padding: 3rem;
}

.featured-text-over .inner > * {
  max-width: 66.666666%;
}


/* Media Queries */

/* 1200px */
@media (max-width: 1199.98px) {
  .feature-grid > .row > .col:nth-child(3) .col:nth-child(6) {display: none;}
  .featured-slider .inner > div {max-width: 100%;}
  .featured-text-over .inner > * {max-width: 75%;}
  .featured-two-col .col:nth-child(2) > div {padding: 3rem;}
}

/* 960px */
@media (max-width: 959.98px) {
  .feature-grid > .container > .row > .col:nth-child(1) {width: 33.33333%;}
  .feature-grid > .container > .row > .col:nth-child(2) {border-right: none; width: 66.666666%;}
  .feature-grid > .container > .row > .col:nth-child(3) {width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 33.33333%;}
  .feature-grid > .container > .row > .col:nth-child(3) > h2 {border-top: 1px solid var(--color-lightest); padding-top: 1rem;}
  .feature-grid > .container > .row > .col:nth-child(3) .col:nth-child(6) {display: block;}
  .snippets .col {width: 50%;}
  .featured-slider .carousel-cell {width: calc(50% - 1rem);}
  .featured-slider.text-over .carousel-cell {width: 60%;}
  .featured-text-over .outer, .featured-text-below :is(picture,video), .featured-text-below .snippet-no-img, .feature-grid-alt .col.right {aspect-ratio: 1/1;}
  .featured-text-over .inner > * {max-width: 100%;}
  .featured-two-col .col:nth-child(2) > div {padding: 1.5rem;}
  .feature-grid-alt .col.left {order: 2; width: 100%;}
  .feature-grid-alt .col.right {padding-left: 1rem; order: 1; width: 100%;}
  .feature-grid-alt .col.left > .row > .col:last-child {border-right: none;}
  .feature-grid-alt .col.right, body.nav-visible .feature-grid-alt .col.right {height: unset;position: relative; top: unset;}
}

/* 720px */
@media (max-width: 719.98px) {
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 50%;}
  .col-feature-grid-lg h2.text-xxl.mb-075rem, .feature-grid-alt .col.right h2, .featured-text-over h2 {font-size: 2rem;}
  .feature-grid-alt .col.right {padding-left: 0.5rem;}
  .featured-slider .carousel-cell {margin-right: 1rem; width: calc(50% - 0.5rem);}
  .featured-slider.text-over .carousel-cell {width: 75%;}
  .featured-slider.text-over .carousel-cell > div {aspect-ratio: 4/3;}
  .featured-two-col h2 {font-size: 1.25rem;}
}

/* 480px */
@media (max-width: 479.98px) {
  .feature-grid > .container > .row > .col:nth-child(1) {order: 2; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(1) .col {width: 50%;}
  .feature-grid > .container > .row > .col:nth-child(1) > .row > .col:nth-child(1) .snippet:after {display: none;}
  .feature-grid > .container > .row > .col:nth-child(2) {border-left: none; order: 1; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) {order: 3; width: 100%;}
  .feature-grid > .container > .row > .col:nth-child(3) .col {width: 100%;}
  .snippet h2.text-xxl {font-size: 1.0625rem;}
  .featured-slider.text-over .carousel-cell > div {aspect-ratio: 3/4;}
  .featured-text-over .outer, .featured-text-below :is(picture, video), .featured-text-below .snippet-no-img, .feature-grid-alt .col.right {aspect-ratio: 3/4;}
  .featured-text-over .inner, .feature-grid-alt .col.right .inner {padding: 1.5rem;}
  .featured-two-col .col:nth-child(2) > div {padding: 1rem;}
}