/* ========== LAYOUTS ========== */

/* DEFAULT 2/3 + stacked */
.ads-area[data-layout="default"],
.ads-area[data-layout="current"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad1 ad3";
}

/* Assigning areas */
.ad1-slot { grid-area: ad1; }
.ad2-slot { grid-area: ad2; }
.ad3-slot { grid-area: ad3; }
.ad4-slot { display: none; }

/* FOUR PACK */
.ads-area[data-layout="fourpack"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad3 ad4";
}
.ads-area[data-layout="fourpack"] .ad4-slot {
  display: block;
}

/* 50/50 */
.ads-area[data-layout="layout5050"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad1 ad3";
}

/* SIDE STACK (75/25 split) */
.ads-area[data-layout="sidestack"] {
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad1 ad3";
}

/* BOTTOM BANNER */
.ads-area[data-layout="bottombanner"] {
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 4fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad3 ad3";
}

/* SINGLE */
.ads-area[data-layout="single"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.ads-area[data-layout="single"] .ad2-slot,
.ads-area[data-layout="single"] .ad3-slot,
.ads-area[data-layout="single"] .ad4-slot {
  display: none;
}

/* DOUBLE */
.ads-area[data-layout="double"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "ad1 ad2";
}
.ads-area[data-layout="double"] .ad3-slot,
.ads-area[data-layout="double"] .ad4-slot {
  display: none;
}

/* =======================
   GRID BASE
   ======================= */

.ads-area {
  display: grid;
  width: 100%;
  height: 100%;
}

/* Slot → Area mapping (GLOBAL, not per layout) */
.ad1-slot { grid-area: ad1; }
.ad2-slot { grid-area: ad2; }
.ad3-slot { grid-area: ad3; }
.ad4-slot { grid-area: ad4; }

/* Ensure visible by default */
.ads-area .ad1-slot,
.ads-area .ad2-slot,
.ads-area .ad3-slot,
.ads-area .ad4-slot {
  display: block;
}

/* =======================
   LAYOUTS
   ======================= */

/* ---- DEFAULT ---- */
.ads-area[data-layout="default"],
.ads-area[data-layout="current"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad1 ad3";
}

/* ---- 50/50 ---- */
.ads-area[data-layout="layout5050"] {
    padding-bottom:6pxpx;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad1 ad3";
}

/* ---- FOUR PACK ---- */
.ads-area[data-layout="fourpack"] {
    padding-bottom:12px;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "ad1 ad2"
    "ad3 ad4";
}

/* SINGLE */
.ads-area[data-layout="single"] {
  padding-bottom:12px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "ad1";
}

.ads-area[data-layout="single"] .ad2-slot,
.ads-area[data-layout="single"] .ad3-slot,
.ads-area[data-layout="single"] .ad4-slot {
  display: none;
}