/* * mit-frie section-wrappers + LAYOUT for Medlemsoverblik-området. * * VIGTIGT (verificeret mod live-DOM 2026-05-28): * 1. HubSpots responsive grid-CSS (.row-fluid flex, .span6 = 50%) loades * IKKE i dette React-tema → span6 render som 100% bredde. Vi laver * derfor vores EGET CSS Grid. * 2. css_class på dnd-noder gemmes på SIDEN ved oprettelse — eksisterende * sider får derfor ikke nye klasser ved template-redeploy. Vi targeter * i stedet den stabile genererede struktur + MODUL-klasserne (som er * bagt ind i modulets egen markup) via :has(). Det er side-uafhængigt. * * Faktisk DOM i Medlemsoverblik-sektionen: * .dnd-section (har .dnd-column → identificerer sektionen) * .row-fluid ← 2-kolonne grid-container + baggrund * .dnd-column (har .frie-quick-action-card) ← VENSTRE * .dnd-row (har .frie-quick-action-card) ← quick-row → 2×2 * .row-fluid > .dnd-module ×4 * .dnd-row (har .consile-inbox-widget) ← inbox-row * .dnd-column (har .frie-dagpengekort-promo) ← HØJRE * .dnd-row > .row-fluid > .dnd-module */ /* ─── Medlemsoverblik: 2-kolonne grid + baggrundsflade BAG modulerne ──── * Verificeret 1:1 mod Figma "Rectangle 1944" (node 305-1030, Scenarie B — * den kanoniske reference; Scenarie A 305-1241 er designerens uensartede * variant). Pixel-målt på 1512px-frame: * - Modulerne: x=50..1466 (centreret, ~50px gutters) → de fylder containeren * - Blå flade: x=96..1415 (centreret, 96px gutters, bredde 1319) * => fladen er ~48px SMALLERE end modulerne pr. side → MODULERNE RAGER * UD OVER fladen. Den er IKKE modul-containeren. * - Fladens TOP starter ~46px NEDE → topkortene rager op over den. * - Fyld: #0A5C7B @ 30%. Form: afrundet (radius ~40px alle 4 hjørner), * flad top, bund skråner OP mod højre (~133px ≈ 5,76°). Ikke roteret. * Derfor: .row-fluid er en GENNEMSIGTIG grid-container (modulerne fylder den, * centreret via layout.css max-width:1440/margin:auto), og fladen tegnes som * et separat ::before-lag bagved — inset 48px (vandret) + 46px (top), så * modulerne rager ud. clip-path kan ikke runde hjørner → SVG-path-baggrund. * ─────────────────────────────────────────────────────────────────── */ .dnd-section:has(.dnd-column) > .row-fluid { position: relative; box-sizing: border-box; /* FULD BREDDE (matcher Figma) — indholdet cappes IKKE. - Modulerne ligger 50px fra skærmkanten: section-padding 24px (layout.css) + 26px her = 50px. - Den blå flade ligger 96px fra kanten: ::before left/right = 72px, målt fra .row-fluid-kanten (24px inde) → 24 + 72 = 96px. => modulerne rager ~46px ud over fladen, præcis som designet. max-width:none !important slår både layout.css' 1440-cap OG HubSpots section-indstilling, så fladen/modulerne altid er fuld bredde. Modulerne fylder deres kolonne (faste max-bredder fjernet i modul-CSS). */ max-width: none !important; margin-inline: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--frie-space-6, 32px); align-items: start; padding-top: 0; padding-bottom: 130px; padding-left: 26px; padding-right: 26px; } /* Baggrundsfladen som separat lag BAG modulerne (Figma Rectangle 1944). * left/right:72px = 24px container-gutter + 48px overhang → modulerne rager * 48px ud over fladen pr. side. top:46px → topkort rager op. bottom:0 lader * fladen nå .row-fluid's bund-padding (~130px under nederste modul). */ .dnd-section:has(.dnd-column) > .row-fluid::before { content: ''; position: absolute; left: 72px; right: 72px; top: 46px; bottom: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201319%202008'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2040%20Q0%200%2040%200%20L1279%200%20Q1319%200%201319%2040%20L1319%201835%20Q1319%201875%201279%201879%20L40%202004%20Q0%202008%200%201968%20Z'%20fill='%230A5C7B'%20fill-opacity='0.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; } /* Kolonner bliver grid-items OVER fladen (nulstil HubSpots span-bredde/float) */ .dnd-section:has(.dnd-column) > .row-fluid > .dnd-column { position: relative; z-index: 1; width: auto !important; max-width: 100% !important; min-width: 0; margin: 0 !important; float: none !important; } /* ─── Venstre kolonne: stak quick-actions over inbox-row ─────────────── * quick-actions er nu ÉT modul der ejer sit eget 2×2-grid — derfor ingen * dnd-row-grid-hack her længere. Vi sørger bare for at rækkerne stables * og fylder kolonnen. * ─────────────────────────────────────────────────────────────────── */ .dnd-column:has(.frie-quick-actions) { display: flex; flex-direction: column; gap: var(--frie-space-5, 24px); } .dnd-column:has(.frie-quick-actions) > .dnd-row { width: 100% !important; margin: 0 !important; float: none !important; } /* ─── Højre kolonne (dagpengekort → lønsikring → karrusel) ──────────── */ .dnd-column:has(.frie-dagpengekort-promo) { display: flex; flex-direction: column; gap: var(--frie-space-5, 24px); } .dnd-column:has(.frie-dagpengekort-promo) > .dnd-row, .dnd-column:has(.frie-dagpengekort-promo) > .dnd-row > .row-fluid > .dnd-module { width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 !important; float: none !important; } /* ─── Inbox-row + medlemsskab-overblik — fuld bredde i venstre kolonne ─ */ .dnd-row:has(.consile-inbox-widget) > .row-fluid > .dnd-module, .dnd-row:has(.consile-membership-overview) > .row-fluid > .dnd-module { width: 100% !important; margin: 0 !important; float: none !important; } /* ─── Mobile: én kolonne, alt stablet ───────────────────────────────── */ @media (max-width: 960px) { /* Mobil er én kolonne (meget høj, smal flade). Overhang-effekten + SVG- strækning giver ikke mening her → skjul ::before-laget og læg en ren afrundet flade direkte på containeren (modulerne stables inde i den). Figma-noden er kun desktop, så dette er vores responsive valg. */ .dnd-section:has(.dnd-column) > .row-fluid { grid-template-columns: 1fr; background-color: rgba(10, 92, 123, 0.30); border-radius: 24px; padding: var(--frie-space-5, 24px) var(--frie-space-4, 16px); gap: var(--frie-space-5, 24px); } .dnd-section:has(.dnd-column) > .row-fluid::before { display: none; } } /* ─── Hero-sektion: FULD BREDDE (blå baggrund kant-til-kant) ────────────── * page-hero ejer selv sit indhold (tekst venstre + foto højre der bløder ud). * Vi neutraliserer kun dnd-containerens 1440-cap + gutter, så hero-sektionen * fylder hele skærmbredden. :has() skal stå HER (tema-CSS), ikke i modulets * inline