/* ========================================
   UNIVERSAL COMPONENT BASE
======================================== */

/* Base */
.c4euniversal-box { margin:20px 0; }
.c4euniversal-grid { display:grid; gap:20px; }
.c4euniversal-card { padding:20px; border-radius:12px; }
.c4euniversal-card h3 { margin-bottom:10px; }
.c4euniversal-card ul { padding-left:18px; }
.c4euniversal-card li { margin-bottom:8px; }

/* Style 1 */
.c4euniversal-style1 .c4euniversal-grid {
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.c4euniversal-style1 .pros { background:#f4fbf6; }
.c4euniversal-style1 .cons { background:#fff7f7; }


/* Style 2 - Professional Paragraph + Bullet Layout */
.c4euniversal-style2 .c4euniversal-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.c4euniversal-style2 .c4euniversal-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  line-height: 1.65;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.c4euniversal-style2 .c4euniversal-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.c4euniversal-style2 .pros {
  border-left: 4px solid #22c55e;
  background: #f0fdf4;
}

.c4euniversal-style2 .cons {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
}

/* Paragraph Styling */
.c4euniversal-style2 p {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* List Styling */
.c4euniversal-style2 ul,
.c4euniversal-style2 ol {
  margin: 0;
  padding-left: 22px;
}

.c4euniversal-style2 li {
  font-size: 20px;
  color: #1f2937;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.c4euniversal-style2 li:last-child {
  margin-bottom: 0;
}

/* Professional Colored Markers */
.c4euniversal-style2 .pros li::marker {
  color: #16a34a;
}

.c4euniversal-style2 .cons li::marker {
  color: #dc2626;
}

/* Style 3 - Table Layout */
.c4euniversal-style3 table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.c4euniversal-style3 th{
  background:#111827;
  color:#fff;
  padding:14px;
  text-align:left;
  font-size:15px;
}

.c4euniversal-style3 td{
  padding:14px;
  border-bottom:1px solid #e5e7eb;
  font-size:15px;
  color:#374151;
}

.c4euniversal-style3 tr:nth-child(even){
  background:#f9fafb;
}

.c4euniversal-style3 tr:hover{
  background:#f3f4f6;
}


/* Style 4 - Compact Responsive Cards */

.c4euniversal-style4 ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  counter-reset:item;
}

.c4euniversal-style4 li{
  counter-increment:item;
  background:linear-gradient(135deg,#1f2937,#111827);
  color:#fff;
  padding:16px 16px 16px 52px;
  border-radius:12px;
  position:relative;
  font-size:14px;
  line-height:1.4;
  transition:.2s;
}

.c4euniversal-style4 li::before{
  content:counter(item);
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  background:#3b82f6;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:600;
}

.c4euniversal-style4 li:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,#243244,#0f172a);
}

/* Style 5 */
.c4euniversal-style5 .c4euniversal-grid {
  grid-template-columns:1fr 1fr;
}
.c4euniversal-style5 .c4euniversal-card { background:#f6faff; }

@media(max-width:768px){
  .c4euniversal-style5 .c4euniversal-grid {
    grid-template-columns:1fr;
  }
}


/* Style 6 - Clean Professional */
.c4euniversal-style6 .c4euniversal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* ✅ added */
}

.c4euniversal-style6 .c4euniversal-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden; /* ✅ key fix — clips children that escape */
}

/* Full-width last card when odd count */
.c4euniversal-style6 .c4euniversal-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* ✅ Apply word-break to ALL descendants, not just h3/p */
.c4euniversal-style6 .c4euniversal-card * {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.c4euniversal-style6 .c4euniversal-card h3,
.c4euniversal-style6 .c4euniversal-card p {
    margin: 0;
}

.c4euniversal-style6 .c4euniversal-card h3 {
    margin-bottom: 8px;
    line-height: 1.4;
}

.c4euniversal-style6 .c4euniversal-card p {
    line-height: 1.6;
}

/* ✅ pre gets scroll instead of overflow */
.c4euniversal-style6 .c4euniversal-card pre {
    overflow-x: auto;
    white-space: pre-wrap; /* or pre if you want horizontal scroll */
}

.c4euniversal-style6 .pros {
    border-top: 4px solid #22c55e;
}

.c4euniversal-style6 .cons {
    border-top: 4px solid #ef4444;
}

@media (max-width: 520px) {
    .c4euniversal-style6 .c4euniversal-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .c4euniversal-style6 .c4euniversal-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* Style 7 - Divider Split Layout */
.c4euniversal-style7 {
  background:#f9fafb;
  padding:20px;
  border-radius:12px;
}
.c4euniversal-style7 .c4euniversal-grid {
  grid-template-columns:1fr 1fr;
  gap:0;
}
.c4euniversal-style7 .c4euniversal-card {
  background:transparent;
  padding:20px;
}
.c4euniversal-style7 .pros {
  border-right:1px solid #e5e7eb;
}
.c4euniversal-style7 .cons {
  border-left:1px solid #e5e7eb;
}

@media(max-width:768px){
  .c4euniversal-style7 .c4euniversal-grid {
    grid-template-columns:1fr;
  }
  .c4euniversal-style7 .pros,
  .c4euniversal-style7 .cons {
    border:none;
    border-bottom:1px solid #e5e7eb;
  }
}