/* ==========================================================================
   THIRD-PARTY AD CREATIVES
   Drop-in ad-unit mockups (fictional advertisers) rendered inside the
   site's existing .ad-slot placements. Namespaced with --adkit- custom
  properties so nothing here collides with the Bright Sproutt design system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --adkit-bg:      #0a0c10;
  --adkit-panel:   #14171d;
  --adkit-panel-2: #1b1f26;
  --adkit-line:    #262b33;
  --adkit-text:    #eef1f5;
  --adkit-text-dim:#8a94a3;
  --adkit-teal:    #2dd4bf;
  --adkit-violet:  #a78bfa;
  --adkit-amber:   #fbbf24;
  --adkit-rose:    #fb7185;
  --adkit-blue:    #60a5fa;
  --adkit-green:   #86efac;
  --adkit-radius:  10px;
  --adkit-font-display: 'Space Grotesk', sans-serif;
  --adkit-font-body:    'Inter', sans-serif;
  --adkit-font-mono:    'JetBrains Mono', monospace;
}

/* Once a slot holds a real creative, drop the dashed placeholder chrome */
.ad-slot.is-live{ border-style:solid; border-color:transparent; background:none; padding:0; }
.ad-slot.is-live:hover{ border-color:transparent; }

.ad-unit{
  width:100%; height:100%;
  position:relative; border-radius:var(--adkit-radius); overflow:hidden;
  background:var(--adkit-panel); border:1px solid var(--adkit-line);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
  color:var(--adkit-text); font-family:var(--adkit-font-body); line-height:1.5;
}
.ad-unit a{ color:inherit; text-decoration:none; }
.ad-click-target{ display:block; width:100%; height:100%; color:inherit; text-decoration:none; cursor:pointer; }
.ad-click-target:focus-visible{ outline:3px solid var(--adkit-teal); outline-offset:3px; border-radius:var(--adkit-radius); }

/* ---------- Facebook leaderboard ---------- */
.la-ad{ width:100%; height:100%; display:flex; align-items:center; gap:2%; padding:1%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; background:var(--cream); color:#273142; text-decoration:none; box-shadow:0 4px 14px rgba(32,55,86,.12); transition:box-shadow .2s ease, transform .2s ease; }
.la-ad:hover{ box-shadow:0 7px 20px rgba(32,55,86,.2); transform:translateY(-1px); }
.la-ad:focus-visible{ outline:3px solid #1877f2; outline-offset:3px; }
.la-ad-img{ width:20%; height:90%; flex:none; object-fit:cover; border-radius:5px; }
.la-ad-body{ min-width:0; flex:1; display:flex; align-items:center; justify-content:space-between; gap:2%; }
.la-ad-copy{ min-width:0; overflow:hidden; }
.la-ad-copy strong{ display:block; overflow:hidden; color:#1877f2; font:700 clamp(.8rem,2vw,1.1rem)/1.2 var(--adkit-font-display); white-space:nowrap; text-overflow:ellipsis; }
.la-ad-copy span{ display:block; overflow:hidden; margin-top:.25rem; color:#465162; font-size:clamp(.62rem,1.5vw,.9rem); white-space:nowrap; text-overflow:ellipsis; }
.la-ad-cta{ flex:none; padding:.55rem 1rem; border-radius:999px; background:#1877f2; color:#fff; font-size:clamp(.62rem,1.5vw,.9rem); font-weight:700; white-space:nowrap; }
@media (max-width:520px){ .la-ad-body{ display:block; } .la-ad-copy span{ display:none; } .la-ad-cta{ display:inline-block; margin-top:.25rem; padding:.35rem .7rem; } }

.ultahost-ad{ width:100%; height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:15px; padding:10% 5%; border:1px solid #ddd; border-radius:8px; background:#fff; color:#333; text-align:center; text-decoration:none; }
.ultahost-ad strong{ font-family:var(--adkit-font-display); font-size:1rem; line-height:1.1; }
.ultahost-ad img{ width:90%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; }
.ultahost-ad p{ margin:0; color:#666; font-size:.85rem; line-height:1.4; }
.ultahost-cta{ margin-top:auto; padding:8px 12px; border-radius:20px; background:#0056b3; color:#fff; font-size:.76rem; font-weight:700; line-height:1; }
.ultahost-ad:hover{ box-shadow:0 8px 22px rgba(0,86,179,.2); transform:translateY(-3px); }
.ultahost-ad:hover .ultahost-cta{ background:#003f85; }

/* ---------- EchoStream billboard ---------- */
.ad-wrap{ width:100%; max-width:1003.42px; aspect-ratio:1003.42 / 73; }
.ad-wrap > .ad-click-target{ border-radius:var(--adkit-radius); }
.ad-billboard{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; height:100%; padding:.65rem 1.25rem; box-sizing:border-box; background:linear-gradient(105deg,#241246 0%,#5b2a86 52%,#e05b8d 100%); border:0; border-radius:var(--adkit-radius); color:#fff; box-shadow:0 8px 24px rgba(73,35,111,.24); }
.ad-billboard .copy{ min-width:0; flex:1; display:flex; align-items:center; gap:1rem; }
.ad-billboard .eyebrow{ display:block; flex:none; margin:0; color:#ffd4e6; font-size:.68rem; letter-spacing:.09em; }
.ad-billboard h3{ margin:0; color:#fff; font-family:var(--adkit-font-display); font-size:clamp(.88rem,2.2vw,1.2rem); line-height:1.1; white-space:nowrap; }
.ad-billboard p{ min-width:0; margin:0; color:#f4e5f5; font-size:clamp(.6rem,1.3vw,.76rem); line-height:1.2; white-space:nowrap; overflow:visible; }
.ad-billboard .cta{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; flex:none; min-height:30px; margin:0; padding:.3rem 1rem; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:#fff; color:#49216d; font-size:clamp(.62rem,1.3vw,.78rem); font-weight:800; letter-spacing:.01em; line-height:1.1; white-space:nowrap; box-shadow:0 3px 8px rgba(25,10,45,.2); transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ad-billboard .cta-brand{ font-size:.58em; font-weight:700; opacity:.72; }
.ad-click-target:hover .ad-billboard .cta{ background:#ffd4e6; color:#35104f; transform:translateY(-1px); box-shadow:0 5px 12px rgba(25,10,45,.28); }
.ad-spotify{ background:linear-gradient(105deg,#071b12 0%,#138a48 58%,#1ed760 100%); box-shadow:0 8px 24px rgba(20,120,67,.28); }
.ad-spotify .cta{ background:#fff; color:#0b5d31; }
.ad-spotify .cta-brand{ color:#159447; opacity:1; }
.ad-spotify .art{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.ad-click-target:hover .ad-spotify .cta{ background:#d9ffe7; color:#074522; }
.ad-billboard .art{ width:54px; height:54px; display:grid; place-items:center; flex:none; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.14); }
.ad-billboard .art svg{ width:42px; height:42px; }
@media (max-width:700px){ .ad-wrap{ aspect-ratio:auto; min-height:150px; } .ad-billboard{ gap:.7rem; padding:.8rem .9rem; } .ad-billboard .copy{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.25rem; } .ad-billboard h3{ white-space:normal; } .ad-billboard p{ white-space:normal; } .ad-billboard .cta{ min-height:28px; padding:.3rem .75rem; } .ad-billboard .art{ width:54px; height:54px; } }

/* ---------- Leaderboard 728x90 / 970x90 ---------- */
.ad-leaderboard{
  width:100%; height:100%;
  display:flex; align-items:center; gap:16px; padding:0 22px;
  background:radial-gradient(120% 180% at 0% 50%, rgba(45,212,191,.16), transparent 60%), var(--adkit-panel);
}
.ad-leaderboard .glyph{
  width:46px; height:46px; border-radius:10px; background:var(--adkit-panel-2);
  border:1.5px solid var(--adkit-teal); display:flex; align-items:center; justify-content:center; flex:none;
}
.ad-leaderboard .glyph svg{ width:22px; height:22px; }
.ad-leaderboard .copy strong{ font-family:var(--adkit-font-display); font-size:1.15rem; font-weight:700; color:var(--adkit-teal); display:block; }
.ad-leaderboard .copy span{ color:var(--adkit-text-dim); font-size:.85rem; }
.ad-insure{ background:var(--cream); border-color:var(--line); color:var(--ink); justify-content:space-between; }
.ad-insure .glyph{ background:var(--cream-deep); }
.ad-insure .copy span{ color:var(--ink-dim); }
.ad-insure .cta{ background:var(--adkit-blue); color:#0a0c10; font-weight:700; font-size:.8rem; padding:9px 20px; border-radius:8px; flex:none; }

/* ---------- Rectangle 300x250 ---------- */
.ad-rect{ width:100%; height:100%; display:flex; flex-direction:column; }

.ad-travel{ background:linear-gradient(160deg,#241a12,#171210 70%); }
.ad-travel .top{ display:flex; align-items:center; gap:8px; padding:14px 16px 0; }
.ad-travel .badge-pair{ display:flex; }
.ad-travel .coin{ width:22px; height:22px; border-radius:50%; margin-left:-8px; border:2px solid #171210; }
.ad-travel .coin:first-child{ margin-left:0; background:var(--adkit-amber); }
.ad-travel .coin:last-child{ background:var(--adkit-rose); }
.ad-travel .brand{ font-family:var(--adkit-font-display); font-weight:700; font-size:.9rem; }
.ad-travel .photo{ margin:12px 14px 0; height:96px; border-radius:8px;
  background:linear-gradient(0deg, rgba(20,14,9,.55), rgba(20,14,9,0) 60%), url('https://images.unsplash.com/photo-1494137319847-a9592a0e73ed?auto=format&fit=crop&w=600&q=70') center 30%/cover;
  position:relative; overflow:hidden; }
.ad-travel .photo::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 30% 100%, rgba(0,0,0,.5), transparent); }
.ad-travel .body{ padding:12px 16px 14px; flex:1; display:flex; flex-direction:column; }
.ad-travel .body p{ margin:0 0 10px; font-size:.86rem; color:#f2d9c2; line-height:1.35; }
.ad-travel .body p b{ color:var(--adkit-amber); }
.ad-travel .cta{ margin-top:auto; align-self:flex-start; background:var(--adkit-amber); color:#241a12; font-weight:700; font-size:.78rem; padding:7px 16px; border-radius:999px; }
.ad-travel .fine{ font-size:.62rem; color:#8d7a68; margin-top:8px; }

/* ---------- YouTube product-grid card ---------- */
.youtube-slot{ display:flex; align-items:stretch; }
.ad-youtube{ width:100%; height:100%; display:flex; flex-direction:column; align-items:stretch; gap:0; box-sizing:border-box; background:var(--cream-card); border:0; border-radius:var(--radius-md); color:var(--ink); box-shadow:var(--shadow-md); }
.ad-youtube .glyph{ width:100%; height:auto; aspect-ratio:4/3.4; display:grid; place-items:center; flex:none; border-radius:0; background:linear-gradient(135deg,#ff5f6d 0%,#ff9f43 100%); color:#fff; }
.ad-youtube .glyph svg{ width:58px; height:58px; }
.ad-youtube .copy{ min-width:0; padding:1.1rem 1.2rem .5rem; overflow:hidden; }
.ad-youtube .copy strong{ display:block; color:#f0525f; font-family:var(--adkit-font-display); font-size:1.02rem; line-height:1.1; }
.ad-youtube .copy span{ display:block; margin-top:.4rem; color:var(--ink-dim); font-size:.8rem; line-height:1.35; }
.ad-youtube .cta{ align-self:flex-start; flex:none; margin:0 1.2rem 1.2rem; padding:7px 12px; border-radius:999px; background:#f0525f; color:#fff; font-size:.72rem; font-weight:700; line-height:1; white-space:nowrap; }
.ad-click-target:hover .ad-youtube{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.ad-click-target:hover .ad-youtube .cta{ background:#ff7b55; }

.ad-fit{ background:linear-gradient(180deg, rgba(10,12,16,.35), rgba(10,12,16,.94) 78%), url('https://images.unsplash.com/photo-1486739985386-d4fae04ca6f7?auto=format&fit=crop&w=600&q=70') center/cover; padding:18px; display:flex; flex-direction:column; }
.ad-fit .icon{ width:52px; height:52px; border-radius:14px; background:var(--adkit-panel-2); border:1px solid #1f3a2e; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ad-fit h3{ font-family:var(--adkit-font-display); font-size:1.05rem; margin:0 0 6px; color:var(--adkit-text); }
.ad-fit p{ font-size:.82rem; color:var(--adkit-text-dim); margin:0 0 auto; line-height:1.4; }
.ad-fit .stars{ color:var(--adkit-green); font-size:.78rem; margin:12px 0 10px; font-family:var(--adkit-font-mono); }
.ad-fit .cta{ background:var(--adkit-green); color:#08150f; font-weight:700; font-size:.8rem; padding:9px 0; border-radius:8px; text-align:center; }

.ad-w3schools{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; padding:5%; background:#fff; border:1px solid #ddd; border-radius:8px; color:#12291f; text-align:center; }
.ad-w3schools img{ width:90%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; }
.ad-w3schools h3{ margin:0; color:#12291f; font-family:var(--adkit-font-display); font-size:1.05rem; line-height:1.2; }
.ad-w3schools p{ margin:0; color:#666; font-size:.78rem; line-height:1.35; }
.ad-w3schools .cta{ background:#1f9d63; color:#fff; padding:7px 18px; border-radius:999px; font-weight:700; font-size:.76rem; line-height:1; }
.ad-click-target:hover .ad-w3schools{ box-shadow:0 8px 22px rgba(31,157,99,.2); transform:translateY(-3px); }
.ad-click-target:hover .ad-w3schools .cta{ background:#16824f; }

.ad-news{ width:100%; height:100%; background:var(--adkit-panel-2); padding:22px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
.ad-news .mark{ font-family:var(--adkit-font-display); font-weight:700; font-size:1.1rem; margin-bottom:10px; letter-spacing:-.01em; color:var(--adkit-text); }
.ad-news .mark span{ color:var(--adkit-teal); }
.ad-news p{ font-size:.8rem; color:var(--adkit-text-dim); margin:0 0 16px; }
.ad-news .field{ display:flex; width:100%; border:1px solid var(--adkit-line); border-radius:8px; overflow:hidden; }
.ad-news .field input{ flex:1; background:transparent; border:0; padding:9px 10px; color:var(--adkit-text); font-size:.76rem; }
.ad-news .field button{ background:var(--adkit-teal); color:#04211c; border:0; font-weight:700; font-size:.76rem; padding:0 14px; }

/* ---------- Square (used at 300x250) ---------- */
.ad-square{ width:100%; height:100%; }
.ad-grocery{
  background:linear-gradient(180deg, rgba(10,12,16,.25), rgba(10,12,16,.92) 75%), url('https://images.unsplash.com/photo-1751200365135-9e9eb01a2919?auto=format&fit=crop&w=600&q=70') center/cover;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; height:100%;
}
.ad-grocery .pct{ font-family:var(--adkit-font-display); font-size:2.6rem; font-weight:700; color:var(--adkit-green); line-height:1; }
.ad-grocery .pct span{ font-size:1.1rem; vertical-align:top; }
.ad-grocery .sub{ font-size:.78rem; color:var(--adkit-text-dim); margin:8px 0 16px; }
.ad-grocery strong{ font-family:var(--adkit-font-display); font-size:1rem; display:block; margin-bottom:14px; color:var(--adkit-text); }
.ad-grocery .cta{ background:transparent; border:1.5px solid var(--adkit-green); color:var(--adkit-green); font-weight:600; font-size:.78rem; padding:8px 20px; border-radius:999px; }

/* ---------- Large rectangle 336x280 ---------- */
.ad-large-rect{ width:100%; height:100%; }
.ad-airline{ background:linear-gradient(160deg,#0e2230,#0a0c10 70%); display:flex; flex-direction:column; height:100%; }
.ad-airline .photo{ height:150px; position:relative;
  background:linear-gradient(0deg, rgba(10,20,26,.65), rgba(10,20,26,.05) 55%), url('https://images.unsplash.com/photo-1756988182660-32f3a4fb3bde?auto=format&fit=crop&w=600&q=70') center/cover; }
.ad-airline .photo .route{ position:absolute; bottom:12px; left:16px; right:16px; display:flex; align-items:center; gap:8px; font-family:var(--adkit-font-mono); font-size:.78rem; color:#cfe9f2; }
.ad-airline .photo .route .line{ flex:1; height:1px; background:rgba(255,255,255,.35); position:relative; }
.ad-airline .body{ padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.ad-airline .price{ font-family:var(--adkit-font-display); font-size:1.5rem; font-weight:700; color:var(--adkit-blue); }
.ad-airline .price span{ font-size:.72rem; color:var(--adkit-text-dim); font-family:var(--adkit-font-body); font-weight:400; }
.ad-airline p{ font-size:.78rem; color:var(--adkit-text-dim); margin:4px 0 auto; }
.ad-airline .cta{ align-self:flex-start; background:transparent; border:1.5px solid var(--adkit-blue); color:var(--adkit-blue); font-weight:600; font-size:.78rem; padding:8px 18px; border-radius:999px; margin-top:10px; }

/* ---------- Mobile banner 320x50 ---------- */
.ad-mobile{ width:100%; height:100%; display:flex; align-items:center; gap:10px; padding:0 14px; }
.ad-bank{ background:linear-gradient(90deg,#0e1830,#0a0c10); }
.ad-bank .glyph{ width:30px; height:30px; border-radius:8px; background:var(--adkit-blue); flex:none; display:flex; align-items:center; justify-content:center; color:#0a0c10; font-family:var(--adkit-font-display); font-weight:700; font-size:.85rem; }
.ad-bank .txt strong{ font-size:.78rem; display:block; color:var(--adkit-text); }
.ad-bank .txt span{ font-size:.68rem; color:var(--adkit-text-dim); }
.ad-bank .cta{ margin-left:auto; font-size:.68rem; background:var(--adkit-blue); color:#0a0c10; font-weight:700; padding:5px 12px; border-radius:6px; }

/* ---------- Skyscraper 160x600 ---------- */
.ad-sky{ width:100%; height:100%; }
.ad-cloud{ background:linear-gradient(180deg,#101820,#0a0c10 60%); padding:20px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; }
.ad-cloud .glyph{ width:56px; height:56px; border-radius:14px; background:var(--adkit-panel-2); border:1px solid var(--adkit-teal); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ad-cloud h4{ font-family:var(--adkit-font-display); font-size:.95rem; margin:0 0 10px; line-height:1.3; color:var(--adkit-text); }
.ad-cloud p{ font-size:.72rem; color:var(--adkit-text-dim); margin:0 0 20px; line-height:1.4; }
.ad-cloud .stat{ font-family:var(--adkit-font-mono); font-size:1.5rem; color:var(--adkit-teal); font-weight:600; }
.ad-cloud .stat-label{ font-size:.66rem; color:var(--adkit-text-dim); margin-bottom:22px; }
.ad-cloud .cta{ background:var(--adkit-teal); color:#04211c; font-weight:700; font-size:.74rem; padding:9px 0; width:100%; border-radius:7px; }