/* Jajeer Times | ad creatives */
.jt-ad {
  --ad-bg: #fff; --ad-fg: #111; --ad-ac: #bd2e32;
  position: relative; display: grid; overflow: hidden; box-sizing: border-box;
  background: var(--ad-bg); color: var(--ad-fg);
  font-family: "Libre Franklin", Arial, sans-serif; text-decoration: none; text-align: left;
  isolation: isolate;
}
.jt-ad > span { position: relative; z-index: 1; }
.jt-ad__deco { position: absolute !important; z-index: 0 !important; pointer-events: none; }
.jt-ad__brand { font-weight: 800; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; }
.jt-ad__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jt-ad__h { font-weight: 800; line-height: 1.08; letter-spacing: -.01em; }
.jt-ad__b { line-height: 1.4; opacity: .88; }
.jt-ad__cta {
  justify-self: start; align-self: end; display: inline-block; white-space: nowrap;
  background: var(--ad-ac); color: var(--ad-bg); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 14px;
}
.jt-ad:hover .jt-ad__cta { filter: brightness(1.08); }
.jt-ad__fine { font-size: 9px; line-height: 1.3; opacity: .6; }
.jt-ad__badge {
  position: absolute !important; top: 0; right: 0; z-index: 3 !important;
  font: 600 8.5px/1 "Libre Franklin", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.88); color: #555; padding: 3px 5px;
}
.jt-ad--image { display: block; }
.jt-ad--image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Format: leaderboard 728x90 ---------- */
.jt-ad--leaderboard { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; padding: 0 22px; }
.jt-ad--leaderboard .jt-ad__h { font-size: 20px; }
.jt-ad--leaderboard .jt-ad__b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-ad--leaderboard .jt-ad__copy { gap: 3px; }
.jt-ad--leaderboard .jt-ad__cta { align-self: center; }
.jt-ad--leaderboard .jt-ad__fine { display: none; }
.jt-ad--leaderboard .jt-ad__brand { max-width: 150px; }

/* ---------- Format: mobile 320x100 ---------- */
.jt-ad--mobile { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; padding: 12px 14px; align-items: center; }
.jt-ad--mobile .jt-ad__brand { grid-column: 1; font-size: 10px; }
.jt-ad--mobile .jt-ad__copy { grid-column: 1; grid-row: 2; align-self: start; }
.jt-ad--mobile .jt-ad__h { font-size: 15px; }
.jt-ad--mobile .jt-ad__b, .jt-ad--mobile .jt-ad__fine { display: none; }
.jt-ad--mobile .jt-ad__cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 10px; padding: 8px 10px; }

/* ---------- Format: billboard 970x250 ---------- */
.jt-ad--billboard { grid-template-columns: minmax(0, 560px) 1fr; grid-template-rows: auto 1fr auto; padding: 34px 44px; column-gap: 30px; }
.jt-ad--billboard .jt-ad__brand { grid-column: 1; font-size: 14px; }
.jt-ad--billboard .jt-ad__copy { grid-column: 1; align-self: center; gap: 10px; }
.jt-ad--billboard .jt-ad__h { font-size: 40px; }
.jt-ad--billboard .jt-ad__b { font-size: 16px; max-width: 480px; }
.jt-ad--billboard .jt-ad__cta { grid-column: 1; font-size: 13px; padding: 11px 18px; }
.jt-ad--billboard .jt-ad__fine { position: absolute; right: 44px; bottom: 16px; font-size: 10px; }

/* ---------- Format: rectangle 300x250 ---------- */
.jt-ad--rectangle { grid-template-rows: auto 1fr auto auto; padding: 22px 22px 16px; row-gap: 10px; }
.jt-ad--rectangle .jt-ad__brand { font-size: 11px; }
.jt-ad--rectangle .jt-ad__h { font-size: 24px; }
.jt-ad--rectangle .jt-ad__b { font-size: 12.5px; }
.jt-ad--rectangle .jt-ad__copy { align-self: center; }
.jt-ad--rectangle .jt-ad__fine { font-size: 8.5px; }

/* ---------- Format: halfpage 300x600 ---------- */
.jt-ad--halfpage { grid-template-rows: auto 1fr auto auto; padding: 30px 26px 20px; row-gap: 16px; }
.jt-ad--halfpage .jt-ad__brand { font-size: 13px; }
.jt-ad--halfpage .jt-ad__copy { align-self: end; gap: 12px; padding-bottom: 6px; }
.jt-ad--halfpage .jt-ad__h { font-size: 38px; }
.jt-ad--halfpage .jt-ad__b { font-size: 15px; }
.jt-ad--halfpage .jt-ad__cta { font-size: 13px; padding: 12px 18px; }

/* ================= Styles ================= */

/* bold: dark, warm glow */
.jt-ad--bold .jt-ad__h { text-transform: uppercase; letter-spacing: -.005em; }
.jt-ad--bold .jt-ad__brand { color: var(--ad-ac); }
.jt-ad--bold .jt-ad__deco { width: 340px; height: 340px; right: -110px; bottom: -150px; border-radius: 50%;
  background: radial-gradient(circle, var(--ad-ac) 0%, rgba(236,122,44,.35) 38%, transparent 70%); opacity: .9; }
.jt-ad--bold.jt-ad--halfpage .jt-ad__deco { width: 420px; height: 420px; right: -60px; top: 70px; bottom: auto; }
.jt-ad--bold.jt-ad--rectangle .jt-ad__deco { width: 240px; height: 240px; right: -90px; bottom: auto; top: -90px; }
.jt-ad--bold.jt-ad--leaderboard .jt-ad__deco, .jt-ad--bold.jt-ad--mobile .jt-ad__deco { width: 200px; height: 200px; right: auto; left: -80px; bottom: -110px; opacity: .5; }

/* stripe: hazard band */
.jt-ad--stripe .jt-ad__brand { font-size: 1.15em; letter-spacing: .02em; font-style: italic; }
.jt-ad--stripe .jt-ad__deco { right: 0; top: 0; bottom: 0; width: 26px;
  background: repeating-linear-gradient(-45deg, var(--ad-fg) 0 10px, transparent 10px 20px); }
.jt-ad--stripe.jt-ad--halfpage .jt-ad__deco, .jt-ad--stripe.jt-ad--rectangle .jt-ad__deco { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 14px; }
.jt-ad--stripe.jt-ad--halfpage .jt-ad__fine, .jt-ad--stripe.jt-ad--rectangle .jt-ad__fine { margin-bottom: 10px; }
.jt-ad--stripe.jt-ad--leaderboard { padding-right: 46px; }
.jt-ad--stripe.jt-ad--mobile { padding-right: 34px; }
.jt-ad--stripe.jt-ad--mobile .jt-ad__deco { width: 16px; }
.jt-ad--stripe .jt-ad__cta { color: #ffd21f; }

/* classic: serif, framed */
.jt-ad--classic .jt-ad__h { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; letter-spacing: -.01em; }
.jt-ad--classic .jt-ad__brand { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.2em; color: var(--ad-ac); }
.jt-ad--classic .jt-ad__deco { inset: 7px; border: 1px solid var(--ad-ac); opacity: .55; }
.jt-ad--classic .jt-ad__cta { border-radius: 40px; }
.jt-ad--classic.jt-ad--halfpage .jt-ad__deco::after { content: ""; position: absolute; left: 50%; top: 120px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0 18%, transparent 19%), radial-gradient(circle, #e7a3ae 0 55%, #c97483 56% 62%, transparent 63%); }

/* minimal: calm, breathing rings */
.jt-ad--minimal .jt-ad__brand { text-transform: lowercase; letter-spacing: -.01em; font-size: 1.45em; font-weight: 700; color: var(--ad-ac); }
.jt-ad--minimal .jt-ad__h { font-weight: 600; }
.jt-ad--minimal .jt-ad__cta { background: transparent; color: var(--ad-ac); border: 1px solid var(--ad-ac); border-radius: 30px; }
.jt-ad--minimal .jt-ad__deco { width: 300px; height: 300px; right: -100px; top: -100px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(99,214,184,.22) 23px 24px); }
.jt-ad--minimal.jt-ad--halfpage .jt-ad__deco { width: 460px; height: 460px; right: -80px; top: 20px; }

/* retro: double rule, snow */
.jt-ad--retro .jt-ad__brand { font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--ad-ac); }
.jt-ad--retro .jt-ad__h { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; }
.jt-ad--retro .jt-ad__deco { inset: 0; border: 4px double var(--ad-fg);
  background-image: radial-gradient(var(--ad-ac) 1.2px, transparent 1.6px); background-size: 18px 18px; opacity: .22; }
.jt-ad--retro .jt-ad__cta { background: var(--ad-fg); color: var(--ad-bg); }

/* house: Jajeer Times red */
.jt-ad--house .jt-ad__brand { font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .1em; }
.jt-ad--house .jt-ad__h { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; }
.jt-ad--house .jt-ad__cta { background: #fff; color: #bd2e32; }
.jt-ad--house .jt-ad__deco { right: -20px; bottom: -30px; width: 220px; height: 280px; background: url(/mark-white.png) no-repeat center / contain; opacity: .12; }
.jt-ad--house.jt-ad--leaderboard .jt-ad__deco, .jt-ad--house.jt-ad--mobile .jt-ad__deco { width: 90px; height: 120px; right: 140px; bottom: -20px; }
.jt-ad--house.jt-ad--billboard .jt-ad__deco { width: 260px; height: 330px; right: 40px; bottom: -40px; }
.ad-slot a.jt-ad, .ad-slot a.jt-ad:hover { text-decoration: none; color: var(--ad-fg); }