/* ============================================
   VERBENA PROJECTS - Ad Popup Stylesheet
   ads.css

   Depends on the CSS variables defined in the
   host site's stylesheet. If those variables
   are not present, the fallback values below
   will be used instead.

   Variable reference (from verbenaprojects.com):
     --primary-green : #677e4b
     --text-light    : #d8cfee
     --text-dark     : #000
     --bg-dark       : #1a1a1a
     --bg-light      : #ffffff
   ============================================ */


/* --- OVERLAY --------------------------------
   The full-screen dimmed background that appears
   behind the popup card. z-index is set high to
   ensure it sits above all page content.
   pointer-events: none on the overlay itself
   means clicks pass through to the close button.
   ------------------------------------------- */

#vp-ad-overlay {
  position: fixed;
  inset: 0;                                        /* shorthand for top/right/bottom/left: 0 */
  background: rgba(26, 26, 26, 0.75);             /* --bg-dark at 75% opacity */
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Fade in smoothly */
  opacity: 0;
  animation: vp-fade-in 0.4s ease forwards;
}


/* --- CARD -----------------------------------
   The popup card itself. Sits above the overlay.
   Max-width keeps it contained on large screens.
   Width: 90vw ensures it doesn't overflow on mobile.
   ------------------------------------------- */

#vp-ad-card {
  position: relative;
  background: var(--bg-light, #ffffff);
  border-radius: 8px;                             /* matches .project-card on main site */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  width: 90vw;
  max-width: 420px;
  overflow: hidden;                               /* keeps image inside rounded corners */
  z-index: 9999;

  /* Slide up slightly as it appears */
  animation: vp-slide-up 0.4s ease forwards;
}


/* --- CLOSE BUTTON ---------------------------
   Positioned in the top-right corner of the card.
   High contrast so it's always visible, whether
   there's an image behind it or not.
   ------------------------------------------- */

#vp-ad-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: rgba(26, 26, 26, 0.55);            /* semi-dark so visible over any image */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 0.2s ease;
}

#vp-ad-close:hover {
  background: rgba(26, 26, 26, 0.85);
}


/* --- IMAGE ----------------------------------
   16:9 ratio image at the top of the card.
   object-fit: cover ensures it never distorts.
   Hidden by default — shown only when image_url
   is present (toggled by ads.js).
   ------------------------------------------- */

#vp-ad-image-wrap {
  display: none;                                  /* shown by JS when image_url exists */
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#vp-ad-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --- CARD BODY ------------------------------
   Padding around the text content and button.
   ------------------------------------------- */

#vp-ad-body {
  padding: 1.5rem;
  font-family: 'Noto Sans', Arial, sans-serif;   /* matches host site */
}


/* --- HEADLINE ------------------------------- */

#vp-ad-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark, #000000);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}


/* --- BODY TEXT ------------------------------ */

#vp-ad-text {
  font-size: 0.95rem;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}


/* --- CTA BUTTON ----------------------------
   Matches the .btn style from the main site:
   solid green fill, transparent on hover with
   green border and text.
   ------------------------------------------- */

#vp-ad-cta {
  display: inline-block;
  padding: 0.7rem 1.75rem;
  background: var(--primary-green, #677e4b);
  color: #ffffff;
  text-decoration: none;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid var(--primary-green, #677e4b);
  transition: background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

#vp-ad-cta:hover {
  background: transparent;
  color: var(--primary-green, #677e4b);
}


/* --- SPONSOR LABEL -------------------------
   A small "Sponsored" tag shown only on paid
   placements. Hidden by default, shown by JS
   when sponsor: true.
   ------------------------------------------- */

#vp-ad-sponsor-label {
  display: none;                                  /* shown by JS when sponsor: true */
  font-size: 0.7rem;
  color: #999999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}


/* --- ANIMATIONS ----------------------------- */

@keyframes vp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vp-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- MOBILE ADJUSTMENTS --------------------
   On small screens the card stretches wider
   and text scales down slightly.
   ------------------------------------------- */

@media (max-width: 480px) {
  #vp-ad-card {
    width: 95vw;
    border-radius: 6px;
  }

  #vp-ad-headline {
    font-size: 1.1rem;
  }

  #vp-ad-body {
    padding: 1.25rem;
  }
}