{"version":3,"file":"blocks/TeamMember/style-index.css","mappings":";;;AAOA;EACC;EACA;EAIA;EACA;AATD;AAYC;EACC;AAVF;AAaC;EACC;AAXF;AAcC;EACC;AAZF;AAoBE;EACC;AAlBH;AAqBE;EACC;AAnBH;AAsBE;EACC;AApBH;AA0BC;EAGC;EACA;AA1BF;AA6BC;EACC;AA3BF;AAmCC;EACC;EACA;EAIA;EACA;OAAA;EACA;AApCF;AAsCE;;EAEC;AApCH;AA0CE;EAlBD;IAmBE;IACA;EAvCD;EAyCC;IACC;EAvCF;EA0CC;IACC;EAxCF;EA2CC;IACC;EAzCF;AACF;AA8CC;EACC;EACA;EACA;EACA;EACA;AA5CF;AA8CE;;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;AA5CH;AAiDE;EACC;EACA;EACA;EACA;EACA;EACA;AA/CH;AAqBC;EA6BC;AA/CF;AAuDC;EACC;AArDF;AA0DC;EAEC;AAzDF;AA4DC;EACC;AA1DF;AA6DC;EACC;AA3DF;AA8DC;EACC;IAEC;EA7DD;EAgEA;IAEC;EA/DD;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/TeamMember/style.scss"],"sourcesContent":["// Team Member — shared editor + frontend styles.\n//\n// The avatar itself is styled by Avatar/style.scss; everything here is the\n// surrounding layout. `--brandy-avatar-size` is set on this wrapper so the\n// layout (overlay height, horizontal column width) can size against the photo\n// without duplicating the number.\n\n.brandy-team-member {\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\t// styles.js writes --brandy-team-member-gap because core only serializes\n\t// blockGap for blocks with layout support, which this one has none of.\n\tgap: var(--brandy-team-member-gap, var(--wp--preset--spacing--10, 0.75rem));\n\tbox-sizing: border-box;\n\n\t// Text alignment applies in every layout.\n\t&.is-aligned-left {\n\t\ttext-align: left;\n\t}\n\n\t&.is-aligned-center {\n\t\ttext-align: center;\n\t}\n\n\t&.is-aligned-right {\n\t\ttext-align: right;\n\t}\n\n\t// Item alignment only means \"horizontal alignment\" while the wrapper is a\n\t// stacked flex column. The horizontal layout is a grid whose align-items\n\t// controls VERTICAL centring of the photo against the text, so it opts out\n\t// here and re-applies these on its stacked mobile fallback instead.\n\t&:not(.is-layout-horizontal) {\n\t\t&.is-aligned-left {\n\t\t\talign-items: flex-start;\n\t\t}\n\n\t\t&.is-aligned-center {\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&.is-aligned-right {\n\t\t\talign-items: flex-end;\n\t\t}\n\t}\n\n\t// Core blocks in the template carry these classes; reset the stock margins\n\t// so blockGap is the single source of vertical rhythm.\n\t&__name,\n\t&__role,\n\t&__bio {\n\t\tmargin-top: 0;\n\t\tmargin-bottom: 0;\n\t}\n\n\t&__role {\n\t\topacity: 0.75;\n\t}\n\n\t// Horizontal: photo in a fixed column, everything else stacked beside it.\n\t//\n\t// Grid rather than flex-row: the non-photo children need to stack in a\n\t// single column, and wrapping them in a container element would give the\n\t// editor a different DOM than save() emits.\n\t&.is-layout-horizontal {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t\t// Vertical centring of the photo against the text column. This is NOT\n\t\t// the content alignment setting — that stays on text-align, which the\n\t\t// shared rules above apply to every layout.\n\t\talign-items: center;\n\t\tcolumn-gap: var(--brandy-team-member-gap, var(--wp--preset--spacing--10, 1rem));\n\t\trow-gap: 0.25rem;\n\n\t\t> .brandy-avatar,\n\t\t> .brandy-avatar-link {\n\t\t\tgrid-row: 1 / -1;\n\t\t}\n\n\t\t// Stacked fallback: now a flex column, so item alignment means\n\t\t// horizontal alignment again and has to follow the author's setting\n\t\t// rather than being forced to centre.\n\t\t@media (max-width: 600px) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\n\t\t\t&.is-aligned-left {\n\t\t\t\talign-items: flex-start;\n\t\t\t}\n\n\t\t\t&.is-aligned-center {\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t&.is-aligned-right {\n\t\t\t\talign-items: flex-end;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Overlay: the photo fills the card, content sits on a scrim over it.\n\t&.is-layout-overlay {\n\t\tposition: relative;\n\t\tjustify-content: flex-end;\n\t\tmin-height: var(--brandy-avatar-size, 120px);\n\t\toverflow: hidden;\n\t\tisolation: isolate;\n\n\t\t> .brandy-avatar,\n\t\t> .brandy-avatar-link {\n\t\t\tposition: absolute;\n\t\t\tinset: 0;\n\t\t\tz-index: -1;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tborder-radius: inherit;\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t// The scrim keeps text legible over an arbitrary photo. Sized to the\n\t\t// content, not the image, so a short card is not fully covered.\n\t\t&::before {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\tinset: 40% 0 0;\n\t\t\tz-index: -1;\n\t\t\tbackground: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\tpadding: 1rem;\n\t}\n\n\t// White text is only a sensible default over the scrim — it must not beat\n\t// the block's own colour support. WordPress adds `has-text-color` whenever\n\t// a text colour is set (preset or custom), so this steps aside as soon as\n\t// the author picks one; without the guard, a preset colour class at (0,1,0)\n\t// lost to this rule and the setting appeared to do nothing.\n\t&.is-layout-overlay:not(.has-text-color) {\n\t\tcolor: #fff;\n\t}\n\n\t// Hover effects. Both are transform-based so they cannot reflow the page,\n\t// and both are dropped for readers who asked for less motion.\n\t&.has-hover-lift,\n\t&.has-hover-zoom {\n\t\ttransition: transform 0.25s ease, box-shadow 0.25s ease;\n\t}\n\n\t&.has-hover-lift:hover {\n\t\ttransform: translateY(-4px);\n\t}\n\n\t&.has-hover-zoom:hover {\n\t\ttransform: scale(1.02);\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.has-hover-lift,\n\t\t&.has-hover-zoom {\n\t\t\ttransition: none;\n\t\t}\n\n\t\t&.has-hover-lift:hover,\n\t\t&.has-hover-zoom:hover {\n\t\t\ttransform: none;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}