{"version":3,"file":"blocks/CategoryImage/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;EACE;EAGA;AAAF;AAEE;EACE;EACA;EACA;EACA;AAAJ;AAGE;EACE;EACA;AADJ;AAKE;EACE;EACA;EACA;EACA;EACA;AAHJ;;AAkBA;EACE;EACA;EACA;EACA;EACA;;;;;;;;;IAAA;EAUA;EAEA;AAhBF;AAqBE;EACE;EACA;EAIA;EAGA;EACA;AAxBJ;AA0BI;EACE;EAKA;EACA;EACA;KAAA;EACA;AA5BN;AAgCI;EACE;EACA;AA9BN;AAkCE;EACE;EACA;AAhCJ;;AAiDA;EACE;EACA;EACA;EACA;EAEA;EAGA;EACA;AAjDF;AAmDE;EACE;AAjDJ;AAqDE;EACE;EACA;EACA;EACA;EACA;EAQA;EACA;AA1DJ;AAgEE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;AA/DJ,C","sources":["webpack://brandy-blocks/./src/blocks/CategoryImage/style.scss"],"sourcesContent":[".wp-block-brandy-category-image {\n  margin: 0;\n  // The border-radius block support lands on this wrapper; clip so the image\n  // (and its rounded corners) follow it.\n  overflow: hidden;\n\n  img {\n    display: block;\n    width: 100%;\n    height: auto;\n    border-radius: inherit;\n  }\n\n  a {\n    display: block;\n    border-radius: inherit;\n  }\n\n  // Editor placeholder box.\n  &__placeholder {\n    display: block;\n    width: 100%;\n    aspect-ratio: 1 / 1;\n    border-radius: inherit;\n    background: repeating-linear-gradient(\n      45deg,\n      #f0f0f0,\n      #f0f0f0 10px,\n      #e6e6e6 10px,\n      #e6e6e6 20px\n    );\n  }\n}\n\n// Mosaic layout: the category's own image beside a 2x2 grid of its children.\n//\n// The primary tile takes roughly half the width and the full height; the four\n// child tiles split the rest. Short slots render the WooCommerce placeholder,\n// so the grid is always full.\n.wp-block-brandy-category-image.is-layout-mosaic {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  gap: var(--mosaic-gap, 8px);\n  /*\n   * --mosaic-ratio is written inline by render.php (and by the editor from the\n   * same table), resolved from the shop's own thumbnail size, so the frame is\n   * exactly as tall as a plain image of that size would be and a mosaic card\n   * stands level with the single-image cards beside it. The literal is only a\n   * floor for a size whose shape cannot be resolved.\n   *\n   * It also gives the `1fr` rows a height to divide — without one they have no\n   * free space and collapse onto whatever each image happens to measure.\n   */\n  aspect-ratio: var(--mosaic-ratio, 1 / 1);\n  // Each tile carries its own corners, so the figure must not clip them.\n  overflow: visible;\n\n  // Spelled out rather than `&__tile`: `&` is the compound selector including\n  // `.is-layout-mosaic`, so the shorthand compiles to\n  // `.is-layout-mosaic__tile` and matches nothing.\n  .wp-block-brandy-category-image__tile {\n    display: block;\n    overflow: hidden;\n    // The base rule hands the figure's radius down to every image via\n    // `inherit`, which would round the grid's inner corners to the outer\n    // radius. Tiles own their corners instead.\n    border-radius: var(--mosaic-tile-radius, 8px);\n    // A grid item's automatic minimum size is its content, so an 800px image\n    // would push its track wider than the fraction it was given.\n    min-width: 0;\n    min-height: 0;\n\n    img {\n      width: 100%;\n      // Tiles are sized by the grid, so the image fills its slot rather than\n      // following its own aspect ratio. ProductCategories pins one on every\n      // category image from --bcc-image-ratio; that shape belongs to the frame\n      // here, not to each tile inside it.\n      height: 100%;\n      aspect-ratio: auto;\n      object-fit: cover;\n      border-radius: inherit;\n    }\n\n    // The editor's striped fallback fills its tile instead of its own square.\n    .wp-block-brandy-category-image__placeholder {\n      height: 100%;\n      aspect-ratio: auto;\n    }\n  }\n\n  .wp-block-brandy-category-image__tile--primary {\n    grid-column: 1;\n    grid-row: 1 / span 2;\n  }\n}\n\n// \"Offset ring\" block style (opt-in via the editor Styles panel).\n//\n// Rings the image with a colored stroke (::before) plus a second stroke in the\n// section background color (::after) shifted a few pixels. Where the background\n// ring overlaps the colored one it \"carves\" it, so the stroke reads thick on\n// the bottom-right and thin on the top-left — an embossed, offset ring.\n//\n// Global defaults live in theme.json under settings.custom.categoryRing, which\n// WordPress emits as --wp--custom--category-ring--* variables. Each property\n// reads that global token first and falls back to a literal so the block still\n// renders if the theme provides no token. The outer ring color additionally\n// honors a per-block override (inline --ring-color from the color control),\n// which takes precedence over the global token.\n.wp-block-brandy-category-image.is-style-offset-ring {\n  --image-border-radius: 50%;\n  --ring-width: var(--wp--custom--category-ring--width, 4px);\n  --ring-offset-y: var(--wp--custom--category-ring--offset-y, 5px);\n  --ring-offset-x: var(--wp--custom--category-ring--offset-x, -2px);\n\n  position: relative;\n  // The base rule clips to the rounded shape; the offset ring pokes outside, so\n  // let it show and round the image itself instead.\n  overflow: visible;\n  border: 0;\n\n  img {\n    border-radius: var(--image-border-radius);\n  }\n\n  // Outer ring — per-block control, else theme.json global, else primary preset.\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: var(--image-border-radius);\n    border: var(--ring-width) solid\n      var(\n        --ring-color,\n        var(\n          --wp--custom--category-ring--color,\n          var(--wp--preset--color--brandy-primary)\n        )\n      );\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  // Background-colored ring, offset to carve into the outer ring. Must match the\n  // section background so the overlap blends in; set globally in theme.json\n  // (settings.custom.categoryRing.carveColor).\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: var(--ring-offset-y);\n    left: var(--ring-offset-x);\n    width: calc(100% - var(--ring-width));\n    height: calc(100% - var(--ring-width));\n    border-radius: var(--image-border-radius);\n    border: var(--wp--custom--category-ring--carve-width, 2.5px) solid\n      var(--wp--custom--category-ring--carve-color, #111111);\n    z-index: 2;\n    pointer-events: none;\n  }\n}\n"],"names":[],"sourceRoot":""}