/* ═══════════════════════════════════════════════
GM Instagram — Landing (/instagram) v3.12
Forslag A (mockup v4): grønne Premium-flader, kort som
Instagram-feedet, nyeste opslag stort øverst.
Mobil først. Afhænger af frontend.css (kort, lightbox).
═══════════════════════════════════════════════ */
.gmi-side {
--gs-ink: #1F2A24;
--gs-muted: #7A817B;
--gs-faint: #9A958C;
--gs-line: #E3DED3;
--gs-cream: #FAF8F3;
--gs-sand: #F6F1E4;
--gs-sand-line: #EADFC4;
--gs-green: #2C4A3A;
--gs-green-deep: #213A2D;
--gs-gold: #B8883A;
--gs-gold-light: #D4A94E;
--gs-white: #FFFFFF;
--gs-page: #FFFFFF;
--gs-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
--gs-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
max-width: 720px;
margin: 0 auto;
padding: 0 12px 24px;
font-family: var(--gs-sans);
color: var(--gs-ink);
line-height: 1.45;
box-sizing: border-box;
}
.gmi-side *, .gmi-side *::before, .gmi-side *::after { box-sizing: border-box; }
.gmi-side h2, .gmi-side h3, .gmi-side p { margin: 0; text-transform: none; letter-spacing: normal; }
.gmi-side img { /* hård nulstilling — Foodica/Elementor giver billeder rammer, skygger og marginer */
max-width: 100% !important; display: block !important; border: 0 !important; box-shadow: none !important;
margin: 0 !important; padding: 0 !important; background: none !important; float: none !important;
}
/* Sitet pakker ![]()
ind i (WebP). Klassen lander på , og et inline
inde i en kvadratisk ramme giver Safari frit spil til at vokse — derfor rammes BÅDE picture og img. */
/* WordPress' emoji-billeder (img.emoji) skal blive inline i teksten — ikke blokke på egen linje */
.gmi-side img.emoji {
display: inline !important; width: 1em !important; height: 1em !important;
margin: 0 .07em !important; vertical-align: -0.1em !important; max-width: none !important;
}
.gmi-side picture { display: block !important; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; }
.gmi-side .gmi-side-avatar, .gmi-side .gmi-side-avatar img,
.gmi-side .gmi-side-premium-who picture, .gmi-side .gmi-side-premium-who img {
border-radius: 50% !important; width: 40px !important; height: 40px !important; overflow: hidden; object-fit: cover !important; flex-shrink: 0;
}
.gmi-side .gmi-side-hero-media, .gmi-side .gmi-card-media, .gmi-side .gmi-side-pop-media { min-height: 0; }
.gmi-side .gmi-side-hero-media picture, .gmi-side .gmi-card-media picture, .gmi-side .gmi-side-pop-media picture,
.gmi-side .gmi-side-hero-media img, .gmi-side .gmi-card-media img, .gmi-side .gmi-side-pop-media img {
position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important;
}
/* ⛔ ANNONCER RØRES IKKE (CLAUDE.md §2.2). Ad Inserter lægger blokke efter afsnit i alt indhold,
også mellem og inde i vores kort. Intet skjules og intet flyttes. Det eneste her er layout: en blok,
der lander MELLEM kortene, får sin egen fulde række i gitteret i stedet for at optage én celle. */
.gmi-side-cards > .code-block, .gmi-side-feed .gmi-grid > .code-block,
.gmi-side-cards > ins, .gmi-side-feed .gmi-grid > ins { grid-column: 1 / -1; width: 100%; }
.gmi-side-hero .code-block { width: 100%; }
.gmi-side .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
/* Annonce-blokke inde i Premium-fladerne vises som de er (ingen skjul — CLAUDE.md §2.2). */
.gmi-side-band .code-block, .gmi-side-premium .code-block, .gmi-side-pcard .code-block { width: 100%; }
/* ── Sektionsoverskrifter ────────────────── */
.gmi-side .gmi-side-heading {
font-family: var(--gs-serif); font-size: 24px; font-weight: 600; line-height: 1.15;
color: var(--gs-ink); margin: 26px 0 12px; padding: 0; border: 0; text-transform: none; letter-spacing: normal;
}
/* ── Profilstribe ────────────────────────── */
.gmi-side-profile { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; }
.gmi-side-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gmi-side-profile-text { min-width: 0; }
.gmi-side-profile-text b { display: block; font-size: 14px; font-weight: 700; }
.gmi-side-profile-text span { display: block; font-size: 12px; color: var(--gs-muted); }
.gmi-side .gmi-side-follow,
.gmi-side .gmi-side-follow:visited {
margin-left: auto; flex-shrink: 0;
font-size: 13px; font-weight: 600; color: var(--gs-green) !important;
border: 1px solid #CFD6D0; border-radius: 8px; padding: 7px 13px; text-decoration: none !important;
}
.gmi-side .gmi-side-follow:hover { background: var(--gs-cream); }
/* ── Premium-bånd ────────────────────────── */
.gmi-side-band {
display: flex; align-items: center; gap: 10px;
background: var(--gs-green-deep); color: #fff; border-radius: 12px;
padding: 12px 14px; margin: 4px 0 12px;
}
.gmi-side-band-text { min-width: 0; }
.gmi-side-band-text b { display: block; font-family: var(--gs-serif); font-size: 17px; font-weight: 600; line-height: 1.1; color: #fff; margin-bottom: 3px; }
.gmi-side-band-text b em { color: var(--gs-gold-light); font-style: italic; }
.gmi-side-band-text p { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.8); }
.gmi-side .gmi-side-band-btn,
.gmi-side .gmi-side-band-btn:visited {
flex-shrink: 0; font-size: 13px; font-weight: 700; color: #2B2410 !important;
background: var(--gs-gold-light); padding: 10px 12px; border-radius: 9px;
text-decoration: none !important; white-space: nowrap;
}
/* ── Søg ─────────────────────────────────── */
.gmi-side-search {
display: flex; align-items: center; gap: 6px;
background: var(--gs-white); border: 1px solid var(--gs-line); border-radius: 12px;
padding: 2px 6px 2px 14px; margin: 0 0 18px;
}
.gmi-side-search input[type="search"] {
flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0;
font-family: var(--gs-sans); font-size: 14px; color: var(--gs-ink); outline: none; box-shadow: none;
}
.gmi-side-search input::placeholder { color: var(--gs-muted); }
.gmi-side-search button {
border: 0; background: transparent; color: var(--gs-green); padding: 8px; cursor: pointer; display: flex; border-radius: 8px;
}
.gmi-side-search button:hover, .gmi-side-search button:focus-visible { background: var(--gs-cream); }
/* ── Knapper ─────────────────────────────── */
.gmi-side .gmi-side-btn,
.gmi-side .gmi-side-btn:visited {
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--gs-green); color: #fff !important;
border-radius: 10px; padding: 13px 18px;
font-family: var(--gs-sans); font-size: 15px; font-weight: 700; letter-spacing: .1px;
text-decoration: none !important; border: 0; transition: opacity .15s ease;
}
.gmi-side .gmi-side-btn:hover { opacity: .9; }
.gmi-side .gmi-side-btn-gold { background: linear-gradient(135deg, var(--gs-gold), var(--gs-gold-light)); font-size: 16px; padding: 15px 18px; border-radius: 14px; box-shadow: 0 4px 16px rgba(184,136,58,.35); }
/* ── Hero (nyeste opslag) ────────────────── */
.gmi-side-hero { margin-bottom: 12px; background: var(--gs-white); border: 1px solid var(--gs-line); border-radius: 14px; overflow: hidden; }
.gmi-side-hero-media {
display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gs-cream);
}
.gmi-side-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.gmi-side-hero-media .gmi-badge { position: absolute; top: 10px; right: 10px; }
.gmi-side-hero-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gmi-side-hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-gold); }
.gmi-side-hero-title { font-family: var(--gs-serif); font-weight: 600; font-size: 26px; line-height: 1.15; text-wrap: balance; }
.gmi-side-hero-caption { font-family: var(--gs-serif); font-size: 16px; line-height: 1.5; color: #3F4A44; }
.gmi-side-hero-caption p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.gmi-side-hero-caption.is-clamped p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gmi-side .gmi-side-hero-more { background: none; border: 0; padding: 4px 0 0; font-family: var(--gs-sans); font-size: 13px; font-weight: 600; color: var(--gs-green); cursor: pointer; }
.gmi-side-hero-stats { display: flex; gap: 14px; font-size: 13px; color: var(--gs-muted); }
.gmi-side-hero-stats span { display: inline-flex; align-items: center; gap: 4px; }
.gmi-side-hero-body .gmi-side-btn { margin-top: 4px; }
.gmi-side .gmi-side-hero-ig,
.gmi-side .gmi-side-hero-ig:visited { text-align: center; font-size: 12.5px; color: var(--gs-muted) !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* ── Kompakte kort (2 kolonner) — samme kort som Instagram-feedet, men opskriftens navn ── */
.gmi-side-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gmi-side .gmi-card-compact { border-radius: 10px; display: flex; flex-direction: column; }
.gmi-side .gmi-card-compact .gmi-card-body { flex: 1; }
.gmi-side .gmi-card-compact .gmi-recipe-banner { margin-top: auto; }
.gmi-side .gmi-card-compact .gmi-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.gmi-side .gmi-card-compact .gmi-card-stats { font-size: 11px; color: var(--gs-muted); gap: 10px; }
.gmi-side .gmi-card-title {
font-family: var(--gs-serif); font-size: 16px; font-weight: 500; line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gmi-side .gmi-card-compact .gmi-recipe-banner-ig { background: var(--gs-muted) !important; }
/* ── Premium-modul ───────────────────────── */
.gmi-side-premium {
background: var(--gs-green); color: #fff; border-radius: 18px;
padding: 24px 20px 20px; margin: 22px 0 8px; scroll-margin-top: 90px;
position: relative; overflow: hidden;
}
.gmi-side-premium::before { content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(212,169,78,.18), transparent 70%); pointer-events: none; }
.gmi-side-premium > * { position: relative; }
.gmi-side-premium-who { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gmi-side-premium-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gmi-side-premium-who strong { display: block; font-size: 14px; color: #fff; }
.gmi-side-premium-who span { display: block; font-size: 12px; color: rgba(255,255,255,.55); }
.gmi-side-premium-badge {
margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--gs-gold-light); background: rgba(212,169,78,.18); border: 1px solid rgba(212,169,78,.4);
padding: 5px 11px; border-radius: 16px;
}
.gmi-side-premium-title { font-family: var(--gs-serif); font-weight: 600; font-size: 30px; line-height: 1.08; color: #fff; margin-bottom: 8px; }
.gmi-side-premium-title em { color: var(--gs-gold-light); font-style: italic; }
.gmi-side-premium-text { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.75); margin-bottom: 16px; }
.gmi-side-premium-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.gmi-side-premium-usps div {
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
padding: 10px 6px; text-align: center; font-size: 12px; line-height: 1.25; color: rgba(255,255,255,.85);
}
.gmi-side-premium-usps b { display: block; font-family: var(--gs-serif); font-size: 20px; font-weight: 600; color: var(--gs-gold-light); line-height: 1.1; margin-bottom: 2px; }
.gmi-side-premium-ctas { margin-bottom: 10px; }
.gmi-side-premium-meta { text-align: center; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.6); }
.gmi-side .gmi-side-premium-meta a,
.gmi-side .gmi-side-premium-meta a:visited { color: var(--gs-gold-light) !important; font-weight: 600; text-decoration: none !important; }
/* Platform: JS sætter data-gmi-platform=ios|android|web. Uden JS: iPhone som primær. */
.gmi-side-premium [data-gmi-cta="android"], .gmi-side-premium [data-gmi-cta="web"] { display: none; }
.gmi-side-premium [data-gmi-alt="android"], .gmi-side-premium [data-gmi-alt="web"] { display: none; }
.gmi-side-premium[data-gmi-platform="android"] [data-gmi-cta="ios"],
.gmi-side-premium[data-gmi-platform="android"] [data-gmi-alt="ios"] { display: none; }
.gmi-side-premium[data-gmi-platform="android"] [data-gmi-cta="android"] { display: flex; }
.gmi-side-premium[data-gmi-platform="android"] [data-gmi-alt="android"] { display: inline; }
.gmi-side-premium[data-gmi-platform="web"] [data-gmi-cta="ios"],
.gmi-side-premium[data-gmi-platform="web"] [data-gmi-alt="ios"] { display: none; }
.gmi-side-premium[data-gmi-platform="web"] [data-gmi-cta="web"] { display: flex; }
.gmi-side-premium[data-gmi-platform="web"] [data-gmi-alt="web"] { display: inline; }
/* ── Populært lige nu (swipe-række; løbende på desktop) ── */
.gmi-side-popular {
position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gmi-side-popular::-webkit-scrollbar { display: none; }
.gmi-side-popular::after { /* fade i højre kant: «her er mere» */
content: ''; position: sticky; right: 0; top: 0; flex: 0 0 56px; margin-left: -56px; align-self: stretch;
background: linear-gradient(90deg, rgba(255,255,255,0), var(--gs-page)); pointer-events: none;
}
.gmi-side-popular, .gmi-side-popular-track { display: flex; gap: 10px; }
.gmi-side-popular-track { flex: 0 0 auto; }
.gmi-side .gmi-side-pop,
.gmi-side .gmi-side-pop:visited { flex: 0 0 132px; scroll-snap-align: start; text-decoration: none !important; color: var(--gs-ink) !important; }
.gmi-side-pop-media { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--gs-cream); }
.gmi-side-pop-media img { width: 100%; height: 100%; object-fit: cover; }
.gmi-side-pop-views {
position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 600; color: #fff;
background: rgba(0,0,0,.55); padding: 3px 7px; border-radius: 999px;
}
.gmi-side-pop-title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-family: var(--gs-serif); font-size: 13.5px; line-height: 1.2; margin-top: 6px;
}
/* Billede der ikke kan hentes (udløbet CDN-link): grøn flade med G i stedet for et brudt ikon */
.gmi-side .is-broken {
background: linear-gradient(135deg, var(--gs-green), #3C5E4C);
}
.gmi-side .is-broken::before { /* Gourministeriets G-logo (samme som appens ikon) */
content: ''; position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Ccircle cx=%22256%22 cy=%22256%22 r=%22190%22 fill=%22none%22 stroke=%22#D4A94E%22 stroke-opacity=%22.55%22 stroke-width=%224%22/%3E%3Cg transform=%22translate(20,55) scale(5)%22%3E%3Cpath fill=%22#D4A94E%22 stroke=%22#D4A94E%22 stroke-width=%222%22 d=%22M24.5,5.9c-2.4,1.1-3.9,3.8-3.9,6.8c0,6.5,7.4,10.6,15.9,11.8C43.1,12.7,57.6,2.7,68.1,2.7c4,0,6.1,2.1,6.1,5.1c0,10.1-18,18.6-32.4,18.6c-1.5,0-2.9-0.1-4.4-0.2c-1.9,3.6-3,7.3-3,10.9c0,6.5,4,10.5,10.4,10.5c2.9,0,5.9-1,8.5-2.4c3.1-7.8,5.8-14,9.5-14c1.3,0,2.4,0.9,2.4,2.3c0,3.3-4.5,9-10.5,12.5l-2.6,6.7c4.5,0.5,9.3,2.4,9.3,6.9c0,0.6-0.1,1.1-0.5,1.1c-0.3,0-0.3-0.2-0.4-0.6c-0.6-4.7-5.3-5.9-9-6.2c-4.8,11.6-11.5,23.7-23.4,23.7c-4,0-7.4-2.9-7.4-7c0-10,16.7-18.1,29.2-18.1h0.5l2.1-5.4c-2.5,1.1-5.3,1.9-8,1.9c-7,0-11.9-4.1-11.9-11.6c0-3.8,1.1-7.6,3-11.3C26.8,24.5,19,20,19,12.6c0-3.7,2.4-5.8,5.3-7.1L24.5,5.9z M49.9,53.7c-11.4,0-27.5,7.6-27.5,16.8c0,3.3,2.5,5.4,5.9,5.4C39.1,75.9,45.3,64.8,49.9,53.7z M38.3,24.8c1.3,0.1,2.6,0.2,3.9,0.2c12.7,0,30.5-7.9,30.5-17.4c0-2.1-2.1-3.4-4.5-3.4C58.5,4.1,44.9,13.7,38.3,24.8z M55.5,43.8c4.7-3.1,8.1-7.5,8.1-10.3c0-0.6-0.3-0.9-0.9-0.9C60.1,32.6,58,37.4,55.5,43.8z%22/%3E%3C/g%3E%3C/svg%3E") center / 58% no-repeat;
}
/* Rullen (desktop): landing.js kopierer fliserne til mindst 2× skærmbredden og sætter --gs-set
(bredden af ét sæt i px), så loopet aldrig løber tør og bliver hvidt. */
@keyframes gmi-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--gs-set, 0px))); } }
.gmi-side-popular.is-marquee { overflow: hidden; scroll-snap-type: none; }
.gmi-side-popular.is-marquee .gmi-side-popular-track { animation: gmi-marquee var(--gs-marquee, 45s) linear infinite; will-change: transform; }
.gmi-side-popular.is-marquee:hover .gmi-side-popular-track,
.gmi-side-popular.is-marquee:focus-within .gmi-side-popular-track { animation-play-state: paused; }
.gmi-side-popular.is-marquee .gmi-side-pop { scroll-snap-align: none; }
/* ── Premium-kort i feedet ───────────────── */
.gmi-side-pcard {
display: flex; flex-direction: column; justify-content: space-between;
background: var(--gs-green); color: #fff; border-radius: 10px; padding: 14px 12px;
}
.gmi-side-pcard h3 { font-family: var(--gs-serif); font-size: 19px; font-weight: 600; line-height: 1.15; color: #fff; margin-bottom: 6px; }
.gmi-side-pcard p { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.gmi-side .gmi-side-pcard a,
.gmi-side .gmi-side-pcard a:visited { display: block; text-align: center; font-size: 13px; font-weight: 700; color: #2B2410 !important; background: var(--gs-gold-light); padding: 10px; border-radius: 8px; text-decoration: none !important; }
/* ── Feed: brug den klassiske grid-container, men vores kort ── */
.gmi-side-feed.gmi-feed { --gmi-gap: 12px; }
.gmi-side-feed .gmi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.gmi-side-feed .gmi-load-more-wrap { margin-top: 24px; }
.gmi-side-feed .gmi-load-more { padding: 12px 30px; }
/* Mobil: bryd ud af Elementor-containerens padding og brug hele skærmbredden */
@media (max-width: 719px) {
.gmi-side { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gmi-side-popular { margin: 0 -12px; padding: 0 12px 6px; }
}
/* ── Tablet ──────────────────────────────── */
@media (min-width: 720px) {
.gmi-side { padding: 8px 24px 32px; }
.gmi-side .gmi-side-heading { font-size: 28px; margin-top: 36px; }
.gmi-side-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.gmi-side-hero-media { aspect-ratio: auto; height: 100%; min-height: 420px; }
.gmi-side-hero-media img { position: absolute; inset: 0; }
.gmi-side-hero-body { padding: 26px 28px 24px; justify-content: center; gap: 10px; }
.gmi-side-hero-title { font-size: 32px; }
.gmi-side-hero-caption { font-size: 16px; }
.gmi-side-hero-caption.is-clamped p { -webkit-line-clamp: 9; }
.gmi-side-hero-body .gmi-side-btn { max-width: 320px; }
.gmi-side-cards { grid-template-columns: repeat(4, 1fr); gap: 14px; } /* hero + 4 → én hel række */
.gmi-side-feed .gmi-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gmi-side-premium { padding: 32px 32px 26px; }
.gmi-side-premium-title { font-size: 36px; }
.gmi-side-premium-text { font-size: 16px; max-width: 560px; }
.gmi-side-premium-ctas .gmi-side-btn { max-width: 360px; margin: 0 auto; }
.gmi-side-popular { margin: 0; padding: 0 0 6px; gap: 14px; } /* ingen kant-til-kant på store skærme */
.gmi-side-popular-track { gap: 14px; }
.gmi-side-popular::after { flex-basis: 90px; margin-left: -90px; }
.gmi-side .gmi-side-pop { flex-basis: 170px; }
.gmi-side-pop-title { font-size: 15px; }
}
/* ── Desktop ─────────────────────────────── */
@media (min-width: 1024px) {
.gmi-side { max-width: 1100px; padding: 12px 32px 40px; }
.gmi-side-profile { padding: 18px 0 12px; }
.gmi-side-band { padding: 14px 18px; }
.gmi-side-band-text b { font-size: 19px; }
.gmi-side-band-text p { font-size: 13.5px; }
.gmi-side-hero { grid-template-columns: 11fr 9fr; }
.gmi-side-hero-media { min-height: 520px; }
.gmi-side-hero-title { font-size: 36px; }
.gmi-side-hero-caption { font-size: 17px; }
.gmi-side-hero-caption.is-clamped p { -webkit-line-clamp: 12; }
.gmi-side-feed .gmi-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gmi-side-cards { gap: 16px; }
/* Premium-modulet som web-layout: tekst + låse til venstre, knap + pris til højre (Jes 13/10) */
.gmi-side-premium {
padding: 36px 40px 32px;
display: grid; grid-template-columns: 3fr 2fr; column-gap: 40px; row-gap: 0;
grid-template-areas: "who cta" "title cta" "text cta" "usps cta";
align-items: start;
}
.gmi-side-premium::before { grid-area: 1 / 1 / -1 / -1; }
.gmi-side-premium-who { grid-area: who; }
.gmi-side-premium-title { grid-area: title; }
.gmi-side-premium-text { grid-area: text; }
.gmi-side-premium-usps { grid-area: usps; margin-bottom: 0; }
.gmi-side-premium-ctas { grid-area: cta; align-self: center; margin: 0; padding: 22px 24px 20px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.gmi-side-premium-ctas .gmi-side-btn { max-width: none; margin: 0 0 12px; }
.gmi-side-premium-meta { grid-area: cta; align-self: end; margin: 0 24px 20px; pointer-events: none; }
.gmi-side-premium-meta a { pointer-events: auto; }
.gmi-side .gmi-side-pop { flex-basis: 190px; }
}
@media (prefers-reduced-motion: reduce) {
.gmi-side * { transition: none !important; scroll-behavior: auto !important; }
}
/* ═══════════════════════════════════════════════
LEGACY — det nuværende Premium-modul, porteret fra Elementor (side 324951, 13/10/2026).
Vises når gaten er FRA. Må gerne slettes når det nye layout er live for alle.
═══════════════════════════════════════════════ */
.gm-premium-mod *,.gm-premium-mod *::before,.gm-premium-mod *::after{box-sizing:border-box;margin:0;padding:0}
.gm-premium-mod h2,.gm-premium-mod h3,.gm-premium-mod p,.gm-premium-mod span,.gm-premium-mod strong{text-transform:none !important;letter-spacing:normal !important;text-decoration:none !important}
.gm-premium-mod img{border:none !important;box-shadow:none !important;margin:0 !important;padding:0 !important;background:none !important;filter:none !important;display:block !important;float:none !important;position:static !important;transform:none !important;max-width:none !important}
.gm-premium-mod div[class*="ai-"],.gm-premium-mod div[data-ai],.gm-premium-mod ins,.gm-premium-mod iframe,.gm-premium-mod div[id*="adfox"],.gm-premium-mod div[id*="ad-"],.gm-premium-mod div[class*="ad-"],.gm-premium-mod div[class*="adsbygoogle"],.gm-premium-mod .code-block,.gm-premium-mod div[style*="min-height"]:not([class*="gm-"]){display:none !important;height:0 !important;overflow:hidden !important;visibility:hidden !important;max-height:0 !important;margin:0 !important;padding:0 !important}
.gm-premium-mod{font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:#2C4A3A;color:#fff;border-radius:24px;overflow:hidden;max-width:800px;margin:0 auto;padding:0;position:relative}
.gm-premium-mod::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(184,136,58,.15),transparent 70%);pointer-events:none}
.gm-pm-inner{position:relative;z-index:1;padding:36px 28px 32px}
.gm-pm-top{display:flex !important;align-items:center;gap:14px;margin-bottom:24px}
.gm-premium-mod img.gm-pm-avatar{width:52px !important;height:52px !important;min-width:52px !important;border-radius:50% !important;object-fit:cover !important;border:2px solid rgba(255,255,255,.15) !important;flex-shrink:0;aspect-ratio:1/1 !important}
.gm-pm-who{flex:1;min-width:0}
.gm-premium-mod .gm-pm-who strong{display:block !important;font-size:15px !important;font-weight:700 !important;color:#fff !important}
.gm-premium-mod .gm-pm-who span{font-size:12px !important;color:rgba(255,255,255,.5) !important;display:block !important}
.gm-premium-mod .gm-pm-badge{display:inline-flex !important;align-items:center !important;gap:5px;padding:5px 12px !important;border-radius:16px !important;background:rgba(184,136,58,.2) !important;border:1px solid rgba(184,136,58,.3) !important;font-size:11px !important;font-weight:700 !important;color:#D4A94E !important;letter-spacing:.3px !important;text-transform:uppercase !important;flex-shrink:0;line-height:1.4 !important}
.gm-premium-mod .gm-pm-headline{font-family:'EB Garamond',Georgia,serif !important;font-size:28px !important;font-weight:600 !important;line-height:1.2 !important;margin-bottom:8px !important;color:#fff !important;background:none !important;border:none !important;padding:0 !important;text-transform:none !important;letter-spacing:0 !important}
.gm-premium-mod .gm-pm-headline em{font-style:italic;color:#D4A94E !important}
.gm-premium-mod .gm-pm-sub{font-size:14px !important;color:rgba(255,255,255,.55) !important;line-height:1.5 !important;margin-bottom:24px !important;max-width:500px}
.gm-pm-usps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.gm-premium-mod .gm-pm-chip{display:inline-flex !important;align-items:center !important;gap:6px;padding:8px 14px !important;border-radius:10px !important;background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.08) !important;font-size:13px !important;font-weight:500 !important;color:rgba(255,255,255,.85) !important}
.gm-pm-chip svg{width:16px;height:16px;stroke:#D4A94E;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.gm-pm-ctas{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.gm-premium-mod .gm-pm-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px;padding:15px 24px !important;border-radius:14px !important;font-family:'DM Sans',sans-serif !important;font-size:15px !important;font-weight:700 !important;text-decoration:none !important;transition:all .2s ease;letter-spacing:.2px;border:none !important;cursor:pointer}
.gm-premium-mod .gm-pm-btn-gold{background:linear-gradient(135deg,#B8883A,#D4A94E) !important;color:#fff !important;box-shadow:0 4px 16px rgba(184,136,58,.35) !important}
.gm-pm-btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,136,58,.45) !important}
.gm-premium-mod .gm-pm-btn-ghost{background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.12) !important;color:#fff !important}
.gm-pm-btn-ghost:hover{background:rgba(255,255,255,.14) !important;transform:translateY(-1px)}
.gm-pm-btn svg{width:20px;height:20px;flex-shrink:0}
.gm-pm-web{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px !important;color:rgba(255,255,255,.45) !important;padding-top:16px;border-top:1px solid rgba(255,255,255,.06) !important}
.gm-premium-mod .gm-pm-web a{color:#D4A94E !important;font-weight:600 !important;text-decoration:none !important}
.gm-premium-mod .gm-pm-web a:hover{text-decoration:underline !important}
div.gm-premium-mod .gm-pm-foods{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;padding:0 !important;margin:0 !important;position:relative;z-index:1;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
div.gm-premium-mod .gm-pm-foods::-webkit-scrollbar{display:none}
div.gm-premium-mod .gm-pm-foods img{display:block !important;width:200px !important;min-width:200px !important;max-width:200px !important;height:120px !important;min-height:120px !important;max-height:120px !important;flex:0 0 200px !important;object-fit:cover !important;border-radius:12px !important;opacity:.85;transition:opacity .2s;scroll-snap-align:start}
div.gm-premium-mod .gm-pm-foods img:hover{opacity:1}
.gm-pm-price{text-align:center;padding:12px 0 24px;position:relative;z-index:1}
.gm-pm-price span{display:inline-block;font-size:12px;color:rgba(255,255,255,.4);padding:6px 16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.gmi-side-legacy .gmi-top-widget,.gmi-side-legacy .gmi-feed-frame{margin-top:24px}
@media(min-width:600px){
.gm-pm-inner{padding:44px 40px 36px}
.gm-premium-mod .gm-pm-headline{font-size:34px !important}
.gm-pm-ctas{flex-direction:row}
.gm-pm-btn{padding:14px 28px !important;font-size:14px !important}
div.gm-premium-mod .gm-pm-foods{padding:0 40px !important;gap:10px !important;overflow:visible !important}
div.gm-premium-mod .gm-pm-foods img{flex:1 1 0% !important;width:auto !important;min-width:0 !important;max-width:none !important;height:140px !important;min-height:140px !important;max-height:140px !important;border-radius:14px !important;scroll-snap-align:none}
.gm-pm-price{padding:12px 40px 28px}
}