/* ============================================================= Project Portfolio — Elementor-specific Styles ============================================================= */ /* ── Editor placeholder (only visible inside Elementor editor) ── */ .pp-elementor-preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: 200px; background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; color: #94a3b8; text-align: center; padding: 2rem; } .pp-elementor-preview-placeholder .eicon-gallery-grid { font-size: 3rem; color: #6366f1; } .pp-elementor-preview-placeholder p { margin: 0; font-size: 1.1rem; font-weight: 600; color: #475569; } .pp-elementor-preview-placeholder small { color: #94a3b8; font-size: .85rem; } /* ── Widget wrapper normalisation ───────────────────────────── */ .elementor-widget-pp_portfolio .pp-portfolio-wrap { width: 100%; } /* Prevent Elementor's generic heading reset from overriding card titles */ .elementor-widget-pp_portfolio .pp-item-title { font-size: inherit; line-height: inherit; margin: 0; } /* Prevent Elementor button resets from leaking into pp-btn */ .elementor-widget-pp_portfolio .pp-btn { font-size: inherit; text-transform: none; letter-spacing: normal; } /* ── Responsive column control via Elementor CSS variables ──── */ /* * Elementor writes inline CSS variables from responsive controls. * The widget's columns control maps to --pp-el-cols-desktop, * --pp-el-cols-tablet, --pp-el-cols-mobile via Elementor's * built-in responsive system when the selector below is used * in the control's selectors array inside the widget PHP. * * Fallback chain: desktop → tablet → mobile. */ /* Desktop (default) */ .elementor-widget-pp_portfolio .pp-grid { grid-template-columns: repeat(var(--pp-el-cols, 3), 1fr); } .elementor-widget-pp_portfolio .pp-masonry { columns: var(--pp-el-cols, 3); } /* Tablet — Elementor adds .elementor-device-tablet on in editor */ @media (max-width: 1024px) { .elementor-widget-pp_portfolio .pp-grid { grid-template-columns: repeat(var(--pp-el-cols-tablet, 2), 1fr); } .elementor-widget-pp_portfolio .pp-masonry { columns: var(--pp-el-cols-tablet, 2); } } /* Mobile */ @media (max-width: 767px) { .elementor-widget-pp_portfolio .pp-grid { grid-template-columns: repeat(var(--pp-el-cols-mobile, 1), 1fr); } .elementor-widget-pp_portfolio .pp-masonry { columns: var(--pp-el-cols-mobile, 1); } } /* ── Elementor Section / Container padding override ─────────── */ /* * When the widget is placed inside an Elementor section with * zero padding, ensure the filter bar and grid still have * breathing room. */ .elementor-widget-pp_portfolio .pp-filter-bar { padding-top: .25rem; }