@charset "UTF-8";
/**
 * HW Components — Card
 *
 * Type: Component
 * Purpose: Flexible two-section card layout container
 * Template: Card.html
 * Version: 1.0
 *
 * Features:
 * - Minimal layout container with no content-specific styling
 * - Two flexible sections (section_0 always visible, section_1 hidden when empty)
 * - Responsive layout: column on mobile, row at s2 breakpoint
 * - Container queries for responsive sizing
 * - position:relative for clickability pattern (image.card ::after covers full card)
 * - Section sizing adapts at s2 and l breakpoints
 *
 * Architecture:
 * - Card is flex container (no separate -container element)
 * - section_0: Image/media section with responsive sizing
 * - section_1: Content section with flexible sizing
 * - Empty containers: no padding, gap, or content-specific styles
 *
 * CSS Variables:
 * - Component generates layout flex values only (--hw13-card-*)
 * - Global Figma variables used for colors, motion, borders (--hw13-*)
 *
 * Note: This SCSS is the source; Card.css is the compiled artifact shipped by the extension.
 */
/**
 * Convert value to rem based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for rem conversion
 *
 * @example
 *   border-radius: hw13-rem-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1rem)
 */
/**
 * Convert value to em based on root font size
 * Necessary because Figma exports values without units
 *
 * @param {String|Number} $value - Value to convert
 * @return {String} - calc() expression for em conversion
 *
 * @example
 *   border-radius: hw13-em-convert(var(--hw13-image-border-radius));
 *   // Output: calc((var(--hw13-image-border-radius) / var(--hw13-root-font-size)) * 1em)
 */
/**
 * Convert unitless value to pixels
 *
 * @param {Number} $value - Unitless number to convert
 * @return {String} - calc() expression for px value
 *
 * @example
 *   outline-width: hw13-px-convert(var(--hw-card-border-width));
 *   // Output: calc(var(--hw-card-border-width) * 1px)
 */
/**
 * Fluid typography/spacing with clamp()
 * Supports viewport units (vw, vh) and container query units (cqi, cqh)
 *
 * @param {String} $unit - vw, vh, cqi, or cqh
 * @param {Number|String} $minSize - Minimum size (px or CSS var)
 * @param {Number|String} $maxSize - Maximum size (px or CSS var)
 * @param {Number} $minWidth - Min viewport/container width (optional, unit-specific defaults)
 * @param {Number} $maxWidth - Max viewport/container width (optional, unit-specific defaults)
 * @return {String} - clamp() calculation
 *
 * @example
 *   font-size: hw13-clamp(cqi, var(--hw-size-16), var(--hw-size-32), 20, 31);
 *   padding: hw13-clamp(vw, 1rem, 3rem);
 */
/**
 * Resolve breakpoint value (helper function for hw13-query)
 * Converts breakpoint names to actual values from $hw13-breakpoints map
 *
 * @param {String|Number} $breakpoint-value - Breakpoint name or direct value
 * @return {Number} - Resolved breakpoint value
 * @access private
 */
/**
 * Unified mixin for media queries and container queries
 * Supports breakpoint names from $hw13-breakpoints map
 *
 * @param {Map} $breakpoints - Map with "from" and/or "to" keys
 * @param {String} $type - "media" or "container"
 * @param {String} $container-name - Optional container name (for container queries)
 *
 * @example
 *   // Media query with breakpoint names
 *   @include hw13-query((from: "m", to: "l"), "media") {
 *     font-size: 2rem;
 *   }
 *
 *   // Container query with direct value
 *   @include hw13-query((from: 20rem), "container", "hw13-card") {
 *     padding: 2rem;
 *   }
 *
 *   // Range query
 *   @include hw13-query((from: "s", to: "m"), "media") {
 *     display: none;
 *   }
 */
/**
 * Recursively generate CSS custom properties from SCSS map
 * Creates --hw13-prefixed variables
 *
 * @param {Map} $map - Nested map of CSS properties
 * @param {String} $prefix - Internal prefix for recursion (don't pass manually)
 *
 * @example
 *   $css-variables: (
 *     image-card: (
 *       padding: 1rem,
 *       color: (
 *         default: red,
 *         hover: blue,
 *       ),
 *     ),
 *   );
 *
 *   @include hw13-generate-css-vars($css-variables);
 *
 *   // Generates:
 *   // --hw13-image-card-padding: 1rem;
 *   // --hw13-image-card-color-default: red;
 *   // --hw13-image-card-color-hover: blue;
 */
/**
 * Generate @font-face declarations for custom fonts
 * Supports both variable and non-variable fonts
 *
 * @param {String} $font-family - Font family name
 * @param {String} $font-folder - Folder name in fonts directory
 * @param {String} $font-name - Base font file name (without weight/style suffix)
 * @param {Map} $font-weights-styles - Map of weights to styles
 * @param {Boolean} $is-variable - Whether font is a variable font (default: false)
 *
 * @example Variable font
 *   @include hw13-font-face(
 *     "Raleway Variable",
 *     "raleway",
 *     "Raleway",
 *     (
 *       normal: (100, 900),
 *       italic: (100, 900)
 *     ),
 *     true
 *   );
 *
 * @example Non-variable font
 *   @include hw13-font-face(
 *     "Raleway",
 *     "raleway",
 *     "Raleway",
 *     (
 *       400: (normal, italic),
 *       700: (normal, italic)
 *     )
 *   );
 */
/**
 * Calculate the width of elements spanning multiple grid columns
 * Based on Figma grid with 24 columns and 23 gutters
 *
 * @param {Number} $column-span - Number of columns the element should span
 * @param {String} $grid-column-count - CSS variable for total column count (default: var(--hw13-grid-column-count))
 * @param {String} $grid-gutter - CSS variable for gutter width (default: var(--hw13-grid-width-gutter))
 * @return {String} - calc() expression for the element width
 *
 * @example
 *   // Using defaults (24 columns, standard gutter)
 *   section {
 *     flex: 0 0 hw13-grid-column-width(14);
 *   }
 *
 *   // Custom grid (12 columns, custom gutter)
 *   aside {
 *     width: hw13-grid-column-width(8, var(--custom-column-count), var(--custom-gutter));
 *   }
 *
 * Formula:
 * 1. Calculate pure column width: (100% - (gutter × (columns - 1))) / columns
 * 2. Multiply by column span
 * 3. Add back the gutters within the span: gutter × (span - 1)
 */
/**
 * HW Components — Card
 *
 * Type: Component
 * Purpose: Flexible two-section card layout container
 * Template: Card.html
 * Version: 1.0
 *
 * Features:
 * - Minimal layout container with no content-specific styling
 * - Two flexible sections (section_0 always visible, section_1 hidden when empty)
 * - Responsive layout: column on mobile, row at s2 breakpoint
 * - Container queries for responsive sizing
 * - position:relative for clickability pattern (image.card ::after covers full card)
 * - Section sizing adapts at s2 and l breakpoints
 *
 * Architecture:
 * - Card is flex container (no separate -container element)
 * - section_0: Image/media section with responsive sizing
 * - section_1: Content section with flexible sizing
 * - Empty containers: no padding, gap, or content-specific styles
 *
 * CSS Variables:
 * - Component generates layout flex values only (--hw13-card-*)
 * - Global Figma variables used for colors, motion, borders (--hw13-*)
 *
 * Note: This SCSS is the source; Card.css is the compiled artifact shipped by the extension.
 */
@layer hw13-components {
  hw13-card {
    --hw13-card-section-1-flex: initial;
    --hw13-card-border-radius: calc(var(--hw13-border-radius-default) / var(--hw13-root-font-size) * 1rem);
    --hw13-card-container-grid-width-image: 0.4fr;
    --hw13-card-container-grid-width-content: 0.6fr;
  }
  hw13-card {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--hw13-card-color-default-background);
    container-type: inline-size;
    container-name: hw13-card;
    border: var(--hw13-card-border-width) solid var(--hw13-card-color-default-border);
    border-top-left-radius: calc(var(--hw13-card-border-radius-top-left) / var(--hw13-root-font-size) * 1rem);
    border-top-right-radius: calc(var(--hw13-card-border-radius-top-right) / var(--hw13-root-font-size) * 1rem);
    border-bottom-right-radius: calc(var(--hw13-card-border-radius-bottom-right) / var(--hw13-root-font-size) * 1rem);
    border-bottom-left-radius: calc(var(--hw13-card-border-radius-bottom-left) / var(--hw13-root-font-size) * 1rem);
    border: calc(var(--hw13-size-2) * 1px) solid var(--hw13-color-black-15);
    transition-property: background-color, border-color;
    transition-duration: var(--hw13-motion-duration-normal);
    transition-timing-function: var(--hw13-motion-timing-function);
  }
  hw13-card h1,
  hw13-card h2,
  hw13-card h3,
  hw13-card h4 {
    color: var(--hw13-card-color-default-title);
    font-family: var(--hw13-card-font-family-title);
    font-size: var(--hw13-card-font-size-title);
    font-weight: var(--hw13-card-font-weight-title);
  }
  hw13-card p {
    color: var(--hw13-card-color-default-text);
    font-family: var(--hw13-card-font-family-text);
    font-size: var(--hw13-card-font-size-text);
    font-weight: var(--hw13-card-font-weight-text);
  }
  hw13-card time {
    color: var(--hw13-card-color-default-date);
    font-family: var(--hw13-card-font-family-date);
    font-size: var(--hw13-card-font-size-date);
    font-weight: var(--hw13-card-font-weight-date);
  }
  hw13-card:not(:has(a)) {
    cursor: default;
  }
  hw13-card:hover, hw13-card:has(:focus-visible) {
    background-color: var(--hw13-card-color-hover-background);
    border-color: var(--hw13-card-color-hover-border);
  }
  hw13-card:hover h1,
  hw13-card:hover h2,
  hw13-card:hover h3,
  hw13-card:hover h4, hw13-card:has(:focus-visible) h1,
  hw13-card:has(:focus-visible) h2,
  hw13-card:has(:focus-visible) h3,
  hw13-card:has(:focus-visible) h4 {
    color: var(--hw13-card-color-hover-title);
  }
  hw13-card:hover p, hw13-card:has(:focus-visible) p {
    color: var(--hw13-card-color-hover-text);
  }
  hw13-card:hover time, hw13-card:has(:focus-visible) time {
    color: var(--hw13-card-color-hover-date);
  }
  hw13-card:has(hw13-card-section:first-child:last-child a) a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  hw13-card hw13-slideblock {
    --hw13-slideblock-padding-top: var(--hw13-size-24);
    --hw13-slideblock-padding-bottom: var(--hw13-size-24);
    --hw13-slideblock-padding-left: var(--hw13-size-24);
    --hw13-slideblock-padding-right: var(--hw13-size-24);
  }
  hw13-card-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: calc(var(--hw13-card-content-gap) / var(--hw13-root-font-size) * 1rem);
  }
  @container hw13-card (width >= 40rem) {
    hw13-card-container:has(> hw13-card-section > hw13-image) {
      display: grid;
      column-gap: 0;
    }
    hw13-card-container:has(> hw13-card-section > hw13-image):has(> :nth-child(2):last-child) {
      grid-template-rows: repeat(0, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section > hw13-image):has(> :nth-child(3):last-child) {
      grid-template-rows: repeat(1, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section > hw13-image):has(> :nth-child(4):last-child) {
      grid-template-rows: repeat(2, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section > hw13-image):has(> :nth-child(5):last-child) {
      grid-template-rows: repeat(3, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section > hw13-image):has(> :nth-child(6):last-child) {
      grid-template-rows: repeat(4, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:first-of-type > hw13-image) {
      grid-template-columns: var(--hw13-card-container-grid-width-image) var(--hw13-card-container-grid-width-content);
    }
    hw13-card-container:has(> hw13-card-section:first-of-type > hw13-image) hw13-card-section:first-of-type + hw13-card-section {
      padding-top: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-top) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-top) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
    }
    hw13-card-container:has(> hw13-card-section:first-of-type > hw13-image) hw13-card-section[data-slot=section_2], hw13-card-container:not(:has(> hw13-card-section > hw13-image)) hw13-card-section[data-slot=section_2] {
      flex-flow: row wrap;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image) {
      grid-template-columns: var(--hw13-card-container-grid-width-content) var(--hw13-card-container-grid-width-image);
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image):has(> :nth-child(2):last-child) {
      grid-template-rows: repeat(0, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image):has(> :nth-child(3):last-child) {
      grid-template-rows: repeat(1, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image):has(> :nth-child(4):last-child) {
      grid-template-rows: repeat(2, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image):has(> :nth-child(5):last-child) {
      grid-template-rows: repeat(3, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image):has(> :nth-child(6):last-child) {
      grid-template-rows: repeat(4, auto) 1fr;
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image) hw13-card-section:has(+ hw13-card-section:last-of-type) {
      padding-bottom: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-bottom) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-bottom) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
    }
    hw13-card-container:has(> hw13-card-section:last-of-type > hw13-image) hw13-card-section[data-slot=section_1] {
      flex-flow: row wrap;
    }
  }
  @container hw13-card (width < 40rem) {
    hw13-card-container hw13-image {
      max-height: 25rem;
    }
  }
  @container hw13-card (width >= 64rem) {
    hw13-card-container {
      --hw13-card-container-grid-width-image: 3fr;
      --hw13-card-container-grid-width-content: 7fr;
    }
  }
  hw13-card-container a,
  hw13-card-container button:not(hw13-tag-list-button button) {
    position: initial;
  }
  hw13-card-section:not(:has(> hw13-image:first-child)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--hw13-card-content-elements-gap) / var(--hw13-root-font-size) * 1rem);
    padding-right: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-right) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-right) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
    padding-left: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-left) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-left) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
  }
  hw13-card-section:first-of-type:not(:has(> hw13-image)) {
    padding-top: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-top) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-top) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
  }
  hw13-card-section:has(+ hw13-card-section:last-of-type > hw13-image) {
    padding-bottom: calc(calc(var(--hw13-card-content-padding-bottom) - var(--hw13-card-content-gap)) / var(--hw13-root-font-size) * 1rem);
  }
  hw13-card-section:last-of-type:not(:has(> hw13-image)) {
    padding-bottom: calc(clamp(calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)), calc(calc(var(--hw13-size-16) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16)) + calc((calc(var(--hw13-card-content-padding-bottom) / 16) - calc(var(--hw13-size-16) / 16)) * (100vw - calc(var(--hw13-clamp-width-min, 20) * 1rem / (var(--hw13-root-font-size, 16) / 16))) / (var(--hw13-clamp-width-max, 108) - var(--hw13-clamp-width-min, 20))), calc(calc(var(--hw13-card-content-padding-bottom) / 16) * 1rem / (var(--hw13-root-font-size, 16) / 16))) * (var(--hw13-root-font-size, 16) / 16));
  }
  hw13-card-section:last-of-type:has(hw13-button:first-child:last-child) {
    margin-top: auto;
  }
  hw13-card-section:first-of-type:has(> hw13-image) {
    flex: 0 0 auto;
  }
  @container hw13-card (width >= 40rem) {
    hw13-card-section:first-of-type:has(> hw13-image) {
      grid-column: 1;
      grid-row: 1/-1;
    }
  }
  @container hw13-card (width >= 40rem) {}
  hw13-card-section:last-of-type:has(> hw13-image) {
    flex: 0 0 auto;
  }
  @container hw13-card (width >= 40rem) {
    hw13-card-section:last-of-type:has(> hw13-image) {
      grid-column: 2;
      grid-row: 1/-1;
    }
  }
  hw13-card-section[data-slot=section_0] hw13-image {
    --hw13-image-border-radius-bottom-left: 0;
    --hw13-image-border-radius-bottom-right: 0;
  }
  @container hw13-card (width >= 40rem) {
    hw13-card-section[data-slot=section_0] hw13-image {
      --hw13-image-border-radius-top-left: 0;
      --hw13-image-border-radius-top-right: 0;
    }
  }
  hw13-card-section[data-slot=section_1] {
    flex: var(--hw13-card-section-1-flex);
  }
  hw13-card-section[data-slot=section_1]:not(:has(*)) {
    display: none;
  }
  hw13-card-section[data-slot=section_2]:not(:has(*)) {
    display: none;
  }
  hw13-card-section:last-of-type hw13-image {
    --hw13-image-border-radius-top-left: 0;
    --hw13-image-border-radius-top-right: 0;
  }
  @container hw13-card (width >= 40rem) {
    hw13-card-section:last-of-type hw13-image {
      --hw13-image-border-radius-bottom-left: 0;
      --hw13-image-border-radius-bottom-right: 0;
    }
  }
}
@layer hw13-components {}

/*# sourceMappingURL=Card.css.map */