/* ============================================================
   CRYPTIC MEDIA — REUSABLE ARTICLE COMPONENTS
   Light-theme port of the crypticweb3 .cnt- / .quick-answer- system.
   Same class names on both sites so markup is portable.

   Loaded by the cryptic-guide-components mu-plugin, only on pages that
   actually use a component. Posts only need the classes/shortcodes — no
   inline styles (the classic editor would strip <style> anyway).
   ============================================================ */


/* ------------------------------------------------------------
   1. QUICK ANSWER CALLOUT
   ------------------------------------------------------------ */

.quick-answer-callout{
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(126,34,206,.04));
  border:1px solid #a855f7;
  border-left:4px solid #a855f7;
  border-radius:8px;
  padding:20px 24px;
  margin:24px 0 32px;
}
.quick-answer-callout .quick-answer-label{
  margin:0 0 8px;
  font-size:13px;
  font-weight:600;
  color:#7c3aed;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.quick-answer-callout p{
  margin:0;
  line-height:1.6;
  color:#2a2a2a;
}
.quick-answer-callout p + p{margin-top:12px;}
.quick-answer-callout a{color:#7c3aed;text-decoration:underline;}


/* ------------------------------------------------------------
   2. RESPONSIVE COMPARISON TABLE
   data-label on EVERY td is required. It is what turns each row
   into a labelled card on mobile. The shortcode adds it for you.
   ------------------------------------------------------------ */

.cnt-wrap{
  margin:32px 0;
  border:1px solid #e6e6e6;
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
}
.cnt-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.55;
  font-family:inherit;
}
/* Table name for parsers / screen readers; visually hidden (visible title is
   the heading above). Hidden with clip, NOT display:none, so AT still reads it. */
.cnt-table caption{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.cnt-table thead th{
  background:#111111;
  color:#c084fc;
  text-align:left;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:16px 18px;
  border-bottom:1px solid #e6e6e6;
}
/* shared cell box (both value cells and the new row-header <th scope="row">) */
.cnt-table tbody td,
.cnt-table tbody th{
  padding:16px 18px;
  border-bottom:1px solid #ededed;
  vertical-align:top;
}
.cnt-table tbody td{color:#3d3d3d;}
.cnt-table tbody tr:last-child td,
.cnt-table tbody tr:last-child th{border-bottom:none;}
/* legacy tables (all-<td>): first column is the bold identity cell */
.cnt-table tbody td:first-child{
  color:#111111;
  font-weight:600;
}
/* new tables: <th scope="row"> is the bold identity cell (th defaults to centre) */
.cnt-table tbody th{
  color:#111111;
  font-weight:600;
  text-align:left;
}
.cnt-table tbody tr{transition:background .15s;}
.cnt-table tbody tr:hover{background:rgba(168,85,247,.04);}

/* MOBILE: each row becomes a labelled card */
@media(max-width:768px){
  .cnt-wrap{background:transparent;border:none;overflow:visible;}
  .cnt-table thead{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }
  .cnt-table,.cnt-table tbody,.cnt-table tr,.cnt-table td,.cnt-table th{display:block;width:100%;}
  .cnt-table tbody tr{
    background:#ffffff;
    border:1px solid #e6e6e6;
    border-radius:12px;
    margin-bottom:14px;
    padding:6px 4px;
    overflow:hidden;
  }
  .cnt-table tbody tr:hover{background:#ffffff;}
  /* new tables: the row-header th becomes the card's dark title bar on top */
  .cnt-table tbody th{
    background:#111111;
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    text-align:left;
    padding:12px 18px;
    margin:-6px -4px 6px;          /* cancel the tr padding so the bar spans the card */
    border-bottom:none;
  }
  .cnt-table tbody td{
    border-bottom:1px solid #ededed;
    padding:11px 18px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    text-align:right;
  }
  .cnt-table tbody td:last-child{border-bottom:none;}
  .cnt-table tbody td:first-child{font-size:17px;padding-top:14px;}
  .cnt-table tbody td::before{
    content:attr(data-label);
    color:#8a8a8a;
    font-weight:600;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-align:left;
    flex-shrink:0;
    padding-top:2px;
  }
}


/* ------------------------------------------------------------
   3. STAT CALLOUT  (optional, for sourced figures)
   ------------------------------------------------------------ */

.cnt-stat{
  border-left:3px solid #a855f7;
  background:#fbfaff;
  padding:16px 20px;
  border-radius:0 8px 8px 0;
  margin:24px 0 26px;
}
.cnt-stat p{margin:0;font-size:15px;line-height:1.65;color:#3d3d3d;}
.cnt-stat p + p{margin-top:10px;}
.cnt-stat-figure{
  display:block;
  font-size:22px;
  font-weight:700;
  color:#111111;
  line-height:1.2;
  margin-bottom:6px;
  letter-spacing:-.02em;
}
.cnt-stat-src{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:#6b6b6b;
}
.cnt-stat-src a{color:#7c3aed;}