/* =========================================
   AUDIT.CSS
   Styles for audit/ index + detail pages
   ========================================= */

/* =========================================
   AUDIT HERO (listing page)
========================================= */

.audit-hero {
  padding: 120px 50px 80px;
}

.audit-hero__inner {
  max-width: 860px;
}

.audit-hero__kicker {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   13px;
  color:       var(--blue);
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.audit-hero__kicker-line {
  display:    block;
  width:      20px;
  height:     1px;
  background: var(--blue);
}

.audit-hero__title {
  font-size:      clamp(3rem, 6vw, 5rem);
  font-weight:    300;
  letter-spacing: -0.08em;
  line-height:    0.92;
  margin-bottom:  28px;
}

.audit-hero__title span { color: var(--blue); }

.audit-hero__desc {
  font-size:     18px;
  line-height:   1.65;
  color:         var(--text-secondary);
  max-width:     560px;
  margin-bottom: 48px;
}

.audit-hero__meta {
  display: flex;
  gap:     48px;
}

.audit-hero__meta-item {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.audit-hero__meta-value {
  font-size:      2.4rem;
  font-weight:    700;
  letter-spacing: -0.05em;
  line-height:    1;
  color:          var(--text-primary);
}

.audit-hero__meta-label {
  font-size: 13px;
  color:     var(--text-muted);
}

/* =========================================
   METHODOLOGY STRIP
========================================= */

.audit-method-strip {
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:       18px 50px;
  background:    rgba(0,0,0,0.02);
}

.audit-method-strip__inner {
  display:     flex;
  align-items: center;
  gap:         24px;
  flex-wrap:   wrap;
}

.audit-method__label {
  font-size:      11px;
  letter-spacing: 3px;
  color:          var(--text-muted);
  white-space:    nowrap;
}

.audit-method__pills {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

.audit-method__pill {
  font-size: 13px;
  color:     var(--text-secondary);
}

.audit-method__sep {
  color: var(--text-muted);
}

/* =========================================
   AUDIT LISTING GRID
========================================= */

.audit-listing {
  padding: 80px 50px;
}

.audit-listing__inner {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   32px;
  max-width:             1200px;
}

/* =========================================
   AUDIT CARD
========================================= */

.audit-card {
  display:          flex;
  flex-direction:   column;
  border:           1px solid var(--border);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
  text-decoration:  none;
  color:            inherit;
  background:       var(--bg-elevated);
  transition:
    transform  0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s ease;
}

.audit-card:not(.audit-card--soon):hover {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow-lg);
  border-color: rgba(26,70,201,0.2);
}

.audit-card--soon {
  opacity: 0.65;
  cursor:  default;
}

/* THUMBNAIL */

.audit-card__thumb {
  position:   relative;
  height:     220px;
  overflow:   hidden;
}

.audit-card__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.6s var(--ease-out);
}

.audit-card:not(.audit-card--soon):hover .audit-card__thumb img {
  transform: scale(1.04);
}

.audit-card__thumb-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.55) 100%
  );
}

/* SCORE BADGE */

.audit-card__score {
  position:    absolute;
  top:         16px;
  left:        16px;
  background:  rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding:     6px 14px;
  display:     flex;
  align-items: baseline;
  gap:         3px;
}

.audit-card__score-value {
  font-size:   20px;
  font-weight: 700;
  color:       #fff;
  line-height: 1;
}

.audit-card__score-label {
  font-size: 12px;
  color:     rgba(255,255,255,0.6);
}

/* SEVERITY */

.audit-card__severity {
  position:       absolute;
  top:            16px;
  right:          16px;
  font-size:      11px;
  letter-spacing: 1.5px;
  padding:        5px 10px;
  border-radius:  var(--radius-pill);
  font-weight:    600;
}

.audit-card__severity--high   { background: rgba(239,68,68,0.9);  color: #fff; }
.audit-card__severity--medium { background: rgba(245,158,11,0.9); color: #fff; }
.audit-card__severity--low    { background: rgba(34,197,94,0.9);  color: #fff; }

/* COMING SOON */

.audit-card__soon-badge {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  background:     rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  color:          #fff;
  font-size:      12px;
  letter-spacing: 3px;
  padding:        10px 20px;
  border-radius:  var(--radius-pill);
}

/* CARD BODY */

.audit-card__body {
  padding: 28px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     12px;
}

.audit-card__meta {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.audit-card__category {
  font-size:      11px;
  letter-spacing: 2px;
  color:          var(--blue);
}

.audit-card__year {
  font-size: 12px;
  color:     var(--text-muted);
}

.audit-card__title {
  font-size:      1.5rem;
  font-weight:    600;
  letter-spacing: -0.03em;
  line-height:    1.2;
  color:          var(--text-primary);
}

.audit-card__tagline {
  font-size:   14px;
  line-height: 1.55;
  color:       var(--text-secondary);
  font-style:  italic;
}

.audit-card__summary {
  font-size:   14px;
  line-height: 1.6;
  color:       var(--text-muted);
}

.audit-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      auto;
  padding-top:     16px;
  border-top:      1px solid var(--border);
}

.audit-card__tags {
  display: flex;
  gap:     8px;
  flex-wrap: wrap;
}

.audit-card__tag {
  font-size:    11px;
  padding:      4px 10px;
  border-radius: var(--radius-pill);
  border:       1px solid var(--border);
  color:        var(--text-muted);
}

.audit-card__friction {
  font-size:   13px;
  color:       var(--blue);
  white-space: nowrap;
}

/* =========================================
   AUDIT CTA (listing page)
========================================= */

.audit-cta {
  padding:    80px 50px 120px;
  border-top: 1px solid var(--border);
}

.audit-cta__inner { max-width: 640px; }

.audit-cta__kicker {
  font-size:      11px;
  letter-spacing: 3px;
  color:          var(--blue);
  margin-bottom:  20px;
}

.audit-cta__title {
  font-size:      clamp(2.4rem, 5vw, 3.8rem);
  font-weight:    300;
  letter-spacing: -0.06em;
  line-height:    0.95;
  margin-bottom:  20px;
}

.audit-cta__title span { color: var(--blue); }

.audit-cta__desc {
  font-size:     16px;
  line-height:   1.65;
  color:         var(--text-secondary);
  margin-bottom: 36px;
}

.audit-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.audit-cta__btn {
  display:         inline-flex;
  align-items:     center;
  padding:         14px 28px;
  border-radius:   var(--radius-pill);
  font-size:       15px;
  font-weight:     500;
  text-decoration: none;
  transition:      all 0.25s ease;
}

.audit-cta__btn--primary {
  background: var(--blue);
  color:      #fff;
}

.audit-cta__btn--primary:hover {
  background: var(--blue-light);
  transform:  translateY(-2px);
}

.audit-cta__btn--ghost {
  border: 1px solid var(--border-hover);
  color:  var(--text-primary);
}

.audit-cta__btn--ghost:hover {
  border-color: var(--blue);
  color:        var(--blue);
}

/* =========================================
   AUDIT DETAIL — HERO
========================================= */

.audit-detail-hero {
  position:    relative;
  min-height:  580px;
  overflow:    hidden;
}

.audit-detail-hero__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  position:   absolute;
  inset:      0;
}

.audit-detail-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(10,20,60,0.80) 0%,
    rgba(0,0,0,0.65)    100%
  );
}

.audit-detail-hero__content {
  position: relative;
  z-index:  2;
  padding:  80px 50px 80px;
  display:  flex;
  flex-direction: column;
  gap:      16px;
  max-width: 760px;
}

.audit-detail-hero__category {
  font-size:      12px;
  letter-spacing: 2px;
  color:          rgba(255,255,255,0.7);
}

.audit-detail-hero__title {
  font-size:      clamp(2.8rem, 6vw, 5rem);
  font-weight:    300;
  letter-spacing: -0.07em;
  line-height:    0.92;
  color:          #fff;
}

.audit-detail-hero__tagline {
  font-size:   18px;
  line-height: 1.5;
  color:       rgba(255,255,255,0.85);
  max-width:   540px;
}

/* SCORE RING */

.audit-score-ring {
  position: relative;
  width:    120px;
  height:   120px;
  margin-top: 8px;
}

.audit-score-ring__svg {
  width:  100%;
  height: 100%;
}

.audit-score-ring__inner {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
}

.audit-score-ring__value {
  font-size:   28px;
  font-weight: 700;
  color:       #fff;
  line-height: 1;
}

.audit-score-ring__label {
  font-size: 10px;
  color:     rgba(255,255,255,0.6);
  letter-spacing: 1px;
}

/* =========================================
   HEURISTIC SCORECARD
========================================= */

.audit-scorecard {
  display:        flex;
  flex-direction: column;
  gap:            0;
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  overflow:       hidden;
  margin-top:     32px;
}

.audit-scorecard__row {
  display:    flex;
  align-items: flex-start;
  gap:        20px;
  padding:    20px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.audit-scorecard__row:last-child { border-bottom: none; }
.audit-scorecard__row:hover { background: rgba(0,0,0,0.015); }

.audit-scorecard__id {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  color:          var(--text-muted);
  padding-top:    3px;
  min-width:      28px;
}

.audit-scorecard__content { flex: 1; }

.audit-scorecard__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   8px;
  gap:             12px;
}

.audit-scorecard__label {
  font-size:   14px;
  font-weight: 500;
  color:       var(--text-primary);
}

.audit-scorecard__score {
  font-size:   13px;
  font-weight: 700;
  white-space: nowrap;
  padding:     3px 10px;
  border-radius: var(--radius-pill);
}

.audit-scorecard__score--critical { background: rgba(239,68,68,0.1);  color: #dc2626; }
.audit-scorecard__score--warning  { background: rgba(245,158,11,0.1); color: #d97706; }
.audit-scorecard__score--good     { background: rgba(34,197,94,0.1);  color: #16a34a; }

.audit-scorecard__bar-wrap {
  height:        4px;
  background:    var(--border);
  border-radius: 2px;
  overflow:      hidden;
  margin-bottom: 10px;
}

.audit-scorecard__bar {
  height:        100%;
  border-radius: 2px;
  width:         0;   /* animated by JS */
}

.audit-scorecard__note {
  font-size:   13px;
  line-height: 1.55;
  color:       var(--text-muted);
}

/* =========================================
   FRICTION / REDESIGN BADGES
========================================= */

.audit-badge {
  display:        inline-block;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 1px;
  padding:        3px 8px;
  border-radius:  var(--radius-pill);
  vertical-align: middle;
  margin-left:    8px;
}

.audit-badge--critical { background: rgba(239,68,68,0.12);  color: #dc2626; }
.audit-badge--warning  { background: rgba(245,158,11,0.12); color: #d97706; }
.audit-badge--low      { background: rgba(100,116,139,0.12);color: #64748b; }

.audit-step__num--critical {
  background: rgba(239,68,68,0.1);
  color:      #dc2626;
  border:     1px solid rgba(239,68,68,0.2);
}

.audit-step__num--warning {
  background: rgba(245,158,11,0.1);
  color:      #d97706;
  border:     1px solid rgba(245,158,11,0.2);
}

.audit-step__num--low {
  background: var(--border);
  color:      var(--text-muted);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
  .audit-listing__inner {
    grid-template-columns: 1fr;
  }
  .audit-hero__meta { gap: 32px; }
}

@media (max-width: 768px) {
  .audit-hero        { padding: 80px 20px 60px; }
  .audit-hero__meta  { flex-wrap: wrap; gap: 24px; }
  .audit-listing     { padding: 60px 20px; }
  .audit-cta         { padding: 60px 20px 80px; }
  .audit-method-strip { padding: 16px 20px; }
  .audit-method-strip__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .audit-detail-hero__content { padding: 60px 20px; }
  .audit-detail-hero { min-height: 500px; }
  .audit-scorecard__row { flex-direction: column; gap: 8px; }
  .audit-scorecard__id { min-width: auto; }
  .cs-next { flex-direction: column; }
}

@media (max-width: 480px) {
  .audit-hero__title    { font-size: 2.6rem; }
  .audit-hero__meta     { gap: 20px; }
  .audit-cta__actions   { flex-direction: column; }
  .audit-cta__btn       { justify-content: center; }
}