{"version":3,"file":"ThreeCardSection.DpJsKknJ.mjs","names":["React.useRef","React.useState","React.useId","React.useMemo"],"sources":["https:/framerusercontent.com/modules/RM1nsUIJH4O4k0taxLHZ/cTGpCbTcafTIv03TVHjx/ThreeCardSection.js"],"sourcesContent":["// Instructions: Create a responsive 3-card section like the reference image.\n// Layout: full width container with 3 equal cards, gap 32px desktop / 24px tablet / 16px mobile.\n// Cards resize fluidly (no fixed widths), each uses Fill width / flex 1, equal width and height; on mobile stack vertically.\n// Card design: bg #F5F5F7, radius 20px, overflow hidden; image on top with ~4:3 aspect, object-fit cover; centered text area with 24px padding; title bold 18–20px; description regular 16–18px line-height 1.5.\n// Update: use Font controls so users can apply their saved Text Styles; text should start at the top so titles align.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";const fallbackImages=[{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Gradient 5 - Green\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Gradient 4 - Yellow\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Gradient 3 - Orange\"}];function toNumber(value,fallback){const n=typeof value===\"number\"?value:Number(value);return Number.isFinite(n)?n:fallback;}function clamp(value,min,max){return Math.min(max,Math.max(min,value));}/**\n * Three Card Section\n *\n * @framerIntrinsicWidth 960\n * @framerIntrinsicHeight 520\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function ThreeCardSection(props){const{cards,cardBackground,textColor,borderRadius,padding,tabletPadding,aspectRatio,hideImageOnMobile,gapDesktop,gapTablet,gapMobile,tabletBreakpoint,mobileBreakpoint,titleLines,descriptionLines,style}=props;const containerRef=React.useRef(null);const[layout,setLayout]=React.useState(\"desktop\");const id=React.useId();const wrapClass=React.useMemo(()=>`tcs_${id.replace(/[:]/g,\"\")}`,[id]);const safeRadius=clamp(toNumber(borderRadius,20),0,200);const safePadding=clamp(toNumber(padding,24),0,200);const safeTabletPadding=clamp(toNumber(tabletPadding,10),0,200);const safeAspect=clamp(toNumber(aspectRatio,4/3),.25,4);const effectivePadding=layout===\"tablet\"?safeTabletPadding:safePadding;const safeGapDesktop=clamp(toNumber(gapDesktop,32),0,200);const safeGapTablet=clamp(toNumber(gapTablet,24),0,200);const safeGapMobile=clamp(toNumber(gapMobile,16),0,200);const safeTabletBp=clamp(toNumber(tabletBreakpoint,1024),480,1920);const safeMobileBp=clamp(toNumber(mobileBreakpoint,640),320,safeTabletBp);React.useEffect(()=>{if(typeof window===\"undefined\")return;const el=containerRef.current;if(!el)return;const compute=w=>{const next=w<=safeMobileBp?\"mobile\":w<=safeTabletBp?\"tablet\":\"desktop\";React.startTransition(()=>setLayout(next));};compute(el.getBoundingClientRect().width);const ro=new ResizeObserver(entries=>{const width=entries?.[0]?.contentRect?.width;if(typeof width===\"number\")compute(width);});ro.observe(el);return()=>ro.disconnect();},[safeMobileBp,safeTabletBp]);const safeTitleLines=clamp(Math.round(toNumber(titleLines,2)),1,6);const safeDescLines=clamp(Math.round(toNumber(descriptionLines,3)),1,20);const safeCards=React.useMemo(()=>{const base=Array.isArray(cards)?cards:[];if(base.length>0)return base;return[{title:\"Mit Ihrem Team mehr schaffen\",description:\"Wiederkehrende Aufgaben wie Neustarts oder Ticket-Erstellungen laufen automatisiert – Anpassungen sind jederzeit und sofort m\\xf6glich.\"},{title:\"Das Unerwartete fr\\xfch erkennen\",description:\"Unsere Mustererkennung macht das Systemverhalten transparent und erkennt Verhaltensabweichungen live – f\\xfcr mehr Sicherheit und Verf\\xfcgbarkeit.\"},{title:\"Volle Kontrolle \\xfcber Ihre Daten\",description:\"Sie bestimmen, welche Daten zwischen internen und externen Systemen flie\\xdfen. Mehr Transparenz bedeutet geringere Wartungskosten.\"}];},[cards]);const computedTitleStyle=React.useMemo(()=>{return{/* Fixed title style (Text Style: Blog H3) */fontSize:\"22px\",fontWeight:700,letterSpacing:\"-0.01em\",lineHeight:\"1.15em\",color:textColor,textAlign:\"center\",margin:0,width:\"100%\",display:\"-webkit-box\",WebkitBoxOrient:\"vertical\",WebkitLineClamp:safeTitleLines,overflow:\"hidden\"};},[textColor,safeTitleLines]);const computedDescStyle=React.useMemo(()=>{return{/* Fixed description style (Text Style: Blog Body) */fontSize:\"19px\",fontWeight:400,letterSpacing:\"-0.01em\",lineHeight:\"1.5em\",color:textColor,textAlign:\"center\",margin:0,width:\"100%\",display:\"-webkit-box\",WebkitBoxOrient:\"vertical\",WebkitLineClamp:safeDescLines,overflow:\"hidden\"};},[textColor,safeDescLines]);return /*#__PURE__*/_jsxs(\"section\",{ref:containerRef,className:wrapClass,style:{position:\"relative\",width:\"100%\",height:\"auto\",...style,// @ts-ignore CSS var\n\"--tcs-padding\":`${effectivePadding}px`},\"aria-label\":\"Three cards\",children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                .${wrapClass} .tcs_grid {\n                    width: 100%;\n                    display: grid;\n                    grid-template-columns: repeat(3, minmax(0, 1fr));\n                    align-items: stretch;\n                    gap: ${safeGapDesktop}px;\n                }\n\n                /* Breakpoints based on component width (ResizeObserver), not viewport */\n                .${wrapClass} .tcs_grid[data-layout=\"tablet\"] {\n                    gap: ${safeGapTablet}px;\n                }\n\n                .${wrapClass} .tcs_grid[data-layout=\"mobile\"] {\n                    grid-template-columns: 1fr;\n                    gap: ${safeGapMobile}px;\n                }\n\n                .${wrapClass} .tcs_card {\n                    background: ${cardBackground};\n                    border-radius: ${safeRadius}px;\n                    overflow: hidden;\n                    min-width: 0;\n                    height: 100%;\n                    display: flex;\n                    flex-direction: column;\n                }\n\n                .${wrapClass} .tcs_media {\n                    width: 100%;\n                    aspect-ratio: ${safeAspect};\n                    position: relative;\n                    overflow: hidden;\n                    flex: 0 0 auto;\n                    background: rgba(0,0,0,0.04);\n                }\n\n                .${wrapClass} .tcs_img {\n                    position: absolute;\n                    inset: 0;\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                    display: block;\n                }\n\n                .${wrapClass} .tcs_body {\n                    padding: var(--tcs-padding, ${safePadding}px);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: flex-start;\n                    gap: 10px;\n                    flex: 1 1 auto;\n                    min-height: 0;\n                }\n            `}),/*#__PURE__*/_jsx(\"div\",{className:\"tcs_grid\",role:\"list\",\"data-layout\":layout,children:safeCards.slice(0,3).map((card,index)=>{const fallback=fallbackImages[index%fallbackImages.length];const image=card?.image?.src?card.image:fallback;return /*#__PURE__*/_jsxs(\"article\",{className:\"tcs_card\",role:\"listitem\",children:[!(hideImageOnMobile&&layout===\"mobile\")&&/*#__PURE__*/_jsx(\"div\",{className:\"tcs_media\",\"aria-hidden\":!image?.alt?true:undefined,children:/*#__PURE__*/_jsx(\"img\",{className:\"tcs_img\",src:image.src,srcSet:image.srcSet,alt:image.alt||\"\"})}),/*#__PURE__*/_jsxs(\"div\",{className:\"tcs_body\",children:[/*#__PURE__*/_jsx(\"h3\",{style:computedTitleStyle,children:card?.title}),/*#__PURE__*/_jsx(\"p\",{style:computedDescStyle,children:card?.description})]})]},`${index}-${card?.title||\"card\"}`);})})]});}addPropertyControls(ThreeCardSection,{cards:{type:ControlType.Array,title:\"Cards\",maxCount:12,defaultValue:[{title:\"Mit Ihrem Team mehr schaffen\",description:\"Wiederkehrende Aufgaben wie Neustarts oder Ticket-Erstellungen laufen automatisiert – Anpassungen sind jederzeit und sofort m\\xf6glich.\"},{title:\"Das Unerwartete fr\\xfch erkennen\",description:\"Unsere Mustererkennung macht das Systemverhalten transparent und erkennt Verhaltensabweichungen live – f\\xfcr mehr Sicherheit und Verf\\xfcgbarkeit.\"},{title:\"Volle Kontrolle \\xfcber Ihre Daten\",description:\"Sie bestimmen, welche Daten zwischen internen und externen Systemen flie\\xdfen. Mehr Transparenz bedeutet geringere Wartungskosten.\"}],control:{type:ControlType.Object,controls:{image:{type:ControlType.ResponsiveImage,title:\"Image\"},title:{type:ControlType.String,title:\"Title\",defaultValue:\"Card title\"},description:{type:ControlType.String,title:\"Description\",defaultValue:\"Card description text.\",displayTextArea:true}}}},cardBackground:{type:ControlType.Color,title:\"Card BG\",defaultValue:\"#F5F5F7\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#3A3A3A\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:20,min:0,max:64,step:1,unit:\"px\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:24,min:0,max:80,step:1,unit:\"px\"},tabletPadding:{type:ControlType.Number,title:\"Pad Tablet\",defaultValue:10,min:0,max:80,step:1,unit:\"px\"},aspectRatio:{type:ControlType.Number,title:\"Image Ratio\",defaultValue:4/3,min:.5,max:3,step:.01},hideImageOnMobile:{type:ControlType.Boolean,title:\"Image Mobile\",defaultValue:false,enabledTitle:\"Hide\",disabledTitle:\"Show\"},gapDesktop:{type:ControlType.Number,title:\"Gap Desktop\",defaultValue:32,min:0,max:80,step:1,unit:\"px\"},gapTablet:{type:ControlType.Number,title:\"Gap Tablet\",defaultValue:24,min:0,max:80,step:1,unit:\"px\"},gapMobile:{type:ControlType.Number,title:\"Gap Mobile\",defaultValue:16,min:0,max:80,step:1,unit:\"px\"},tabletBreakpoint:{type:ControlType.Number,title:\"Tablet ≤\",defaultValue:1024,min:600,max:1600,step:1,unit:\"px\"},mobileBreakpoint:{type:ControlType.Number,title:\"Mobile ≤\",defaultValue:640,min:320,max:900,step:1,unit:\"px\"},titleLines:{type:ControlType.Number,title:\"Title Lines\",defaultValue:2,min:1,max:6,step:1},descriptionLines:{type:ControlType.Number,title:\"Desc Lines\",defaultValue:4,min:1,max:20,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThreeCardSection\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicHeight\":\"520\",\"framerIntrinsicWidth\":\"960\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThreeCardSection.map"],"mappings":"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"}