/**
 * Module: Advertisement Styles
 */

/* ===================================
   ADVERTISEMENT MODULE
   =================================== */

.mod-advertisement {
  margin: var(--tcp-space-12) 0;
  width: 100%;
}

.advertisement-wrapper {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
}

/* ===================================
   INTERNAL ADVERTISEMENT
   =================================== */

.advertisement-internal {
  align-items: center;
  background: var(--tcp-gray-100);
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  position: relative;
  width: 100%;
}

.advertisement-link,
.advertisement-content {
  display: block;
  height: auto;
  margin: 0 auto;
  transition: opacity 0.3s ease;
  width: 100%;
}

.advertisement-link:hover {
  opacity: 0.9;
}

/* Ad Images */
.ad-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Desktop Image - Default visible */
.ad-image-desktop {
  display: block;
}

/* Mobile Image - Hidden by default */
.ad-image-mobile {
  display: none;
}

/* ===================================
   GOOGLE ADS
   =================================== */

.advertisement-google {
  align-items: center;
  background: var(--tcp-gray-100);
  display: flex;
  flex-direction: column;
  padding: var(--tcp-space-4) 0;
  position: relative;
  width: 100%;
}

.google-ads-container {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet and below - Show mobile image if available */
@media (max-width: 768px) {
  .mod-advertisement {
    margin: var(--tcp-space-8) 0;
  }

  /* Hide desktop image */
  .ad-image-desktop {
    display: none;
  }

  /* Show mobile image */
  .ad-image-mobile {
    display: block;
    max-width: 768px;
  }

  /* If only desktop image exists, show it */
  .advertisement-internal:not(:has(.ad-image-mobile)) .ad-image-desktop {
    display: block;
    max-width: 100%;
  }

  .advertisement-link,
  .advertisement-content {
    max-width: 100%;
  }

  .google-ads-container {
    max-width: 100%;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .mod-advertisement {
    margin: var(--tcp-space-6) 0;
  }
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
  @media (max-width: 768px) {
    .ad-image-desktop {
      display: none;
    }

    .ad-image-mobile {
      display: block;
    }
  }

  /* If no mobile image, show desktop as fallback */
  .advertisement-internal .ad-image-desktop:only-child {
    display: block !important;
  }
}