@charset "UTF-8";
/**
 * @file
 * Card Component
 */
/**
* @file
* Common dependencies for all theme stylesheets (both global and component specific)
*/
/**
* @file
* Functions
*
* Defines reusable Sass functions that perform calculations or transformations (e.g.,
* color manipulation, scaling values).
*/
/**
 * @file
 * Color functions
 */
/**
* @file
* Tier 1 - Primitive Color Variables
*
* Contains the color design tokens assigned to our aliases.
* These variables are the raw, unchanging values used to define the core visual language of the project.
*/
/**
* @file
* Convert values into rem units.
* Only `px` values are converted to rem.
* ! Use CSS variables whenever possible
* defines the base font size in a way that is understandable by Sass functions
*/
/**
* @file
* Mixins
*
* Contains imports for reusable Sass mixins that encapsulate common patterns or logic, such as
* responsive styles, vendor prefixes, or utility functions.
*/
/**
* @file
* Breakpoints
*
* Defines CSS variables for responsive design breakpoints used throughout the project.
*/
/**
* @file
* Container Mixins
*
* Contains mixins for containers that can be applied on a component level when their associated utility class is applied
*/
/**
* @file
* Container Variables
*/
/**
 * @file
 * Global typography for site
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
* @file
* Type SCSS variables for spacing system
*/
/* === Font Stacks === */
/* === Font Weights === */
/* === Letter Spacing === */
/* === Line Heights === */
/* A single line value will be used for type. The largest value was selected based on comparing between mobile and desktop. */
/* === Font Sizes === */
/* Min / Mobile */
/* Max / Desktop */
/* Font Size / Fluid Units
* Resource: Utopia Clamp Calculator
* @link https://utopia.fyi/clamp/calculator?a=320,1440,92—104|64—88|52—64|48—60|32—40|16—20
*
* viewport values from utopia clamp calculator
* values without clamp are the same for mobile and desktop
*/
/*
 Preset typography
*/
/**
* @file
* Utility Mixins
*/
/**
* @file
* Container Mixins
*
* Contains mixins for containers that can be applied on a component level when their associated utility class is applied
*/
/**
* @file
* Variables
*/
/**
* @file
* Type SCSS variables for transition durations.
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
* @file
* SCSS variables for radii
*/
/**
* @file
* Typography
*
* Defines CSS variables and styles related to typography, including font families,
* sizes, weights, line heights, and letter spacing.
*/
/**
 * @file
 * Global typography for site
*/
/**
* @file
* Z-Index
*
* Source of truth for z-index values used throughout the theme.
*/
/**
* @file
* SCSS variables for miscellaneous items
*/
/**
* @file
* Common dependencies for all theme stylesheets (both global and component specific)
*/
/**
 * Tabs/tab as seen on the search page.
 * Pattern reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role#example
 */
/**
 * Styles for "No Results" message to be displayed when 0 results are returned initiating 
 * a search from the Nav, or when 0 results are returned using filters
 */
/**
* @file
* Utility Mixins
*/
:root {
  --card-background-color: var(--surface-primary);
  --card-text-color: var(--text-primary);
}

.card {
  align-items: stretch;
  background-color: var(--card-background-color);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.card__link-overlay {
  cursor: pointer;
  inset: 0;
  position: absolute;
  z-index: 1;
}

.card__image {
  align-self: stretch;
  flex: 1 0 auto;
  overflow: hidden;
  position: relative;
}
.card__image img, .card__image picture {
  block-size: 100%;
  inline-size: auto;
  min-inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.card__content {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  padding: 0.5rem 1rem;
}
@media (min-width: 768px) {
  .card__content {
    padding: 1.5rem 1rem;
  }
}

.card__sponsored-tag {
  background-color: var(--surface-page);
  bottom: 0;
  color: var(--text-secondary);
  line-height: 1.125;
  padding: 0.75rem 1rem;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  font-family: "DM Sans", "Trebuchet MS", Geneva, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  line-height: 1.57;
}
:has(.font-loaded) .card__sponsored-tag {
  line-height: 1.57;
}

.card__title > * {
  color: var(--card-text-color);
  max-inline-size: unset;
  text-transform: unset;
  font-family: "DM Sans", "Trebuchet MS", Geneva, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  line-height: 1.5;
}
:has(.font-loaded) .card__title > * {
  line-height: 1.5;
}

.card:has(.card__content + .card__link-overlay):focus-within .card__title > *,
.card:has(.card__content + .card__link-overlay):hover .card__title > * {
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: 11.5%;
  text-underline-offset: 25%;
  text-underline-position: from-font;
}

.card-size--small {
  align-items: center;
  flex-direction: row;
  max-height: 102px;
}
.card-size--small .card__image {
  flex: 0 0 auto;
  margin-right: 0.5rem;
}
@media (min-width: 393px) {
  .card-size--small .card__image {
    margin-right: 0.75rem;
  }
}
.card-size--small .card__content {
  flex: 1 1 auto;
  padding-left: 0;
}

.card-size--small-medium,
.card-size--small-large {
  align-items: center;
  flex-direction: row;
}
.card-size--small-medium .card__image,
.card-size--small-large .card__image {
  flex: 0 0 auto;
  margin-right: 0.5rem;
}
@media (min-width: 393px) {
  .card-size--small-medium .card__image,
  .card-size--small-large .card__image {
    margin-right: 0.75rem;
  }
}
.card-size--small-medium .card__content,
.card-size--small-large .card__content {
  flex: 1 1 auto;
  padding-left: 0;
}
@media (min-width: 768px) {
  .card-size--small-medium,
  .card-size--small-large {
    align-items: stretch;
    flex-direction: column;
  }
  .card-size--small-medium .card__image,
  .card-size--small-large .card__image {
    margin-right: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .card-size--small-medium .card__content,
  .card-size--small-large .card__content {
    padding: 1.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .card-size--medium-small,
  .card-size--large-small {
    align-items: center;
    flex-direction: row;
    max-height: 102px;
  }
  .card-size--medium-small .card__image,
  .card-size--large-small .card__image {
    flex: 0 0 auto;
    margin-right: 0.75rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .card-size--medium-small .card__image,
  .card-size--large-small .card__image {
    max-inline-size: 50%;
  }
}
@media (min-width: 768px) {
  .card-size--medium-small .card__content,
  .card-size--large-small .card__content {
    flex: 1 1 auto;
    padding-left: 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .card-size--medium-small .card__content,
  .card-size--large-small .card__content {
    padding: 0.75rem 0.75rem 0.75rem 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .card-size--medium-small .card__title > *,
  .card-size--large-small .card__title > * {
    font-size: 1rem;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .card-size--medium-small .card__title > h3,
  .card-size--large-small .card__title > h3 {
    padding-block: 0.0625rem;
  }
}

.card-wrapper:has(.card-size--extra-large) {
  margin-block: 2.25rem 5rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  display: grid;
  grid-template-columns: 1fr min(78rem, 100% - 1rem * 2) 1fr;
}
.card-wrapper:has(.card-size--extra-large) > * {
  grid-column: 2;
}
@media (min-width: 768px) {
  .card-wrapper:has(.card-size--extra-large) {
    margin-block: 4.25rem 4rem;
  }
}

.card-size--extra-large {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .card-size--extra-large {
    flex-direction: row;
  }
}
.card-size--extra-large .card__image,
.card-size--extra-large .card__content {
  flex: 0 1 50%;
}
.card-size--extra-large .card__image {
  aspect-ratio: 361/203;
  display: flex;
}
@media (min-width: 768px) {
  .card-size--extra-large .card__image {
    aspect-ratio: unset;
  }
}
.card-size--extra-large .card__image img {
  height: auto;
}
@media (min-width: 768px) {
  .card-size--extra-large .card__image img {
    height: 100%;
  }
}
.card-size--extra-large .card__content {
  padding-block: 2rem;
}
@media (min-width: 768px) {
  .card-size--extra-large .card__content {
    padding-block: 4.5rem;
    padding-inline: 3.5rem;
  }
}
.card-size--extra-large .card__title > h3 {
  text-transform: uppercase;
  font-family: Knockout68, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size-adjust: cap-height 0.438;
  font-stretch: condensed;
  font-weight: 900;
  transform: scaleY(1.5);
  font-size: clamp(3.25rem, 3.0357rem + 1.0714vw, 4rem);
  line-height: 0.55;
}
:where(:has(.font-loaded)) .card-size--extra-large .card__title > h3 {
  font-size-adjust: unset;
  font-stretch: unset;
  font-weight: unset;
  transform: none;
}
:has(.font-timed-out) .card-size--extra-large .card__title > h3 {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
:has(.font-loaded) .card-size--extra-large .card__title > h3 {
  line-height: 0.83;
}
.card-size--extra-large .card__body,
.card-size--extra-large .cta-button {
  margin-block-start: 2rem;
}
.card-size--extra-large .card__body > *:not(.cta-button) {
  font-family: "DM Sans", "Trebuchet MS", Geneva, system-ui, sans-serif;
  font-size: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  line-height: 1.5;
  line-height: 1.57;
}
:has(.font-loaded) .card-size--extra-large .card__body > *:not(.cta-button) {
  line-height: 1.5;
}

@media (min-width: 768px) {
  .card--image-right.card-size--extra-large .card__image {
    order: 1;
  }
}
/*# sourceMappingURL=../maps/card/card.css.map */