/* ==================================================================
   sudokuki.org — in-house ad units (inads)
   Load after loan.css:  <link rel="stylesheet" href="/assets/inads.css">

   Everything is prefixed `inad-` on purpose. Your GPT placeholders
   already use .ad, .ad-label and .slot, and reusing those names would
   have the two systems fighting over the same rules.

   RESPONSIVE MODEL
   These units size themselves against their CONTAINER, not the viewport,
   using container queries. An ad unit can sit in a 300px sidebar on a
   1440px desktop or run full width on a phone, and viewport media queries
   can't tell those apart. Container queries can. A @supports fallback
   covers browsers without them.
   ================================================================== */

/* ---------------- placeholder: reserves space, defines the container ---- */
.inad{
  container-type:inline-size;
  container-name:inad;
  width:100%;
  max-width:100%;
  margin-inline:auto;
}
.inad[data-inad="horizontal"]{max-width:728px;min-height:110px}
.inad[data-inad="square"]{max-width:336px;min-height:250px}
.inad[data-inad="tall"]{max-width:336px;min-height:250px}

/* The tall unit is a desktop sidebar format. On narrow pages a 600px-high
   ad would swallow the viewport, so it only takes that height where there
   is actually a sidebar to put it in. */
@media (min-width:64rem){
  .inad[data-inad="tall"]{max-width:300px;min-height:600px}
}

/* ---------------- unit ---------------- */
.inad-unit{
  --inad-border:#dadce0;
  --inad-title:#1a0dab;
  --inad-text:#4d5156;
  --inad-meta:#5f6368;
  --inad-cta:#1a73e8;
  --inad-cta-hover:#1765cc;

  width:100%;
  max-width:100%;

  background:#fff;
  border:1px solid var(--inad-border);
  border-radius:4px;
  padding:clamp(10px,3cqi,16px);

  display:flex;
  align-items:center;
  gap:clamp(9px,2.5cqi,14px);

  position:relative;
  cursor:pointer;
  text-decoration:none;

  font-family:Arial,Helvetica,sans-serif;
  transition:box-shadow .15s ease,border-color .15s ease,opacity .25s ease;
}
.inad-unit:hover{border-color:#c5c7ca;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.inad-unit.is-swapping{opacity:0}

/* image — aspect-ratio instead of a fixed height, so it never letterboxes */
.inad-img{
  width:clamp(72px,24cqi,100px);
  aspect-ratio:5/4;
  flex-shrink:0;
  border-radius:4px;
  overflow:hidden;
  background:#eee;
}
.inad-img img{width:100%;height:100%;object-fit:cover;display:block}

.inad-body{min-width:0;flex:1}

.inad-meta{
  display:flex;align-items:center;gap:6px;margin-bottom:5px;
  color:var(--inad-meta);
  font-size:clamp(11px,2.6cqi,12px);
  line-height:1.35;
}
.inad-tag{color:#3c4043;font-weight:600;flex-shrink:0}
.inad-adv{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}

.inad-title{
  margin:0 0 5px;
  font-size:clamp(15px,4cqi,18px);
  line-height:1.28;
  font-weight:500;
  color:var(--inad-title);
  padding-right:22px;              /* clears the ⋮ button */
  overflow-wrap:break-word;
}
.inad-unit:hover .inad-title{text-decoration:underline}

.inad-desc{
  margin:0;
  color:var(--inad-text);
  font-size:clamp(12px,3cqi,13px);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.inad-cta{
  flex-shrink:0;
  display:none;                    /* shown once the container has room */
  align-items:center;justify-content:center;
  min-width:92px;height:38px;padding:0 16px;
  background:var(--inad-cta);color:#fff;border-radius:4px;
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s ease;
}
.inad-unit:hover .inad-cta{background:var(--inad-cta-hover)}

.inad-opts{
  position:absolute;top:6px;right:7px;width:24px;height:24px;
  border:0;background:transparent;color:#70757a;
  font-size:18px;line-height:20px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.inad-opts:hover{background:#f1f3f4}

.inad-note{
  position:absolute;top:32px;right:7px;z-index:2;
  max-width:min(15rem,calc(100% - 14px));
  background:#fff;border:1px solid var(--inad-border);border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);padding:.6rem .7rem;
  font-size:11px;line-height:16px;color:var(--inad-meta);
}
.inad-note[hidden]{display:none}

/* ---------------- block formats ---------------- */
.inad-unit.is-square,
.inad-unit.is-tall{display:block}

.inad-unit.is-square .inad-img,
.inad-unit.is-tall .inad-img{width:100%;margin-bottom:10px}
.inad-unit.is-square .inad-img{aspect-ratio:16/9}
.inad-unit.is-tall .inad-img{aspect-ratio:4/3}

.inad-unit.is-square .inad-desc,
.inad-unit.is-tall .inad-desc{margin-bottom:12px}

.inad-unit.is-square .inad-cta,
.inad-unit.is-tall .inad-cta{display:inline-flex;width:100%}

/* A tall unit only stretches where it has the height to fill. */
@media (min-width:64rem){
  .inad-unit.is-tall .inad-img{aspect-ratio:3/2;margin-bottom:14px}
  .inad-unit.is-tall .inad-desc{-webkit-line-clamp:5;margin-bottom:16px}
  .inad-unit.is-tall .inad-cta{height:42px}
}

/* ---------------- container queries ---------------- */
@supports (container-type:inline-size){

  /* Enough room for a button beside the text. */
  @container inad (min-width:26rem){
    .inad-unit:not(.is-square):not(.is-tall) .inad-cta{display:inline-flex}
  }

  /* Very narrow container (a sidebar, a card column): stack the row unit
     so the image and text never crush each other. */
  @container inad (max-width:20rem){
    .inad-unit:not(.is-square):not(.is-tall){display:block}
    .inad-unit:not(.is-square):not(.is-tall) .inad-img{
      width:100%;aspect-ratio:16/9;margin-bottom:10px;
    }
    .inad-unit:not(.is-square):not(.is-tall) .inad-cta{
      display:inline-flex;width:100%;margin-top:10px;
    }
  }

  /* Roomy container: let the row breathe. */
  @container inad (min-width:40rem){
    .inad-unit .inad-desc{-webkit-line-clamp:2}
    .inad-unit:not(.is-square):not(.is-tall){align-items:center}
  }
}

/* ---------------- fallback for browsers without container queries ------ */
@supports not (container-type:inline-size){
  .inad-unit{padding:14px 16px;gap:14px}
  .inad-img{width:100px;height:80px;aspect-ratio:auto}
  .inad-title{font-size:18px}
  .inad-desc{font-size:13px}
  .inad-unit:not(.is-square):not(.is-tall) .inad-cta{display:inline-flex}

  @media (max-width:37.5rem){
    .inad-unit{padding:12px;gap:11px;align-items:flex-start}
    .inad-img{width:85px;height:75px}
    .inad-title{font-size:16px}
    .inad-desc{font-size:12px}
    .inad-unit:not(.is-square):not(.is-tall) .inad-cta{display:none}
  }
}

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .inad-unit{transition:none}
  .inad-unit.is-swapping{opacity:1}
}

/* Once a unit is rendered its own height takes over; the reserve on the
   placeholder is only there to stop layout shift before that happens. */
.inad[data-inad-filled="true"]{min-height:0}

/* ==================================================================
   Belt and braces: never let a .reveal wrapper hide an in-house unit.

   loan.css sets `.js .reveal{opacity:0}` and only ads.js clears it by
   adding .is-visible. If ads.js isn't on the page — or a stale copy is
   cached — every unit inside `<div class="ad reveal">` renders correctly
   and is then invisible. This rule makes that impossible from CSS alone,
   with no dependency on any script running.
   ================================================================== */
.js .reveal:has(.inad),
.js .reveal.is-visible{opacity:1;transform:none}

/* Same guarantee for browsers without :has() — the unit itself is forced
   opaque even if an ancestor is faded. */
.inad,
.inad-unit{opacity:1}

/* ==================================================================
   MODAL / INTERSTITIAL UNIT (300x500)
   Centered overlay above page content. Real close button.
   ================================================================== */

.inadm-backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(16,31,46,.62);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.inadm-backdrop.is-open{opacity:1;pointer-events:auto}

.inadm{
  width:300px;max-width:100%;
  height:500px;max-height:calc(100vh - 32px);
  background:#fff;border:1px solid #dadce0;border-radius:6px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:Arial,Helvetica,sans-serif;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  transform:translateY(10px) scale(.98);
  transition:transform .22s ease;
}
.inadm-backdrop.is-open .inadm{transform:none}

/* top bar */
.inadm-top{
  min-height:38px;flex:none;padding:6px 8px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:#5f6368;background:#fff;
}
.inadm-tag{
  border:1px solid #9aa0a6;border-radius:2px;padding:1px 5px;
  font-size:9px;font-weight:600;color:#5f6368;letter-spacing:.02em;
}
/* Text close control. Deliberately a different shape from the ad's own
   CTA button — pill vs square, smaller, in the top bar, not the body —
   so the two blue buttons are never mistaken for each other. */
.inadm-close{
  flex:none;border:0;cursor:pointer;
  min-height:26px;padding:5px 14px;
  background:#1a73e8;color:#fff;
  border-radius:999px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;font-weight:700;line-height:1;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,box-shadow .15s ease;
}
.inadm-close:hover{background:#1765cc;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.inadm-close:active{background:#155ab6}
.inadm-close:focus-visible{outline:2px solid #202124;outline-offset:2px}

/* body — the whole area below the top bar is the click target */
.inadm-link{
  flex:1;min-height:0;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;cursor:pointer;
}
.inadm-img{width:100%;height:215px;flex:none;overflow:hidden;background:#e8eaed}
.inadm-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.inadm-link:hover .inadm-img img{transform:scale(1.025)}

.inadm-content{padding:13px 15px 10px;flex:1;min-height:0;display:flex;flex-direction:column}
.inadm-brand{display:flex;align-items:center;margin-bottom:7px;color:#3c4043;font-size:12px;font-weight:600}
.inadm-brand-icon{
  width:18px;height:18px;margin-right:7px;border-radius:50%;background:#e8eaed;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold;flex:none;
}
.inadm-title{
  margin:0 0 8px;font-size:19px;line-height:24px;font-weight:500;color:#202124;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.inadm-desc{
  margin:0;color:#5f6368;font-size:13px;line-height:19px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.inadm-action{margin-top:auto;padding-top:13px}
.inadm-button{
  width:100%;height:42px;border:0;border-radius:3px;
  background:#1a73e8;color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,box-shadow .15s ease;
}
.inadm-link:hover .inadm-button{background:#1765cc;box-shadow:0 1px 3px rgba(0,0,0,.18)}

.inadm-footer{
  height:31px;flex:none;padding:6px 10px;border-top:1px solid #f1f3f4;
  display:flex;align-items:center;font-size:10px;color:#80868b;background:#fff;
}
.inadm-domain{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* short viewports: let the card shrink rather than overflow */
@media (max-height:560px){
  .inadm{height:auto}
  .inadm-img{height:150px}
  .inadm-title{font-size:17px;line-height:22px;-webkit-line-clamp:2}
  .inadm-desc{-webkit-line-clamp:2}
}

@media (prefers-reduced-motion:reduce){
  .inadm-backdrop,.inadm{transition:none}
  .inadm{transform:none}
  .inadm-link:hover .inadm-img img{transform:none}
}