/* Munich Dog Trainer Bento — Frontend Styles */ /* Prevent horizontal scrollbar caused by full-bleed breakout */ html:has(.mdt-bento-wrapper) { overflow-x: clip; } body:has(.mdt-bento-wrapper) { overflow-x: clip; } /* ============================================================ FULLSCREEN PAGE TEMPLATE — chrome containers Theme header (optional) and Bento footer (custom) render as direct children of . ============================================================ */ body.mdt-fullscreen > .mdt-fullscreen-header, body.mdt-fullscreen > .mdt-fullscreen-footer { width: 100%; position: relative; z-index: 1; } body.mdt-fullscreen > .mdt-fullscreen-header { background: #fff; border-bottom: 1px solid rgba(26,58,45,0.08); } body.mdt-fullscreen > .mdt-fullscreen-header > * { max-width: var(--wp--style--global--wide-size, 1400px); margin-inline: auto; padding-inline: var(--wp--style--root--padding-inline, 24px); } body.mdt-fullscreen > .mdt-fullscreen-footer { margin-top: auto; /* stick footer to bottom when content is short */ } /* ============================================================ Force-break out of block-theme containers (Twenty Twenty-Five wraps shortcodes in .entry-content.alignfull.has-global-padding .is-layout-constrained .wp-block-post-content, which apply padding-inline from --wp--style--root--padding-inline). We neutralise that padding on the direct ancestor chain. ============================================================ */ .entry-content:has(> .mdt-bento-wrapper), .wp-block-post-content:has(> .mdt-bento-wrapper), .has-global-padding:has(> .mdt-bento-wrapper), .is-layout-constrained:has(> .mdt-bento-wrapper) { padding-inline: 0 !important; max-width: none !important; width: 100% !important; margin-inline: 0 !important; } .entry-content > .mdt-bento-wrapper, .wp-block-post-content > .mdt-bento-wrapper { max-width: none !important; width: 100% !important; } .mdt-bento-wrapper { --mdt-bg: #EEF4F0; --mdt-white: #F7FBFA; --mdt-dark: #1B3A2D; --mdt-dark2: #2D5C47; --mdt-green: #2A6049; --mdt-green2: #3D8B6A; --mdt-green-light: #D4EDE3; --mdt-sand-light: #C8E6DA; --mdt-terra: #3A7CA5; --mdt-gold-light: #A8DCC8; --mdt-sky: #5BA4CF; --mdt-sky-light: #D6EDF8; --mdt-mint: #E8F6F0; --mdt-r2: 28px; /* Full-bleed: break out of theme content container. Uses vw (fallback), upgraded to dvw via @supports below. */ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; max-width: 100vw; background: var(--mdt-bg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--mdt-dark); padding: 40px max(28px, 5vw); box-sizing: border-box; } /* Modern viewport units: use dvw to avoid scrollbar overflow on browsers that support it. Flat @supports — no CSS nesting required. */ @supports (width: 100dvw) { .mdt-bento-wrapper { margin-left: -50dvw; margin-right: -50dvw; width: 100dvw; max-width: 100dvw; } } .mdt-bento *, .mdt-bento *::before, .mdt-bento *::after { box-sizing: border-box; } .mdt-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(260px, auto) minmax(200px, auto) minmax(260px, auto) minmax(220px, auto); gap: 14px; max-width: 1400px; margin: 0 auto; } .mdt-card { border-radius: var(--mdt-r2); overflow: hidden; position: relative; transition: transform 0.28s cubic-bezier(.22,.68,0,.99), box-shadow 0.28s; background: var(--mdt-white); } .mdt-card:hover { transform: translateY(-5px); box-shadow: 0 28px 70px rgba(26,18,8,0.13); } /* Grid positions */ .mdt-c-hero { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 460px; } .mdt-c-about { grid-column: 6 / 9; grid-row: 1; min-height: 260px; } .mdt-c-lang { grid-column: 9 / 13; grid-row: 1; min-height: 260px; } .mdt-c-service { grid-column: 6 / 10; grid-row: 2; min-height: 200px; } .mdt-c-stat { grid-column: 10 / 13; grid-row: 2; min-height: 200px; } .mdt-c-blog { grid-column: 1 / 5; grid-row: 3; min-height: 260px; } .mdt-c-review { grid-column: 5 / 9; grid-row: 3; min-height: 260px; } .mdt-c-chat { grid-column: 9 / 13; grid-row: 3; min-height: 260px; } .mdt-c-booking { grid-column: 1 / 4; grid-row: 4; min-height: 220px; } .mdt-c-cert { grid-column: 4 / 7; grid-row: 4; min-height: 220px; } .mdt-c-video { grid-column: 7 / 10; grid-row: 4; min-height: 220px; } .mdt-c-map { grid-column: 10 / 13; grid-row: 4; min-height: 220px; } /* Themes */ .mdt-th-white { background: var(--mdt-white); border: 1px solid rgba(26,18,8,0.07); } .mdt-th-sand { background: var(--mdt-sand-light); } .mdt-th-mint { background: var(--mdt-mint); border: 1px solid rgba(42,96,73,0.12); } .mdt-th-green { background: linear-gradient(135deg, #2D5C47 0%, #3D8B6A 100%); } .mdt-th-blue { background: linear-gradient(135deg, #3A7CA5 0%, #5BA4CF 100%); } .mdt-th-dark-green { background: linear-gradient(135deg, #1B3A2D 0%, #2A6049 100%); } .mdt-th-sky-light { background: var(--mdt-sky-light); border: 1px solid rgba(58,124,165,0.15); } /* Card content */ .mdt-card-inner { padding: 28px; height: 100%; display: flex; flex-direction: column; } .mdt-card-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; color: var(--mdt-dark2); } .mdt-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--mdt-dark); } .mdt-card-title em { font-style: italic; color: var(--mdt-green); } .mdt-tw { color: #fff !important; } .mdt-tw em { color: var(--mdt-gold-light); } /* HERO */ .mdt-c-hero { background: linear-gradient(135deg, #1B3A2D 0%, #2A6049 60%, #3D8B6A 100%); } .mdt-hero-photo { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; background-size: cover; background-position: top center; border-radius: 0 var(--mdt-r2) var(--mdt-r2) 0; } .mdt-hero-overlay { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: linear-gradient(to right, #1B3A2D 30%, transparent 100%); z-index: 1; } .mdt-hero-inner { width: 55%; position: relative; z-index: 2; justify-content: flex-end; padding: 36px; } .mdt-hero-badge { position: absolute; top: 28px; right: 28px; z-index: 3; background: #fff; border-radius: 14px; padding: 12px 18px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .mdt-hero-badge-num { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: #2A6049; line-height: 1; } .mdt-hero-badge-text { font-size: 10px; color: #666; margin-top: 3px; font-weight: 500; } .mdt-hero-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mdt-gold-light); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .mdt-hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--mdt-gold-light); display: block; } .mdt-hero-name { font-family: 'Playfair Display', serif; color: #fff; font-size: clamp(32px, 3.4vw, 52px); font-weight: 700; line-height: 1.0; letter-spacing: -0.03em; margin-bottom: 6px; /* Long compound words (German "Hundetrainerin", etc.) break and hyphenate instead of overflowing into the photo area. Requires lang=… on parent. */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; } .mdt-hero-name em { font-style: italic; color: var(--mdt-gold-light); hyphens: auto; -webkit-hyphens: auto; /* Slightly tighter on the italic line so it leaves room for the photo */ font-size: 0.88em; } .mdt-hero-desc { font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 340px; margin-bottom: 24px; } .mdt-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; } .mdt-btn-primary { background: var(--mdt-gold-light); color: var(--mdt-dark); padding: 12px 24px; border-radius: 24px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-block; } .mdt-btn-primary:hover { background: #C8E6DA; } .mdt-btn-ghost { background: rgba(255,255,255,0.1); color: #fff; padding: 12px 20px; border-radius: 24px; font-size: 13px; font-weight: 400; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); display: inline-block; transition: all 0.2s; } .mdt-btn-ghost:hover { background: rgba(255,255,255,0.18); } /* ABOUT */ .mdt-about-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-bottom: 14px; background: var(--mdt-green-light); } .mdt-about-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .mdt-about-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--mdt-dark); margin-bottom: 4px; } .mdt-about-role { font-size: 12px; color: var(--mdt-dark2); font-weight: 400; } .mdt-about-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .mdt-atag { background: var(--mdt-green-light); color: var(--mdt-green); padding: 5px 10px; border-radius: 10px; font-size: 11px; font-weight: 500; } /* LANG GRID */ .mdt-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .mdt-lang-item { background: rgba(26,58,45,0.07); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--mdt-dark); text-decoration: none; transition: background 0.15s, transform 0.15s; } a.mdt-lang-item:hover { background: rgba(26,58,45,0.14); transform: translateY(-1px); } .mdt-lang-item img { border-radius: 2px; flex-shrink: 0; } .mdt-lang-item.mdt-lang-current { background: var(--mdt-green); color: #fff; box-shadow: 0 4px 12px rgba(42,96,73,0.25); } .mdt-lang-item.mdt-lang-current:hover { background: var(--mdt-green); } /* SERVICES */ .mdt-c-service .mdt-card-tag { color: rgba(255,255,255,0.9); } .mdt-service-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .mdt-stag { padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.35); } .mdt-price-row { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 16px; } .mdt-price-from { font-size: 11px; color: rgba(255,255,255,0.6); } .mdt-price-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: #fff; line-height: 1; } .mdt-price-unit { font-size: 13px; color: rgba(255,255,255,0.6); } /* STAT */ .mdt-stat-num { font-family: 'Playfair Display', serif; font-size: clamp(52px, 5vw, 72px); font-weight: 700; color: var(--mdt-terra); line-height: 0.85; letter-spacing: -0.03em; } .mdt-stat-label { font-size: 13px; color: var(--mdt-dark2); margin-top: 10px; font-weight: 400; } .mdt-stat-sub { font-size: 11px; color: var(--mdt-dark2); opacity: 0.5; margin-top: 4px; } /* BLOG */ .mdt-blog-posts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; flex: 1; } .mdt-blog-item { background: rgba(26,58,45,0.05); border-radius: 12px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; transition: background 0.2s; } .mdt-blog-item:hover { background: rgba(26,58,45,0.1); } .mdt-blog-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mdt-green2); margin-top: 5px; flex-shrink: 0; } .mdt-dot-1 { background: var(--mdt-terra); } .mdt-dot-2 { background: var(--mdt-gold-light); } .mdt-blog-text { font-size: 12px; line-height: 1.4; color: var(--mdt-dark); } .mdt-blog-date { font-size: 10px; color: var(--mdt-dark2); opacity: 0.5; margin-top: 3px; } .mdt-blog-arrow { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--mdt-green2); font-weight: 500; text-decoration: none; } /* REVIEW */ .mdt-stars { color: #FFD700; font-size: 16px; margin-bottom: 12px; letter-spacing: 3px; } .mdt-review-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.5; color: #fff; flex: 1; } .mdt-review-author { margin-top: 16px; } .mdt-review-name { font-size: 13px; font-weight: 600; color: #fff; } .mdt-review-dog { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; } .mdt-review-count { position: absolute; bottom: 28px; right: 28px; font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 700; color: rgba(255,255,255,0.08); line-height: 1; } /* ============================================================ SLIDER (used by the reviews card; reusable for future cards) ============================================================ */ .mdt-has-slider .mdt-card-inner { position: relative; } .mdt-slider-viewport { position: relative; flex: 1; overflow: hidden; margin-top: 4px; /* Reserve space for dots row */ padding-bottom: 18px; } .mdt-slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(.22,.68,0,.99); will-change: transform; } .mdt-slide { flex: 0 0 100%; min-width: 100%; display: flex; flex-direction: column; /* Each slide owns its stars + text + author triplet */ } .mdt-slide .mdt-stars { margin-bottom: 10px; } .mdt-slide .mdt-review-text { flex: 1; } .mdt-slider-dots { position: absolute; left: 28px; right: 28px; bottom: 18px; display: flex; gap: 6px; justify-content: flex-start; z-index: 2; } .mdt-slider-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.25); transition: background 0.2s, transform 0.2s, width 0.25s; } .mdt-slider-dot:hover { background: rgba(255,255,255,0.45); } .mdt-slider-dot-active { background: #fff; width: 22px; border-radius: 4px; } .mdt-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.2s; z-index: 3; } .mdt-has-slider:hover .mdt-slider-arrow { opacity: 1; } .mdt-slider-arrow:hover { background: rgba(255,255,255,0.25); } .mdt-slider-prev { left: 8px; } .mdt-slider-next { right: 8px; } /* Always-visible arrows on touch devices (no hover) */ @media (hover: none) { .mdt-slider-arrow { opacity: 1; background: rgba(255,255,255,0.18); } } /* CHAT */ .mdt-c-chat .mdt-card-tag { color: rgba(255,255,255,0.9); } .mdt-chat-msgs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; flex: 1; } .mdt-chat-b { padding: 9px 13px; border-radius: 14px; font-size: 12px; line-height: 1.45; max-width: 85%; } .mdt-chat-bot { background: rgba(255,255,255,0.12); color: #fff; border-bottom-left-radius: 4px; align-self: flex-start; } .mdt-chat-input-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; cursor: pointer; } .mdt-chat-fake-input { flex: 1; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 9px 14px; font-size: 11px; color: rgba(255,255,255,0.5); } .mdt-chat-send { width: 32px; height: 32px; border-radius: 50%; background: var(--mdt-gold-light); border: none; cursor: pointer; font-size: 14px; } /* BOOKING */ .mdt-booking-days { display: flex; gap: 6px; margin-top: 12px; } .mdt-bday { flex: 1; background: rgba(26,58,45,0.07); border-radius: 10px; padding: 8px 4px; text-align: center; font-size: 10px; font-weight: 500; color: var(--mdt-dark2); } .mdt-bday-on { background: var(--mdt-green); color: #fff; } .mdt-bday span { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--mdt-dark); } .mdt-bday-on span { color: #fff; } .mdt-booking-cta { margin-top: auto; background: var(--mdt-dark); color: #fff; border: none; border-radius: 14px; padding: 12px; font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; } .mdt-booking-cta:hover { background: var(--mdt-green); } /* CERT */ .mdt-cert-icon { font-size: 48px; margin-bottom: 10px; display: block; } .mdt-cert-name { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--mdt-dark); margin-bottom: 4px; line-height: 1.1; } .mdt-cert-sub { font-size: 11px; color: var(--mdt-dark2); opacity: 0.7; margin-top: 8px; } .mdt-cert-badges { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .mdt-cert-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 5px 9px; font-size: 11px; font-weight: 600; } .mdt-cb-de { background: rgba(26,58,45,0.1); color: var(--mdt-dark); } .mdt-cb-es { background: rgba(58,124,165,0.1); color: var(--mdt-terra); } .mdt-cb-pdte { background: rgba(168,220,200,0.5); color: var(--mdt-dark); font-weight: 700; } .mdt-cert-badge img { border-radius: 1px; } /* VIDEO */ .mdt-c-video { padding: 0; } .mdt-c-video.mdt-clickable { cursor: pointer; } /* Real YouTube/Vimeo thumbnail behind the overlay. object-fit: cover means horizontal thumbs fill the card AND vertical videos get auto-cropped to the visible center. */ .mdt-video-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--mdt-r2); display: block; } .mdt-video-thumb-overlay { position: absolute; inset: 0; border-radius: var(--mdt-r2); background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 70%), linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 55%); pointer-events: none; } .mdt-video-thumb { position: absolute; inset: 0; background: linear-gradient(135deg, var(--mdt-green) 0%, var(--mdt-dark) 100%); display: flex; align-items: center; justify-content: center; border-radius: var(--mdt-r2); } /* When a real thumbnail is rendered, hide the fallback gradient so only the play button + label remain visible on top of it. */ .mdt-c-video-has-thumb .mdt-video-thumb { background: transparent; } .mdt-play-btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1.5px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; cursor: pointer; transition: transform 0.2s, background 0.2s; position: relative; z-index: 2; } .mdt-c-video.mdt-clickable:hover .mdt-play-btn { background: rgba(255,255,255,0.3); transform: scale(1.08); } .mdt-video-label { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; } .mdt-video-tag { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 4px; } .mdt-video-title { font-size: 13px; font-weight: 500; color: #fff; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } /* MAP */ .mdt-c-map { padding: 0; } .mdt-map-inner { position: absolute; inset: 0; overflow: hidden; border-radius: var(--mdt-r2); background: #e8e4d8; /* fallback while iframe loads */ } .mdt-map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; /* Slight desaturation + warm tint so the OSM tiles match the bento palette */ filter: saturate(0.85) hue-rotate(-8deg); transition: filter 0.3s; } .mdt-c-map:hover .mdt-map-iframe { filter: saturate(1) hue-rotate(0); } .mdt-map-label { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; z-index: 2; box-shadow: 0 6px 18px rgba(26,58,45,0.12); pointer-events: none; /* let clicks reach the map iframe */ } .mdt-map-pin-mini { width: 30px; height: 30px; border-radius: 50%; background: var(--mdt-terra); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(58,124,165,0.4); } .mdt-map-label-text { font-size: 12px; color: var(--mdt-dark); font-weight: 600; line-height: 1.3; } .mdt-map-label-sub { font-size: 10px; color: var(--mdt-dark2); opacity: 0.7; margin-top: 1px; } /* RESPONSIVE */ @media (max-width: 1200px) { .mdt-bento { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .mdt-c-hero { grid-column: 1 / 7; grid-row: auto; min-height: 420px; } .mdt-c-about { grid-column: 1 / 4; grid-row: auto; } .mdt-c-lang { grid-column: 4 / 7; grid-row: auto; } .mdt-c-service { grid-column: 1 / 4; grid-row: auto; } .mdt-c-stat { grid-column: 4 / 7; grid-row: auto; } .mdt-c-blog { grid-column: 1 / 7; grid-row: auto; } .mdt-c-review { grid-column: 1 / 4; grid-row: auto; } .mdt-c-chat { grid-column: 4 / 7; grid-row: auto; } .mdt-c-booking { grid-column: 1 / 4; grid-row: auto; } .mdt-c-cert { grid-column: 4 / 7; grid-row: auto; } .mdt-c-video { grid-column: 1 / 4; grid-row: auto; } .mdt-c-map { grid-column: 4 / 7; grid-row: auto; } .mdt-c-instagram { grid-column: 1 / 7; grid-row: auto; } } @media (max-width: 640px) { .mdt-bento-wrapper { padding: 20px 14px; } .mdt-bento { grid-template-columns: 1fr; gap: 12px; } .mdt-bento > * { grid-column: 1 !important; } .mdt-c-hero { min-height: 520px; } .mdt-hero-photo { width: 100%; opacity: 0.4; } .mdt-hero-overlay { display: none; } .mdt-hero-inner { width: 100%; } } /* INSTAGRAM CARD */ .mdt-c-instagram { grid-column: 1 / 13; grid-row: 5; min-height: 260px; background: linear-gradient(135deg, #2A6049 0%, #3D8B6A 50%, #5BA4CF 100%); position: relative; overflow: hidden; } .mdt-ig-inner { padding: 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; height: 100%; } .mdt-ig-left { color: #fff; } .mdt-ig-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; } .mdt-ig-icon-small { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; } .mdt-ig-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin-bottom: 10px; } .mdt-ig-title em { font-style: italic; color: var(--mdt-gold-light); } .mdt-ig-handle { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 500; margin-bottom: 18px; } .mdt-ig-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--mdt-dark); padding: 12px 22px; border-radius: 24px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; } .mdt-ig-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); } .mdt-ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 220px; } .mdt-ig-post { border-radius: 14px; overflow: hidden; position: relative; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 42px; transition: transform 0.25s; text-decoration: none; } .mdt-ig-post:hover { transform: scale(1.05); z-index: 2; } .mdt-ig-post img { width: 100%; height: 100%; object-fit: cover; } .mdt-ig-post-1 { background: linear-gradient(135deg, #4A7A4C 0%, #2D5C47 100%); } .mdt-ig-post-2 { background: linear-gradient(135deg, #C8973A 0%, #B85C38 100%); } .mdt-ig-post-3 { background: linear-gradient(135deg, #5BA4CF 0%, #3A7CA5 100%); } .mdt-ig-post-4 { background: linear-gradient(135deg, #2A6049 0%, #1B3A2D 100%); } .mdt-ig-reel-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border-radius: 6px; padding: 3px 7px; font-size: 9px; color: #fff; font-weight: 600; } .mdt-ig-pattern { position: absolute; right: -30px; top: -30px; font-size: 220px; opacity: 0.06; transform: rotate(-15deg); pointer-events: none; } @media (max-width: 1024px) { .mdt-c-instagram { grid-column: 1 / 7; } } @media (max-width: 640px) { .mdt-ig-inner { grid-template-columns: 1fr; gap: 20px; padding: 20px; } .mdt-ig-grid { max-height: 100px; } } /* ============================================================ BUTTON RESET — keep