/*
 * WebsiteTool.org - Advertisement Integration System
 * Responsive, non-intrusive ad placements that maintain design integrity
 */

/* ========== Ad Container Base Styles ========== */
.ad-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-8) auto;
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .ad-container {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.ad-container::before {
  content: 'Advertisement';
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-400);
  font-weight: 500;
}

.ad-container:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

/* ========== Placement Zones ========== */

/* Top of Page - Below Hero */
.ad-zone-top {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Sidebar (for desktop layouts) */
.ad-zone-sidebar {
  position: sticky;
  top: var(--space-8);
  margin-bottom: var(--space-6);
}

/* Mid-Content - Between sections */
.ad-zone-content {
  margin: var(--space-12) auto;
}

/* Footer Area - Above actual footer */
.ad-zone-footer {
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

/* ========== Responsive Ad Sizes ========== */

/* Mobile First - 320x50 (Mobile Banner) */
.ad-container {
  min-height: 70px; /* 50px ad + padding */
  max-width: 340px; /* 320px ad + padding */
}

/* Tablet - 468x60 (Banner) */
@media (min-width: 520px) {
  .ad-container-horizontal {
    max-width: 488px; /* 468px ad + padding */
    min-height: 80px; /* 60px ad + padding */
  }
}

/* Desktop - 728x90 (Leaderboard) */
@media (min-width: 768px) {
  .ad-container-horizontal {
    max-width: 748px; /* 728px ad + padding */
    min-height: 110px; /* 90px ad + padding */
  }
}

/* Vertical Ads - 160x600 (Wide Skyscraper) */
.ad-container-vertical {
  max-width: 180px; /* 160px ad + padding */
  min-height: 620px; /* 600px ad + padding */
}

/* ========== Layout Integration ========== */

/* Two-column layout for pages with sidebar ads */
.content-with-sidebar {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .content-with-sidebar {
    grid-template-columns: 1fr 180px;
  }

  .content-with-sidebar .main-column {
    min-width: 0; /* Prevents overflow */
  }

  .content-with-sidebar .sidebar-column {
    display: block;
  }
}

@media (max-width: 1023px) {
  .content-with-sidebar .sidebar-column {
    display: none; /* Hide vertical ads on mobile/tablet */
  }
}

/* ========== Ad Wrapper - Prevents Layout Shift ========== */
.ad-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Reserve space to prevent CLS (Cumulative Layout Shift) */
.ad-wrapper.ad-mobile-banner {
  min-height: 50px;
}

.ad-wrapper.ad-banner {
  min-height: 60px;
}

.ad-wrapper.ad-leaderboard {
  min-height: 90px;
}

.ad-wrapper.ad-skyscraper {
  min-height: 600px;
}

/* ========== Loading State ========== */
.ad-container.ad-loading {
  background: linear-gradient(
    90deg,
    var(--color-gray-50) 0%,
    var(--color-gray-100) 50%,
    var(--color-gray-50) 100%
  );
  background-size: 200% 100%;
  animation: adShimmer 1.5s ease-in-out infinite;
}

@keyframes adShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ========== Homepage Grid Integration ========== */
.tool-section .ad-zone-content {
  grid-column: 1 / -1; /* Span full width in grid layouts */
}

/* ========== Accessibility ========== */
.ad-container:focus-within {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}

/* ========== Print Styles ========== */
@media print {
  .ad-container,
  .ad-zone-top,
  .ad-zone-sidebar,
  .ad-zone-content,
  .ad-zone-footer {
    display: none !important;
  }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
  .ad-container,
  .ad-container.ad-loading {
    animation: none;
    transition: none;
  }
}

/* ========== Mobile Optimization ========== */
@media (max-width: 480px) {
  .ad-container {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* ========== Utility Classes ========== */
.ad-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad-hidden {
  display: none !important;
}

/* Ad blocker detected fallback */
.ad-blocked-message {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

.ad-blocked-message::before {
  content: '💡 ';
}