.elementor-90189 .elementor-element.elementor-element-8a72272 > .elementor-widget-container{padding:20px 20px 20px 20px;}.elementor-90189 .elementor-element.elementor-element-d9e8eb6 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-90189 .elementor-element.elementor-element-81b29de .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-90189 .elementor-element.elementor-element-964e4f6 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-90189 .elementor-element.elementor-element-8e7d485 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-90189 .elementor-element.elementor-element-02fdf33 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-90189 .elementor-element.elementor-element-badc7eb .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-90189 .elementor-element.elementor-element-eda02f1{width:100%;max-width:100%;}.elementor-90189 .elementor-element.elementor-element-eda02f1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-90189 .elementor-element.elementor-element-9fb03dc > .elementor-container{max-width:500px;}.elementor-90189 .elementor-element.elementor-element-9fb03dc{padding:0px 10px 0px 10px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-90189 .elementor-element.elementor-element-75c6a2f{padding:0px 10px 0px 10px;}}/* Start custom CSS *//* ════════════════════════════════════════════════════════════════
   Point Loma Life — EDITABLE Portfolio Listing Cards
   Styles native Elementor widgets so Allison can edit listings visually
   (swap photo, type price, paste link) without touching code.

   ───────────────────────────────────────────────────────────────
   HOW TO USE
   1. Elementor → hamburger → Site Settings → Custom CSS
   2. Paste this ENTIRE file (NO <style> tags) → Update
   3. Build cards per PORTFOLIO-EDITABLE-SETUP.md, giving each widget
      the matching CSS Class noted below.

   The styling keys off CSS Classes you add to each widget in Elementor's
   Advanced tab. Once the first card is built and styled, Allison just
   DUPLICATES it and edits the content — the classes (and styling) come
   along automatically.
   ═════════════════════════════════════════════════════════════ */


/* ── GRID — parent Container, CSS Class: pll-pf-grid ──────────────
   Tip: you can instead set the Container to Display: Grid in Elementor's
   UI. This rule is a no-fuss fallback that also handles responsiveness. */
.pll-pf-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  align-items: start;
}
@media (max-width: 1024px) { .pll-pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pll-pf-grid { grid-template-columns: 1fr; } }


/* ── CARD — Container, CSS Class: pll-pf-card ─────────────────────── */
.pll-pf-card { position: relative !important; }


/* ── COVER PHOTO — Image (or Video) widget, CSS Class: pll-pf-media ── */
.pll-pf-card .pll-pf-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e6eef3;
  margin-bottom: 20px !important;
}
.pll-pf-card .pll-pf-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 800ms ease;
}
.pll-pf-card:hover .pll-pf-media img { transform: scale(1.03); }
/* Elementor Video widget overlay fills the same frame */
.pll-pf-card .pll-pf-media .elementor-wrapper,
.pll-pf-card .pll-pf-media .elementor-fit-aspect-ratio,
.pll-pf-card .pll-pf-media .elementor-custom-embed-image-overlay {
  width: 100% !important;
  height: 100% !important;
}


/* ── STATUS BADGE — Heading widget, CSS Class: pll-pf-status + variant ──
   Variants: pll-pf-status-just-listed | pll-pf-status-sold | pll-pf-status-pending */
.pll-pf-card .pll-pf-status {
  position: absolute !important;
  top: 18px;
  left: 18px;
  z-index: 2;
  margin: 0 !important;
}
.pll-pf-card .pll-pf-status .elementor-heading-title {
  display: inline-block;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 8px 14px !important;
}
.pll-pf-status-just-listed .elementor-heading-title { background: #49f1e2 !important; color: #154c79 !important; }
.pll-pf-status-sold        .elementor-heading-title { background: rgba(21,76,121,0.92) !important; color: #ffffff !important; }
.pll-pf-status-pending     .elementor-heading-title { background: #ffffff !important; color: #154c79 !important; border: 1px solid #154c79 !important; }
.pll-pf-status-coming-soon .elementor-heading-title { background: #f4f8fb !important; color: #386d81 !important; border: 1px solid #b9c9d7 !important; }


/* ── EYEBROW (e.g. "№ 01 · For Sale") — Heading, CSS Class: pll-pf-eyebrow ── */
.pll-pf-eyebrow .elementor-heading-title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(106,106,102,0.85) !important;
  margin-bottom: 8px !important;
}


/* ── PRICE — Heading, CSS Class: pll-pf-price ─────────────────────── */
.pll-pf-price .elementor-heading-title {
  font-family: "Fraunces", "Times New Roman", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.04 !important;
  color: #154c79 !important;
}


/* ── ADDRESS — Heading, CSS Class: pll-pf-address ─────────────────── */
.pll-pf-address .elementor-heading-title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #154c79 !important;
  margin-top: 8px !important;
}


/* ── NEIGHBORHOOD — Heading, CSS Class: pll-pf-neighborhood ───────── */
.pll-pf-neighborhood .elementor-heading-title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #6A6A66 !important;
  margin-top: 4px !important;
}


/* ── Make the whole card image clickable feel — link wraps work natively;
      this just keeps the cursor + lift consistent ─────────────────── */
.pll-pf-card a { text-decoration: none !important; }
.pll-pf-card .pll-pf-media a { display: block; height: 100%; }/* End custom CSS */