{"version":3,"sourceRoot":null,"mappings":"ACKA,6fAcE,yBAAkB,ggBA4BpB,0CAIA,0CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,8CAIA,8CAKA,8CAIA,gDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,oDAIA,sDAKA,6CAIA,6CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,iDAIA,iDAKA,iDAIA,mDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,uDAIA,yDDpPA,kdAgBE,+EAKA,gMAeE,uCAA0C,gKAM1C,0DAA+D,gEAK/D,0DAA+D,qGAM/D,qGAIA,6GAIA,kHAIA,+HAKE,yGAKF,mFASF,wCACE,qHAKE,uIAAA,sIAMA,oIAWF,wIAOA,uFAMA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/fullwidth-card.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/../spacing/spacing.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/../spacing/../_custom-media.css"],"sourcesContent":["@import url(\"../spacing/spacing.css\");\n\n.hds-card.hds-card--full-width {\n  /* Basic sizing for fullwidth cards: */\n  --hds-fullwidthcard-min-height: 400px;\n  --hds-fullwidthcard-content-min-height: calc(\n    var(--hds-fullwidthcard-min-height) - 2 * var(--hds-spacing-20-24)\n  );\n  --hds-fullwidthcard-image-aspect-mini: 100 / 155;\n  --hds-fullwidthcard-image-maxheight-small: 420px;\n  --hds-fullwidthcard-image-maxheight-medium: 650px;\n  --hds-fullwidthcard-image-height-small: 300px;\n  --hds-fullwidthcard-image-height-medium: 600px;\n\n  max-width: inherit;\n  container-type: inline-size;\n  container-name: fullwidthcard;\n\n  .hds-card__layoutwrapper {\n    height: 100%;\n    width: 100%;\n  }\n\n  .hds-card__media {\n    overflow: hidden;\n    position: relative;\n    border-radius: var(--hds-border-radius-8);\n    max-height: var(--hds-fullwidthcard-image-maxheight-small);\n    width: 100%;\n\n    /*  Responsivity: different card layouts and content/images sizes, while still displaying as much as the image as\n     *  possible and trying to keep focus on the middle, .hds-card__media is displayed in particular ways on\n     *  particular viewport widths, but always filling the available width (which below 800px is the full width of the\n     *  card minus padding, and above 800px is only half the width of the card):\n     *\n     **/\n\n    /* Narrowest: fixed aspect ratio (portrait: height is 1.5 times the width). */\n    @container fullwidthcard (width < 300px) {\n      aspect-ratio: var(--hds-fullwidthcard-image-aspect-mini);\n      max-height: var(--hds-fullwidthcard-image-height-small);\n    }\n\n    /* Middle narrow: fixed aspect ratio (quare format), variable height */\n    @container fullwidthcard (width >= 300px) and (width < 648px) {\n      aspect-ratio: 1;\n    }\n\n    /* \"Widest\" of the narrow card layouts: fixed image height (but higher now) */\n    @container fullwidthcard (width >= 648px) and (width < 800px) {\n      height: var(--hds-fullwidthcard-image-height-medium);\n    }\n  }\n\n  .hds-card__body {\n    .hds-card__centerbody {\n      margin: var(--hds-spacing-32-40);\n    }\n\n    .hds-card__body-header {\n      margin-bottom: var(--hds-spacing-20-24);\n    }\n\n    .hds-card__body-description {\n      margin-bottom: var(--hds-spacing-20-24);\n    }\n\n    .hds-card__body-action-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--hds-spacing-8);\n\n      .hds-button {\n        white-space: nowrap;\n      }\n    }\n\n    .hds-card__body-action {\n      margin-top: 0;\n    }\n  }\n\n  /*  Wide layout: image to the left or right of the text. Image height is at least 400px high, but scales up if the\n   *  body text is higher. Image has a max height if the text is huge, limiting the aspect ratio of the image.\n   *\n   **/\n  @container fullwidthcard (width >= 800px) {\n    .hds-card__layoutwrapper {\n      display: flex;\n      flex-direction: row;\n      gap: var(--hds-spacing-12-16);\n\n      .hds-card__media,\n      .hds-card__body {\n        flex: 1;\n        min-height: var(--hds-fullwidthcard-content-min-height);\n      }\n\n      .hds-card__media {\n        max-height: var(--hds-fullwidthcard-image-maxheight-medium);\n      }\n    }\n\n    /* Image is absolutely positioned within .hds-card__media, to center and avoid making .hds-card__media outgrow\n     * the body text:\n     *\n     **/\n\n    /* stylelint-disable selector-class-pattern */\n    .hds-card__media > .hds-card__media__img {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n\n    &.hds-card--image-position-right .hds-card__media {\n      order: 2;\n    }\n\n    /* Body sizes itself based on its content, and centers the contained wrapper (.hds-card__centerbody) vertically: */\n\n    .hds-card__body {\n      align-self: flex-start;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n}\n","@import url(\"../_custom-media.css\");\n\n/**\n * Responsive extension of the spacing css variables\n */\n:root {\n  --hds-spacing-4-8: var(--hds-spacing-4);\n  --hds-spacing-8-12: var(--hds-spacing-8);\n  --hds-spacing-12-16: var(--hds-spacing-12);\n  --hds-spacing-16-20: var(--hds-spacing-16);\n  --hds-spacing-20-24: var(--hds-spacing-20);\n  --hds-spacing-24-32: var(--hds-spacing-24);\n  --hds-spacing-32-40: var(--hds-spacing-32);\n  --hds-spacing-40-48: var(--hds-spacing-40);\n  --hds-spacing-48-64: var(--hds-spacing-48);\n  --hds-spacing-64-80: var(--hds-spacing-64);\n  --hds-spacing-80-120: var(--hds-spacing-80);\n  --hds-spacing-120-160: var(--hds-spacing-120);\n\n  @media (--large) {\n    --hds-spacing-4-8: var(--hds-spacing-8);\n    --hds-spacing-8-12: var(--hds-spacing-12);\n    --hds-spacing-12-16: var(--hds-spacing-16);\n    --hds-spacing-16-20: var(--hds-spacing-20);\n    --hds-spacing-20-24: var(--hds-spacing-24);\n    --hds-spacing-24-32: var(--hds-spacing-32);\n    --hds-spacing-32-40: var(--hds-spacing-40);\n    --hds-spacing-40-48: var(--hds-spacing-48);\n    --hds-spacing-48-64: var(--hds-spacing-64);\n    --hds-spacing-64-80: var(--hds-spacing-80);\n    --hds-spacing-80-120: var(--hds-spacing-120);\n    --hds-spacing-120-160: var(--hds-spacing-160);\n  }\n}\n\n/**\n * Utility classes for margin top and bottom\n * Based upon [tailwind](https://tailwindcss.com/docs/margin)\n * \n * We start of by just adding the margin top and bottom classes.\n * we will see if there becomes a need for left and right. X, Y axis, padding etc...\n *\n * If the consumer wish to primarly use utility classes, the recommended approach is to use tailwind with the\n * provided tailwind configuration file.\n */\n\n/* Margin top */\n.hds-mt-4 {\n  margin-top: var(--hds-spacing-4);\n}\n\n.hds-mt-8 {\n  margin-top: var(--hds-spacing-8);\n}\n\n.hds-mt-12 {\n  margin-top: var(--hds-spacing-12);\n}\n\n.hds-mt-16 {\n  margin-top: var(--hds-spacing-16);\n}\n\n.hds-mt-20 {\n  margin-top: var(--hds-spacing-20);\n}\n\n.hds-mt-24 {\n  margin-top: var(--hds-spacing-24);\n}\n\n.hds-mt-32 {\n  margin-top: var(--hds-spacing-32);\n}\n\n.hds-mt-40 {\n  margin-top: var(--hds-spacing-40);\n}\n\n.hds-mt-48 {\n  margin-top: var(--hds-spacing-48);\n}\n\n.hds-mt-64 {\n  margin-top: var(--hds-spacing-64);\n}\n\n.hds-mt-80 {\n  margin-top: var(--hds-spacing-80);\n}\n\n.hds-mt-120 {\n  margin-top: var(--hds-spacing-120);\n}\n\n.hds-mt-160 {\n  margin-top: var(--hds-spacing-160);\n}\n\n/* Responsive margin top. Mobile first, meaning it jumps up on larger screens */\n.hds-mt-4-8 {\n  margin-top: var(--hds-spacing-4-8);\n}\n\n.hds-mt-8-12 {\n  margin-top: var(--hds-spacing-8-12);\n}\n\n.hds-mt-12-16 {\n  margin-top: var(--hds-spacing-12-16);\n}\n\n.hds-mt-16-20 {\n  margin-top: var(--hds-spacing-16-20);\n}\n\n.hds-mt-20-24 {\n  margin-top: var(--hds-spacing-20-24);\n}\n\n.hds-mt-24-32 {\n  margin-top: var(--hds-spacing-24-32);\n}\n\n.hds-mt-32-40 {\n  margin-top: var(--hds-spacing-32-40);\n}\n\n.hds-mt-40-48 {\n  margin-top: var(--hds-spacing-40-48);\n}\n\n.hds-mt-48-64 {\n  margin-top: var(--hds-spacing-48-64);\n}\n\n.hds-mt-64-80 {\n  margin-top: var(--hds-spacing-64-80);\n}\n\n.hds-mt-80-120 {\n  margin-top: var(--hds-spacing-80-120);\n}\n\n.hds-mt-120-160 {\n  margin-top: var(--hds-spacing-120-160);\n}\n\n/* Margin bottom */\n.hds-mb-4 {\n  margin-bottom: var(--hds-spacing-4);\n}\n\n.hds-mb-8 {\n  margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-mb-12 {\n  margin-bottom: var(--hds-spacing-12);\n}\n\n.hds-mb-16 {\n  margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-mb-20 {\n  margin-bottom: var(--hds-spacing-20);\n}\n\n.hds-mb-24 {\n  margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-mb-32 {\n  margin-bottom: var(--hds-spacing-32);\n}\n\n.hds-mb-40 {\n  margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-mb-48 {\n  margin-bottom: var(--hds-spacing-48);\n}\n\n.hds-mb-64 {\n  margin-bottom: var(--hds-spacing-64);\n}\n\n.hds-mb-80 {\n  margin-bottom: var(--hds-spacing-80);\n}\n\n.hds-mb-120 {\n  margin-bottom: var(--hds-spacing-120);\n}\n\n.hds-mb-160 {\n  margin-bottom: var(--hds-spacing-160);\n}\n\n/* Responsive margin bottom. Mobile first, meaning it jumps up on larger screens */\n.hds-mb-4-8 {\n  margin-bottom: var(--hds-spacing-4-8);\n}\n\n.hds-mb-8-12 {\n  margin-bottom: var(--hds-spacing-8-12);\n}\n\n.hds-mb-12-16 {\n  margin-bottom: var(--hds-spacing-12-16);\n}\n\n.hds-mb-16-20 {\n  margin-bottom: var(--hds-spacing-16-20);\n}\n\n.hds-mb-20-24 {\n  margin-bottom: var(--hds-spacing-20-24);\n}\n\n.hds-mb-24-32 {\n  margin-bottom: var(--hds-spacing-24-32);\n}\n\n.hds-mb-32-40 {\n  margin-bottom: var(--hds-spacing-32-40);\n}\n\n.hds-mb-40-48 {\n  margin-bottom: var(--hds-spacing-40-48);\n}\n\n.hds-mb-48-64 {\n  margin-bottom: var(--hds-spacing-48-64);\n}\n\n.hds-mb-64-80 {\n  margin-bottom: var(--hds-spacing-64-80);\n}\n\n.hds-mb-80-120 {\n  margin-bottom: var(--hds-spacing-80-120);\n}\n\n.hds-mb-120-160 {\n  margin-bottom: var(--hds-spacing-120-160);\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}