/* ──────────────────────────────────────────────────────────────────────────
   /integrations — connection cards (shared .agent-card look) that expand
   full-width into the dark "Inside the … integration" detail panel.
   Builds on .agent-card (pages.css) and .cap-* / .mode-* (pages.css).
   ────────────────────────────────────────────────────────────────────────── */
.int-section{background:var(--surface);border-bottom:1px solid var(--border)}
.int-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
.int-grid .agent-card{min-height:0;flex:none;scroll-margin-top:88px;transition:border-color .2s,box-shadow .2s}
.int-grid .agent-card:hover{border-color:var(--blue-border)}
.int-grid .agent-card.open{grid-column:1/-1;border-color:var(--blue-border);box-shadow:0 24px 70px rgba(10,15,30,.08)}

.int-ico{background:#fff;border:1px solid var(--border)}
.int-ico img{width:22px;height:22px;display:block}

.agent-status.read{background:var(--surface-2);color:var(--ink-3)}
.agent-status.read::before{background:var(--muted-2)}
.agent-status.publish{background:var(--blue-pale);color:var(--blue)}
.agent-status.publish::before{background:var(--blue)}

.int-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.int-row .agent-tags{margin-top:0}
.a1000-landing .int-toggle{flex-shrink:0}
.a1000-landing .int-toggle:hover{border-color:var(--blue-border) !important;color:var(--blue) !important}
.a1000-landing .int-toggle svg{transition:transform .2s}
.int-card.open .int-toggle svg{transform:rotate(180deg)}

/* expanded detail = the former Features "Inside the Google Ads integration"
   content, restyled light (overrides the dark .cap-* / .mode-* from pages.css) */
.int-detail{display:none;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin-top:4px}
.int-card.open .int-detail{display:block;animation:intIn .25s ease both}
@keyframes intIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.int-sub{font-size:15px;line-height:1.6;color:var(--muted);max-width:820px;margin:0}
/* compact capability + mode cards inside the card */
.int-detail .cap-grid{margin-top:20px;gap:12px}
.int-detail .cap-card{padding:18px;gap:10px;border-radius:14px}
.int-detail .cap-card h3{font-size:15px;letter-spacing:-0.2px}
.int-detail .cap-list{gap:6px}
.int-detail .cap-list li{font-size:13px}
.int-detail .cap-note{padding-top:10px;font-size:10px}
.int-detail .modes-head{margin-top:24px;margin-bottom:12px}
.int-detail .modes-head .mh-t{font-size:15px}
.int-detail .modes-head .mh-s{font-size:13px}
.int-detail .modes{gap:12px}
.int-detail .mode-card{padding:16px 18px;gap:8px;border-radius:14px}
.int-detail .mode-name{font-size:14px}
.int-detail .cap-card{background:var(--white);border-color:var(--border)}
.int-detail .cap-card.act{border-color:var(--blue-border)}
.int-detail .cap-eb{color:var(--blue)}
.int-detail .cap-eb::before{background:var(--blue)}
.int-detail .cap-card h3{color:var(--ink)}
.int-detail .cap-list li{color:var(--ink-3)}
.int-detail .cap-list li::before{background:var(--blue-border)}
.int-detail .cap-note{border-top-color:var(--border-soft);color:var(--muted)}
.int-detail .cap-note.approval{color:var(--blue)}
.int-detail .modes-head .mh-t{color:var(--ink)}
.int-detail .modes-head .mh-s{color:var(--muted)}
.int-detail .mode-card{background:var(--white);border-color:var(--border)}
.int-detail .mode-card.auto{border-color:var(--blue-border)}
.int-detail .mode-name{color:var(--ink)}
.int-detail .mode-idx{color:var(--blue)}
.int-detail .mode-card p{color:var(--muted)}
.int-detail .mode-track i{background:var(--surface-2)}
.int-detail .mode-card .mode-track i.on{background:var(--blue)}
.int-detail .mode-card.soon{background:var(--surface-2);border-color:var(--border);opacity:.6}
.int-detail .mode-card.soon .mode-idx{color:var(--muted)}
.int-detail .mode-card.soon .mode-track i,
.int-detail .mode-card.soon .mode-track i.on{background:var(--border-2)}

/* request card (dashed, same as the landing "Build your own" tile) */
.int-request{background:#FBFCFE;border:1.5px dashed #CBD3E1;box-shadow:none;justify-content:flex-start}
.int-request .agent-ico{border:1.5px solid #CBD3E1;background:#FBFCFE;color:#6B7590}
.int-request a{margin-top:auto;font-size:14px;font-weight:600;color:var(--blue) !important}

@media(max-width:1000px){.int-detail .cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .int-detail{padding:28px 20px}
  .int-detail .cap-grid{grid-template-columns:1fr}
  .int-grid{grid-template-columns:1fr}
}