{"version":3,"file":"blocks/PricingPlan/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;;EAAA;ACAA;;;;;;;;;;EAAA;AAYA;EACC;;;;;;;;;IAAA;ADkBD;ACPE;EACC;ADSH;ACNE;EACC;ADQH;ACzBA;EAqBC;;;;;;;;;;;IAAA;ADkBD;ACNC;EACC;EACA;EACA;EACA,mFACC;ADOH;ACFE;EACC;EACA,mGACC;ADGJ;ACIE;ECjEF;EAAA;EAAA;EDkEG;EAGA;ADJH;ACOE;ECxEF;EAAA;EDyEG;EACA;EACA;ADLH;ACQE;EC9EF;EAAA;EAAA;ED+EG;ADNH;ACSE;EClFF;EAAA;EDmFG;EACA;EACA;EACA;ADPH;ACUE;ECzFF;EAAA;EAAA;ED0FG;ADRH;ACWE;EC7FF;EAAA;EAAA;ED8FG;ADTH;ACeE;EACC;EACA;EACA;ADbH;ACgBE;EACC;ADdH;ACiBE;EACC;ADfH;ACpFA;EAuGC;;;;;;;;;;;IAAA;ADLD;ACkBE;EACC;ADhBH;ACmBE;EACC;ADjBH;ACoBE;EACC;ADlBH;ACqBE;EACC;ADnBH;AC9GA;EAqIC;;;;;;;;;;;IAAA;ADTD;ACqBC;EACC;ADnBF;ACqBE;EACC;ADnBH;ACsBE;EACC;ADpBH;ACuBE;EACC;ADrBH;ACwBE;EACC;ADtBH;ACyBE;EACC;ADvBH;AC0BE;EACC;EACA;EACA;EACA;EACA;ADxBH;AC2BE;EACC;ADzBH;AC4BE;EACC;AD1BH;;AA5JA;EAEC;EACA;EACA;EAEA;EACA;EAGA;EAEA;;;;;;;;;IAAA;AAmKD;AAxJC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA0JF;AAvJE;EACC;AAyJH;AAtJE;EACC;AAwJH;AAjMA;EA6CC;;;;;;;;IAAA;AA+JD;AAtJC;EACC;EACA;AAwJF;AAtJE;EACC;AAwJH;AArJE;EACC;AAuJH;AApJE;EACC;AAsJH;AAnKC;EAgBC;;;IAAA;AAyJF;AArJE;EACC;AAuJH;AApJE;EACC;AAsJH;AAnJE;EACC;AAqJH;AAjJC;EACC;EACA;EACA;AAmJF;AAhJC;EACC;EACA;AAkJF;AA/IC;EACC;EACA;EACA;EACA;EACA;AAiJF;AA9IC;EACC;EACA;EACA;AAgJF;AA7IC;EACC;AA+IF;AA5IC;EACC;EACA;EACA;AA8IF;AArQA;EA0HC;;;IAAA;AAiJD;AA7IC;EACC;EAEA;;;;;;;;IAAA;AAsJF;AA7IE;EACC;EACA;EACA;AA+IH;AA7IG;EACC;AA+IJ;AA/RA;EAqJC;;;;;;;;;IAAA;AAsJD;AA5IC;EACC;AA8IF,C","sources":["webpack://brandy-blocks/./src/blocks/PricingPlan/style.scss","webpack://brandy-blocks/./src/blocks/PricingPlan/_layout-presets.scss","webpack://brandy-blocks/<no source>"],"sourcesContent":["/**\n * Pricing Plan — shared editor + frontend styles.\n *\n * Showing and hiding the per-term nodes is the table's job, not this file's:\n * the checked state starts on an input the table owns. Everything here is the\n * card itself, in its Classic arrangement — the other presets reshuffle these\n * same parts from _layout-presets.scss.\n */\n\n@import './layout-presets';\n\n.brandy-pricing-plan {\n\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\t// The card's own Block spacing first, then the theme's, then a sane floor.\n\tgap: var(--pricing-plan-gap, var(--wp--preset--spacing--10, 1.25rem));\n\tbox-sizing: border-box;\n\t// Stretch to the tallest card in the row, so the buttons line up whatever\n\t// the feature lists do.\n\theight: 100%;\n\n\t/*\n\t * ALIGNMENT\n\t *\n\t * Core writes `has-text-align-*` and defines `text-align` for it globally,\n\t * which is the whole job for the name and the tagline — they are ordinary\n\t * blocks of text. The badge and the price are not: the badge is a pill\n\t * placed by `align-self`, and the amount sits in a flex row, and neither\n\t * moves for `text-align`. Both are mapped below onto the property that does\n\t * move them, so one control behaves the same way on every part of the card.\n\t */\n\n\t&__badge {\n\t\talign-self: flex-start;\n\t\tpadding: 0.3em 0.8em;\n\t\tborder-radius: 999px;\n\t\tbackground-color: var(--wp--preset--color--brandy-primary, currentColor);\n\t\tcolor: var(--wp--preset--color--base, #fff);\n\t\tfont-size: 0.75em;\n\t\tfont-weight: 600;\n\t\tletter-spacing: 0.03em;\n\t\tline-height: 1.4;\n\t\ttext-transform: uppercase;\n\n\t\t// Beats the `align-self` above on specificity, not on source order.\n\t\t&.has-text-align-center {\n\t\t\talign-self: center;\n\t\t}\n\n\t\t&.has-text-align-right {\n\t\t\talign-self: flex-end;\n\t\t}\n\t}\n\n\t/*\n\t * The price is three pieces — amount, period, note — and aligning it means\n\t * moving the block of them, not just the text inside each. So the part is a\n\t * column and alignment is `align-items`, which shrinks the rows to their\n\t * content and puts that content against the chosen edge.\n\t *\n\t * `stretch` is the default, which is exactly the old behaviour: full-width\n\t * rows, amount at the start. Nothing moves until an author asks it to.\n\t */\n\t&__prices {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t&.has-text-align-center {\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&.has-text-align-right {\n\t\t\talign-items: flex-end;\n\t\t}\n\n\t\t&.has-text-align-left {\n\t\t\talign-items: flex-start;\n\t\t}\n\n\t\t/*\n\t\t * And the amount within its own row, for when the note is the widest\n\t\t * thing in the part and the row is stretched to match it.\n\t\t */\n\t\t&.has-text-align-center .brandy-pricing-plan__amount-row {\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&.has-text-align-right .brandy-pricing-plan__amount-row {\n\t\t\tjustify-content: flex-end;\n\t\t}\n\n\t\t&.has-text-align-left .brandy-pricing-plan__amount-row {\n\t\t\tjustify-content: flex-start;\n\t\t}\n\t}\n\n\t&__name {\n\t\tmargin: 0;\n\t\tfont-size: 1.25em;\n\t\tline-height: 1.3;\n\t}\n\n\t&__tagline {\n\t\tmargin: 0;\n\t\topacity: 0.75;\n\t}\n\n\t&__amount-row {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 0.25em;\n\t\tflex-wrap: wrap;\n\t\tmargin: 0;\n\t}\n\n\t&__amount {\n\t\tfont-size: 2.5em;\n\t\tfont-weight: 700;\n\t\tline-height: 1.1;\n\t}\n\n\t&__period {\n\t\topacity: 0.7;\n\t}\n\n\t&__note {\n\t\tmargin: 0.35em 0 0;\n\t\tfont-size: 0.875em;\n\t\topacity: 0.7;\n\t}\n\n\t/*\n\t * The body takes the slack so every card's button sits on the same line\n\t * regardless of how many features each plan lists.\n\t */\n\t&__body {\n\t\tflex: 1 1 auto;\n\n\t\t/*\n\t\t * Block spacing is opt-in, and PricingBody's render adds this class only\n\t\t * once the author sets a value. The body is otherwise a plain block\n\t\t * container whose children space themselves with their own margins, so\n\t\t * making it a gapped column unconditionally would re-space every card\n\t\t * that already exists. Those margins are cleared here, because a card\n\t\t * set to 20px should measure 20px rather than 20px plus whatever the\n\t\t * feature list brought with it.\n\t\t */\n\t\t&.has-block-gap {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--brandy-pricing-body-gap);\n\n\t\t\t> * {\n\t\t\t\tmargin-block: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * The CTA is a wrapper around a real `brandy/button`, so everything the\n\t * button looks like — colour, radius, padding, hover, icon — belongs to\n\t * that block and its own controls. Nothing about its appearance is stated\n\t * here; a second source of truth is exactly what would stop the author's\n\t * Global Styles from reaching it.\n\t *\n\t * Only the wrapper's own job is set: sit at the bottom of the card and let\n\t * the button decide its width.\n\t */\n\t&__cta {\n\t\tdisplay: block;\n\t}\n}\n","/**\n * Pricing Plan — layout presets.\n *\n * Every preset reshuffles the SAME markup. render.php emits one order — badge,\n * name, tagline, price, body, CTA — and the presets move things with `order`\n * and `grid-area` rather than by branching the template. That is what lets a\n * page switch preset with no migration and no re-save: the saved content is\n * identical under all four, only a class differs.\n *\n * Classic is the base stylesheet, so it appears nowhere below.\n */\n\n.brandy-pricing-plan {\n\t/*\n\t * CTA FIRST\n\t *\n\t * The button moves up under the price and the feature list becomes the\n\t * detail below it. On a tall card the button would otherwise sit past the\n\t * fold, which is why most current pricing pages are built this way.\n\t *\n\t * `__body` keeps the slack so cards in a row still finish level; it is\n\t * simply the last thing rather than the second-to-last.\n\t */\n\t&.is-plan-cta-first {\n\t\t.brandy-pricing-plan__cta {\n\t\t\torder: 1;\n\t\t}\n\n\t\t.brandy-pricing-plan__body {\n\t\t\torder: 2;\n\t\t}\n\t}\n\n\t/*\n\t * SPLIT HEADER\n\t *\n\t * Name and price share the top row. Grid rather than flex because the\n\t * tagline sits between them in the markup, and only named areas can pull\n\t * the price up beside the name without moving it in the DOM — where it\n\t * needs to stay, so the price still follows the name for a screen reader.\n\t *\n\t * The row track list is stated twice, once per badge state. A declared\n\t * area with no item in it still takes its gap, so a single five-row grid\n\t * would leave a blank band above every unfeatured card.\n\t */\n\t&.is-plan-split-header {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: minmax(0, 1fr) auto;\n\t\tgrid-template-rows: auto auto 1fr auto;\n\t\tgrid-template-areas:\n\t\t\t'name    price'\n\t\t\t'tagline tagline'\n\t\t\t'body    body'\n\t\t\t'cta     cta';\n\n\t\t&.has-badge {\n\t\t\tgrid-template-rows: auto auto auto 1fr auto;\n\t\t\tgrid-template-areas:\n\t\t\t\t'badge   badge'\n\t\t\t\t'name    price'\n\t\t\t\t'tagline tagline'\n\t\t\t\t'body    body'\n\t\t\t\t'cta     cta';\n\t\t}\n\n\t\t.brandy-pricing-plan__badge {\n\t\t\tgrid-area: badge;\n\t\t\t// `align-self` in the base is a flex declaration; the inline axis\n\t\t\t// needs saying again now the card is a grid.\n\t\t\tjustify-self: start;\n\t\t}\n\n\t\t.brandy-pricing-plan__name {\n\t\t\tgrid-area: name;\n\t\t\talign-self: start;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t.brandy-pricing-plan__tagline {\n\t\t\tgrid-area: tagline;\n\t\t}\n\n\t\t.brandy-pricing-plan__prices {\n\t\t\tgrid-area: price;\n\t\t\tjustify-self: end;\n\t\t\talign-self: start;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t.brandy-pricing-plan__body {\n\t\t\tgrid-area: body;\n\t\t}\n\n\t\t.brandy-pricing-plan__cta {\n\t\t\tgrid-area: cta;\n\t\t}\n\n\t\t// Stacked and right-aligned: the price column is only as wide as its\n\t\t// content, and an amount beside its period would push the name's\n\t\t// column narrow on a three-up row.\n\t\t.brandy-pricing-plan__amount-row {\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-end;\n\t\t\tgap: 0;\n\t\t}\n\n\t\t.brandy-pricing-plan__amount {\n\t\t\tfont-size: 2em;\n\t\t}\n\n\t\t.brandy-pricing-plan__note {\n\t\t\ttext-align: end;\n\t\t}\n\t}\n\n\t/*\n\t * OFFER\n\t *\n\t * One plan sold in several shapes: the body rises above the price, so a\n\t * chooser dropped into it sits between the description and the amount, and\n\t * the price becomes the answer to what the reader just picked rather than a\n\t * heading they scrolled past.\n\t *\n\t * The body is the only region an author can add blocks to — the rest of the\n\t * card is locked — which is what makes it the chooser's home, and why this\n\t * preset exists at all.\n\t */\n\t&.is-plan-offer {\n\t\t.brandy-pricing-plan__body {\n\t\t\torder: 1;\n\t\t}\n\n\t\t.brandy-pricing-plan__prices {\n\t\t\torder: 2;\n\t\t}\n\n\t\t.brandy-pricing-plan__cta {\n\t\t\torder: 3;\n\t\t}\n\n\t\t.brandy-pricing-plan__amount {\n\t\t\tfont-size: 2.5em;\n\t\t}\n\t}\n\n\t/*\n\t * CENTRED HERO PRICE\n\t *\n\t * The price is the largest thing on the card and the plan name is reduced\n\t * to an eyebrow above it. Order, not markup: the price moves above the\n\t * tagline visually while staying after the name in the DOM.\n\t *\n\t * The body is deliberately left alone. It holds the author's own blocks —\n\t * an icon list by default — and those carry their own alignment controls;\n\t * centring a list of ticked features from out here would override a choice\n\t * that is not this stylesheet's to make.\n\t */\n\t&.is-plan-centered {\n\t\ttext-align: center;\n\n\t\t.brandy-pricing-plan__badge {\n\t\t\talign-self: center;\n\t\t}\n\n\t\t.brandy-pricing-plan__prices {\n\t\t\torder: 1;\n\t\t}\n\n\t\t.brandy-pricing-plan__tagline {\n\t\t\torder: 2;\n\t\t}\n\n\t\t.brandy-pricing-plan__body {\n\t\t\torder: 3;\n\t\t}\n\n\t\t.brandy-pricing-plan__cta {\n\t\t\torder: 4;\n\t\t}\n\n\t\t.brandy-pricing-plan__name {\n\t\t\tfont-size: 0.875em;\n\t\t\tfont-weight: 600;\n\t\t\tletter-spacing: 0.08em;\n\t\t\topacity: 0.7;\n\t\t\ttext-transform: uppercase;\n\t\t}\n\n\t\t.brandy-pricing-plan__amount-row {\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t.brandy-pricing-plan__amount {\n\t\t\tfont-size: 3em;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}