/* AEO Daily. Layers on top of the design export's inline styles.
   The export ships desktop-only inline styles, so overrides need !important. */

/* ---------- Article artwork ----------
   Every slot is a 16:9 illustration cropped to whatever shape the design asked for,
   so one image per story serves the lead, the card grid and the rail thumbnail. */
img.art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2B2642;
}
/* the community hero image sits inside an absolutely-positioned gradient panel */
.art[src*="community-hero"] { position: absolute; inset: 0; }

/* fallback if a slot ever has no matching article */
.art--blank {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2B2642 0%, #3A3358 55%, #241F38 100%);
}

/* ---------- Search field: cosmetic in the design, so say so ---------- */
input[type="text"][placeholder="Search..."] { cursor: not-allowed; }

/* ---------- Filter tabs ---------- */
[data-filter-btn] { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
[data-post-card][hidden], [data-tool-card][hidden] { display: none !important; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #0093FF;
  outline-offset: 2px;
}

/* ---------- Responsive: the export has no breakpoints of its own ---------- */
@media (max-width: 1080px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  [style*="grid-template-columns: 1.7fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 180px 1fr"],
  [style*="grid-template-columns: 110px 1fr 170px"] {
    grid-template-columns: 1fr !important;
  }
  /* card art that was a fixed side column becomes a banner */
  [style*="grid-template-columns: 200px 1fr"] > span:first-child,
  [style*="grid-template-columns: 180px 1fr"] > span:first-child {
    min-height: 0 !important;
    aspect-ratio: 16 / 7;
    border-right: none !important;
    border-bottom: 1px solid #EFEDE6 !important;
  }
  /* header bar wraps; the decorative search field steps aside */
  [style*="max-width: 1240px"][style*="gap: 28px"] {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 10px 20px !important;
  }
  /* nav takes its own row: flex-basis beats width against the inline flex:1 1 0% */
  [style*="max-width: 1240px"][style*="gap: 28px"] > nav {
    order: 3;
    flex: 0 0 100% !important;
    overflow-x: auto;
    gap: 18px !important;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  [style*="max-width: 1240px"][style*="gap: 28px"] > nav::-webkit-scrollbar { display: none; }
  [style*="max-width: 1240px"][style*="gap: 28px"] > nav > a { padding: 12px 0 10px !important; white-space: nowrap; }
  [style*="max-width: 1240px"][style*="gap: 28px"] > div[style*="width: 200px"] { display: none !important; }
  [style*="max-width: 1240px"][style*="gap: 28px"] > a[href$="#subscribe"] { margin-left: auto; }
  main, section, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- Article pages ----------
   The article templates bring their own layouts, which also ship without breakpoints. */
@media (max-width: 900px) {
  /* body + 340px sidebar becomes one column, and the sidebar stops sticking, otherwise it
     floats over the article text once it has nothing left to scroll against */
  [style*="grid-template-columns: 1fr 340px"] { grid-template-columns: 1fr !important; }
  [style*="position: sticky"] { position: static !important; }
}

@media (max-width: 640px) {
  /* the engine comparison table keeps its columns and scrolls inside its own card,
     rather than stacking into something unreadable */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { min-width: 460px; }
  [style*="grid-template-columns: 1.4fr 1fr 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr 1.4fr"] { min-width: 460px; }
  /* the card carries an inline overflow:hidden for its rounded corners, which would clip
     the last column instead of letting it scroll, so this has to outrank it */
  *:has(> [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]),
  *:has(> [style*="grid-template-columns: 1.4fr 1fr 1.2fr 1fr"]),
  *:has(> [style*="grid-template-columns: 1fr 1.2fr 1.4fr"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* chart rows: narrow the label column instead of stacking it above the bars */
  [style*="grid-template-columns: 150px 1fr"],
  [style*="grid-template-columns: 130px 1fr"] { grid-template-columns: 88px 1fr !important; }
}

@media (max-width: 620px) {
  /* the wire badge shouldn't eat the whole ticker on a phone */
  [style*="letter-spacing: 0.12em"][style*="padding: 9px 14px"] {
    font-size: 9px !important;
    padding: 8px 10px !important;
    letter-spacing: 0.06em !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 24px 56px 1fr"] { grid-template-columns: 22px 48px 1fr !important; }
  h1, h2 { font-size: clamp(24px, 7vw, 34px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="tickerScroll"] { animation: none !important; }
  * { scroll-behavior: auto !important; }
}