/* -- ADS -- */

/* ============================================================
   AD LABEL
   ============================================================ */
p.as-label {
  font-size: 12px;
  color: #777;
  margin-bottom: 5px;
  text-align: center;
}

/* ============================================================
   PLACEHOLDER BASE
   ============================================================ */
.as-placeholder {
  position: relative;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #f1f1f1,
    #f1f1f1 10px,
    #e2e2e2 10px,
    #e2e2e2 20px
  );
  border: 1px dashed #bbb;
  overflow: hidden;

  /* DEBUG OVERLAY (admin visual aid) */
  outline: 2px dashed rgba(255,0,0,0.25);
}

/* Centered content */
.as-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Size label */
.as-size {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

/* Type label */
.as-type {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 4px;
}

/* ============================================================
   RESPONSIVE SIMULATION (MIMICS ADSENSE)
   ============================================================ */

/* Mobile default */
.sidebar .as-placeholder.responsive {
	 aspect-ratio: 300 / 250;
  min-height: 250px;
}

.sidebar .as-placeholder.responsive .as-size::before {
	content: "300×250";
}

.as-placeholder.responsive {
	aspect-ratio: 300 / 250;
	width: 300px;
	/*min-height: 250px;*/
}
.as-placeholder.responsive .as-size::before {
  content: "300×250";
}

/* Tablet */
@media (min-width: 420px) {
  .as-placeholder.responsive {
    aspect-ratio: 336 / 280;
	  width: 336px;
  }
  .as-placeholder.responsive .as-size::before {
    content: "336×280";
  }
}

/* Medium */
@media (min-width: 600px) {
  .as-placeholder.responsive {
    aspect-ratio: 468 / 60;
	  width: 468px;
  }
  .as-placeholder.responsive .as-size::before {
    content: "468×60";
  }
}

/* Desktop */
/*@media (min-width: 1200px) {
  .as-placeholder.responsive {
    aspect-ratio: 728 / 90;
	  width: 728px;
  }
  .as-placeholder.responsive .as-size::before {
    content: "728×90";
  }
}*/



/* TEST REAL AD */

/* Ad container */
.asbygoo-wrapper {
  background-color: var(--bg-color);
  /*padding: 8px 16px;*/
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
	margin: 2em 0;
	
	/*width:100vw;*/
	/*display: flex;*/
	/*justify-content: center;*/
	/*min-height: 100px;*/
}

/* Dark mode styling */
/*.adsbygoogle-wrapper {
  background-color: var(--bg-color);
}*/

/* Prevent overflow */
.adsbygoogle {
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  /*padding-left: 16px;
  padding-right: 16px;*/
}

/* Mobile breakpoints */
@media (max-width: 767px) {
  .wrapper-autoscale-2columns {
    max-width: clamp(0px, 85vw, var(--max-text-width));
    /*padding-left: 16px;
    padding-right: 16px;*/
  }
}
@media (max-width:580px) {
	.article-group {
		max-width: clamp(0px, 85vw, var(--max-text-width));
	}
}
.sidebar > Section {
	max-width: clamp(0px, 85vw, var(--max-text-width));
}
.article-content-container {
	max-width: clamp(0px, 85vw, var(--max-text-width)) !important; /* gave problem from 1024 - 1300px */
}
@media (min-width: 1024px) and (max-width: 1300px) {
	.article-content-container {
		max-width: clamp(0px, 45vw, var(--max-text-width)) !important;
}
}

/*TEST PLACEHOLDER*/



/* Placeholder container */
.as-placeholder {
  position: relative;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    #f1f1f1,
    #f1f1f1 10px,
    #e2e2e2 10px,
    #e2e2e2 20px
  );
  border: 1px dashed #bbb;
  box-sizing: border-box;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  max-width: 100%; /* Ensures it doesn't exceed container */
}


/* For tablet and above, respect the container width */
@media (max-width: 1024px) {
  .as-placeholder.responsive {
    max-width: clamp(300px, 75vw, var(--max-text-width)); /* Adheres to the container's width */
  }
}

/* For mobile screens: apply max-width constraints */
@media (max-width: 767px) {
  .as-placeholder.responsive {
    max-width: clamp(300px, 85vw, var(--max-text-width)); /* Adheres to the container's width */
  }
}

/* Center the content within placeholder */
.as-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

/* Adjust placeholder size label for responsiveness */
.as-size {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

/* Adjust the type label for mobile */
.as-type {
  display: block;
  font-size: 11px;
  color: #777;
  margin-top: 4px;
}