/* ======================================================
   IMDTEC Unified CSS — Cards + Grids + Media (imdtec.cards.css)
   ====================================================== */

/* Container */
:root {
  --container-max: 1345px;
  --container-pad: 20px;
  --brand-blue: #17488a;
}
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* ========== MEDIA (عام) ========== */
.media { position: relative; overflow: hidden; border-radius: var(--radius, 12px); background: #f6f8fb; }
.media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.media__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.media--16x9 { aspect-ratio: 16/9; }
.media--4x3  { aspect-ratio: 4/3; }
.media--1x1  { aspect-ratio: 1/1; }

/* ========== GRIDS ========== */
.imdtec-grid { display: grid; gap: 24px; align-items: stretch; justify-items: stretch; }
.imdtec-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.imdtec-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.imdtec-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 1345px) { .imdtec-grid--4 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px)  { .imdtec-grid--4, .imdtec-grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .imdtec-grid--4, .imdtec-grid--3, .imdtec-grid--2 { grid-template-columns: 1fr; } }

.imdtec-grid > * { width: 100%; min-width: 0; }

/* طيّ القائمة (أول 8 عناصر فقط عند is-collapsed) */
.imdtec-grid.imdtec-grid--toggle.is-collapsed > .imdtec-card:nth-child(n+9) { display: none !important; }
.imdtec-grid.imdtec-grid--toggle.is-collapsed > .imdtec-card.imdtec-card--extra { display: none !important; }
.imdtec-grid.imdtec-grid--toggle.is-full > .imdtec-card { display: block !important; }

/* ========== CARDS ========== */
.imdtec-card {
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; height:100%; width:100%;
}
.imdtec-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }

.imdtec-card__link { display:flex; flex-direction:column; height:100%; width:100%; text-decoration:none; color:inherit; }
.imdtec-card__media { margin:0; } /* استخدم مع .media */
.imdtec-card__body { padding:12px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.imdtec-card__title { font-size:18px; line-height:1.35; margin:0 0 6px; color:#0F1114; }
.imdtec-card__meta  { color:#555; font-size:14px; line-height:1.6; }
.imdtec-card__actions { margin-top:auto; }

/* ========== BUTTONS ========== */
.btn { display:inline-block; font-weight:700; text-align:center; border-radius:8px; padding:10px 16px; cursor:pointer; transition: box-shadow .18s ease, transform .06s ease; }
.btn-outline { border:2px solid var(--brand-blue); color:var(--brand-blue); background:#fff; }
.btn-outline:hover { box-shadow:0 2px 10px rgba(23,72,138,.18); }
.btn-outline:active { transform: translateY(1px); }
.w-100 { width:100%; }

/* ========== PILLS ========== */
.imdtec-pill { display:inline-flex; align-items:center; border-radius:999px; border:1px solid #e1e8f5; background:#f3f7ff; padding:.5rem .875rem; font-size:14px; line-height:20px; color:#0f2e5c; }

/* ========== Toggle CTA (voir plus/moins) ========== */
.imdtec-toggle-wrap { display:flex; justify-content:flex-start; align-items:center; margin-top:16px; }
.imdtec-toggle-btn {
  --brand: var(--brand-blue);
  appearance:none; border:2px solid var(--brand);
  background:#fff; color:var(--brand);
  padding:10px 18px; border-radius:12px; font-weight:700; cursor:pointer;
  transition: box-shadow .18s ease, transform .06s ease; outline:none;
}
.imdtec-toggle-btn:hover { box-shadow:0 2px 10px rgba(23,72,138,.18); }
.imdtec-toggle-btn:active { transform: translateY(1px); }

/* ========== SPACING (أقسام) ========== */
.imdtec-hero{ margin-bottom:18px; }
.imdtec-section{ padding:20px 0; }
.section-title{ margin:0 0 12px; }
.imdtec-grid{ margin-top:16px; }
.richtext p{ margin:0 0 12px; }