/* ai-audit.php — page layout only (shared components live in ui-v2.css;
   the audit panel/report skins live in includes/ai-audit-styles.php) */

/* hero: panel sits above the lead on phones, fields are the dark skin */
.audit-hero .container{display:flex;flex-direction:column;align-items:flex-start}
.audit-hero .container>*{width:100%}
.audit-hero .eyebrow{width:auto}
.audit-hero .clamp-more{color:var(--blue-2)}
.audit-hero .audit-fail{width:100%}
@media (max-width:768px){
  .audit-hero .audit-hero__lead{order:8;margin-top:var(--s-5);margin-bottom:0}
  .audit-hero .audit-panel{margin-top:var(--s-5)}
  .audit-hero .audit-progress{order:9}
}
.audit-panel .pill{align-self:flex-start}
.audit-panel .pill input{width:100%;height:100%}

/* basics */
.audit-basics__note{margin-top:var(--s-5);color:var(--text-muted)}
.audit-link{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* 37 checks: numbered spec cards, 2-up down to 360px */
.audit-cats-grid .card--spec p{font-size:var(--fs-small)}
.audit-cats-grid .card--spec code{font-family:var(--font-mono);font-size:12px;background:var(--paper-3);border-radius:4px;padding:1px 5px}
@media (min-width:769px){.audit-cats-grid__wide{grid-column:1/-1}}
@media (max-width:768px){
  .audit-cats-grid{gap:0 14px}
  .audit-cats-grid .card--spec{padding-top:var(--s-4);gap:8px}
  .audit-cats-grid .card--spec h3{font-size:var(--fs-h4)}
  .audit-cats-grid .card--spec p{font-size:13px;line-height:1.5}
}

/* how it works */
.audit-steps{gap:var(--grid-gap)}
@media (max-width:768px){.audit-steps .card--spec{padding-top:var(--s-4);gap:6px}}

/* why it matters */
.audit-why__body{display:grid;gap:var(--s-4);color:var(--text-muted)}
.audit-why__body p{margin:0}

/* guides: cards on desktop, compact rows on phones */
.audit-guides .blog-grid{gap:var(--grid-gap)}
.audit-guides .audit-guide{padding:0;overflow:hidden;gap:0;text-decoration:none;color:inherit}
.audit-guides .audit-guide .card__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:var(--border);background:var(--ink-2)}
.audit-guides .audit-guide .card__media img{width:100%;height:100%;object-fit:cover;border-radius:0}
.audit-guides .audit-guide .card__media .placeholder{position:absolute;inset:0;display:grid;place-items:center}
.audit-guides .audit-guide .card__body{display:flex;flex-direction:column;gap:6px;padding:var(--s-4) var(--s-5) var(--s-5)}
.audit-guides .audit-guide .cat{color:var(--blue);margin:0}
.audit-guides .audit-guide h3{font-size:var(--fs-h4);line-height:1.3}
.audit-guides .audit-guide p{font-size:var(--fs-small)}
.audit-guides .audit-guide .card__meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:auto;padding-top:4px}
@media (max-width:768px){
  .audit-guides .blog-grid{gap:10px}
  .audit-guides .audit-guide{flex-direction:row;align-items:center;gap:var(--s-4);padding:var(--s-3)}
  .audit-guides .audit-guide .card__media{flex:0 0 96px;aspect-ratio:4/3;border:var(--border);border-radius:var(--r-sm)}
  .audit-guides .audit-guide .card__body{padding:0;min-width:0;gap:4px}
  .audit-guides .audit-guide h3{font-size:16px}
  .audit-guides .audit-guide p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px}
  .audit-guides .audit-guide .cat{font-size:11px}
}

/* fixes after first capture */
.audit-cats-grid__wide{grid-column:1/-1}
.audit-guides .audit-guide .cat{font-size:12px}
.audit-basics__note{font-size:var(--fs-small)}
@media (max-width:768px){
  .audit-hero .clamp-more{order:8;align-self:flex-start;width:auto}
  .audit-hero .audit-hero__lead{margin-top:var(--s-4)}
}