/* Grid: unchanged — this is correct */
.atc-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1200px){ .atc-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:900px){  .atc-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){  .atc-grid{ grid-template-columns: 1fr;} }

/* Card */
.atc-card{ background:#fff;border-radius:16px;border:1px solid #eef1f5;box-shadow:0 10px 24px rgba(3,7,18,.06);cursor:pointer;overflow:hidden;outline:none;transition:transform .16s ease,box-shadow .16s ease;}
.atc-card:focus-visible{ box-shadow:0 0 0 3px #3b82f6;}
.atc-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(3,7,18,.10);}

/* Media */
.atc-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#f5f7fb;}
.atc-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.atc-photo--placeholder{ background:linear-gradient(135deg,#e5e7eb,#f3f4f6); }

/* Overlay + hover meta */
.atc-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.70) 0%,rgba(0,0,0,.20) 50%,rgba(0,0,0,0) 100%); opacity:0; transition:opacity .3s ease; pointer-events:none;}
.atc-hover-meta{ position:absolute; bottom:1rem; left:1rem; right:1rem; display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; color:#fff; opacity:0; transition:opacity .3s ease;}
.atc-hover-item{ display:flex; align-items:center; gap:.5rem; }
.atc-hover-item svg{ width:16px; height:16px; flex-shrink:0; }
.atc-media:hover .atc-overlay, .atc-media:hover .atc-hover-meta{ opacity:1; }

/* Body */
.atc-body{ width:100%; padding:16px 20px; box-sizing:border-box; }
.atc-name{ margin: 0 0 4px; font-size: 25px !important; font-weight: 800 !important; color: #111827 !important; }
.atc-company{ font-size:18px; color:#6b7280; margin-top:2px;}
.atc-quote{ margin:12px 0 0; font-size:1.2rem; line-height:1.5; font-style:italic; color:#374151;}

/* Modal base */
.atc-modal[aria-hidden="true"]{ display:none; }
.atc-modal{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; }
.atc-modal__backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); }

/* Boxed dialog (single source of truth) */
.atc-modal__dialog--boxed{ position:relative; width:min(672px,96vw); max-height:90vh; overflow-y:auto; background:#fff; border-radius:1rem; border:1px solid #e5e7eb; box-shadow:0 25px 60px rgba(2,6,23,.35); padding:0; }

/* Close pill */
.atc-dialog-close{ position:absolute; top:16px; right:16px; z-index:10; display:inline-flex; align-items:center; justify-content:center; padding:8px; background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.05); border-radius:999px; backdrop-filter:saturate(160%) blur(6px); box-shadow:0 8px 18px rgba(2,6,23,.15); transition:background .2s, transform .2s, box-shadow .2s; }
.atc-dialog-close:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.20); }
.atc-ico-16{ width:16px; height:16px; } .atc-ico-20{ width:20px; height:20px; }

/* Hero (top section) */
.atc-hero{ position:relative; padding:24px 24px 28px; background:linear-gradient(180deg,#eef2ff 0%,#ffffff 85%); border-radius:1rem 1rem 0 0; }
.atc-hero-inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }
@media (min-width:768px){ .atc-hero-inner{ flex-direction:row; align-items:flex-start; } }

.atc-head-avatar{ width:112px; height:112px; border-radius:999px; object-fit:cover; border:4px solid #fff; box-shadow:0 12px 26px rgba(0,0,0,.22); }
.atc-head-right{ flex:1; text-align:center; }
@media (min-width:768px){ .atc-head-right{ text-align:left; } }
.atc-head-name{ margin:0 0 8px; font-size:1.875rem; line-height:1.2; font-weight:800; color:#111827; }
.atc-head-stack{ display:grid; gap:8px; }
.atc-head-row{ display:inline-flex; align-items:center; gap:8px; }
.atc-head-role{ color:#1d4ed8; font-weight:600; }
.atc-head-company{ color:#4b5563; font-weight:500; }
.atc-head-subrow{ display:flex; align-items:center; gap:16px; justify-content:center; color:#6b7280; font-size:.875rem; }
@media (min-width:768px){ .atc-head-subrow{ justify-content:flex-start; } }
.atc-inline{ display:inline-flex; align-items:center; gap:6px; }

/* CTA */
.atc-cta{ display:flex; justify-content:center; margin-top:-10px; margin-bottom:12px; position:relative; z-index:2; }
.atc-linkedin-btn{ display:inline-flex; align-items:center; gap:8px; background:#2563eb; color:#fff; padding:12px 20px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 20px 40px rgba(37,99,235,.25); transition:transform .2s, box-shadow .2s, background .2s; }

/* Content (testimonial white section) */
.atc-content{ background:#fff; padding:18px 24px 24px; border-radius:0 0 1rem 1rem; }
.atc-section-title{ margin:0 0 10px; font-size:1.05rem; font-weight:700; color:#111827; }
.atc-quote-box{ background:#f3f4f6; border-left:4px solid #3b82f6; padding:16px; border-radius:12px; }
.atc-quote-text{ color:#374151; font-style:italic; line-height:1.6; }

.atc-role{
  font-size:20px; font-weight:600; color:#006dd2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  overflow-wrap:anywhere;
}



/* ===== RTL/LTR handling for testimonial text ===== */
.atc-quote.is-ltr,
.atc-quote-box.is-ltr { direction: ltr; text-align: left; }

.atc-quote.is-rtl,
.atc-quote-box.is-rtl { direction: rtl; text-align: right; }

/* Ensure punctuation flows with the text direction */
.atc-quote-line,
.atc-quote-text {
  position: relative;
  unicode-bidi: plaintext;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Decorative quotes (inserted via CSS so they flip for RTL) */
/* LTR: English curly quotes “ … ” */
.atc-quote.is-ltr .atc-quote-line::before,
.atc-quote-box.is-ltr .atc-quote-text::before {
  content: "“";
  margin-inline-end: 4px;
}
.atc-quote.is-ltr .atc-quote-line::after,
.atc-quote-box.is-ltr .atc-quote-text::after {
  content: "”";
  margin-inline-start: 4px;
}

/* RTL: Arabic guillemets « … » */
.atc-quote.is-rtl .atc-quote-line::before,
.atc-quote-box.is-rtl .atc-quote-text::before {
  content: "«";
  margin-inline-start: 4px; /* appears near start in RTL */
}
.atc-quote.is-rtl .atc-quote-line::after,
.atc-quote-box.is-rtl .atc-quote-text::after {
  content: "»";
  margin-inline-end: 4px;
}


/* =========================
   RTL OVERRIDES (append)
   ========================= */

/* Make the whole card flow RTL when site language is RTL */
html[dir="rtl"] .atc-card { direction: rtl; }

/* Body/content alignment in RTL */
html[dir="rtl"] .atc-body { text-align: right; }
html[dir="rtl"] .atc-name,
html[dir="rtl"] .atc-role,
html[dir="rtl"] .atc-company { text-align: right; }

/* Modal: close pill moves to the left in RTL */
html[dir="rtl"] .atc-dialog-close { right: auto; left: 16px; }

/* Hero block alignment */
html[dir="rtl"] .atc-head-right { text-align: center; }
@media (min-width:768px){
  html[dir="rtl"] .atc-head-right { text-align: right; }
}


/* Quote boxes: use the right edge as the accent in RTL */
.atc-quote-box.is-rtl { border-right: 4px solid #3b82f6; border-left: 0; }
.atc-quote-box.is-ltr { border-left:  4px solid #3b82f6; border-right: 0; }

/* For the short inline quote variant too */
.atc-quote.is-rtl { text-align: right; direction: rtl; }
.atc-quote.is-ltr { text-align: left;  direction: ltr; }

/* Ensure truncation/ellipsis behaves correctly in RTL */
html[dir="rtl"] .atc-role {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional: make hover meta symmetric (already OK but explicit here) */
html[dir="rtl"] .atc-hover-meta { left: 1rem; right: 1rem; }