/* Homepage cards for NDT Calculators, Videos and Language groups (2026-09-15): method chips, two-row grids, language tiles and the buttons, on light
   and dark sections. Loaded by partials/home-calculators.php, home-videos.php and home-language-groups.php only when their island renders. */
.ndti-hc__chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:-8px 0 26px;padding:0}
.ndti-hc__chips li{margin:0;padding:0;list-style:none}
.ndti-hc__chip{display:inline-flex;align-items:center;gap:8px;padding:7px 7px 7px 12px;border:1px solid #dbe5ec;border-radius:999px;background:#f5f8fa;color:var(--ni,#0b1620);font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;text-decoration:none;transition:border-color .15s,background-color .15s,color .15s}
.ndti-hc__chip i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:#1f6f2d}
.ndti-hc__chip b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:#fff;color:#5f7183;font-size:12.5px;font-weight:800;line-height:1;box-sizing:border-box}
.ndti-hc__chip:hover,.ndti-hc__chip:focus-visible{border-color:#44a047;background:#eef8ef;color:#1f6f2d;text-decoration:none}
.ndti-sec--dark .ndti-hc__chip{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e7eef4}
.ndti-sec--dark .ndti-hc__chip i{color:#7FD18F}
.ndti-sec--dark .ndti-hc__chip b{background:rgba(255,255,255,.1);color:#cfdde7}
.ndti-sec--dark .ndti-hc__chip:hover,.ndti-sec--dark .ndti-hc__chip:focus-visible{border-color:#7FD18F;background:rgba(127,209,143,.12);color:#fff}
.ndti-hc__empty{margin:0;padding:22px 24px;border:1px dashed #cbd6de;border-radius:14px;color:var(--nmu,#5f7183);font-size:16px}
.ndti-sec--dark .ndti-hc__empty{border-color:rgba(255,255,255,.22);color:#a9bccc}
.ndti-hc__foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* two full rows of tiles at every width (4 / 5 / 6 columns, 3 on tablets, 2 on phones); the rest is hidden */
.ndti-hc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.ndti-hc__grid>li{display:flex;min-width:0;margin:0;padding:0;list-style:none}
.ndti-hc__grid>li:nth-child(n+9){display:none}

/* calculator tiles, on the dark section */
.ndti-hc__calc{position:relative;display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;margin:0;padding:18px 18px 15px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(180deg,#13232f,#0e1a23);color:#cfdde7;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ndti-hc__calc:hover{transform:translateY(-3px);border-color:rgba(127,209,143,.55);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ndti-hc__calc:focus-within{border-color:#7FD18F;box-shadow:0 0 0 3px rgba(127,209,143,.3)}
.ndti-hc__calc p{margin:0}
.ndti-hc__calc-top{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;line-height:1.3;color:#8fa6b6}
.ndti-hc__code{flex:0 0 auto;padding:3px 8px;border-radius:6px;background:rgba(127,209,143,.14);color:#7FD18F;font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.ndti-hc__calc-topic{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ndti-hc__calc-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.7em;margin:0;padding:0;font-size:16px;line-height:1.35;font-weight:800;letter-spacing:-.005em;color:#fff}
.ndti-hc__calc-t a{color:inherit;text-decoration:none}
.ndti-hc__calc-t a::after{content:"";position:absolute;inset:0;z-index:1}
.ndti-hc__calc-t a:focus{outline:none}
.ndti-hc__calc:hover .ndti-hc__calc-t a{color:#7FD18F}
.ndti-hc__calc-s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.5;color:#a9bccc}
.ndti-hc__calc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto!important;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;font-weight:600;line-height:1.3;color:#8fa6b6}
.ndti-hc__calc-ref{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ndti-hc__free{flex:0 0 auto;padding:3px 9px;border-radius:999px;background:#7FD18F;color:#0b1620;font-size:11.5px;font-weight:800;line-height:1.3}

/* video tiles */
.ndti-hc__vid{position:relative;display:flex;flex:1;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #e3e9ee;border-radius:16px;background:#fff;color:var(--ni,#0b1620);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ndti-hc__vid:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,22,32,.12);border-color:#c9d6e0;color:var(--ni,#0b1620);text-decoration:none}
.ndti-hc__vid:focus-visible{outline:none;border-color:#44a047;box-shadow:0 0 0 3px rgba(68,160,71,.28)}
.ndti-hc__vid-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#1d3342,#0b1620)}
.ndti-hc__vid-media img{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;transition:transform .6s ease}
.ndti-hc__vid:hover .ndti-hc__vid-media img{transform:scale(1.045)}
.ndti-hc__play{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:56px;height:40px;margin:-20px 0 0 -28px;border-radius:12px;background:rgba(11,22,32,.74);color:#fff;transition:background-color .2s}
.ndti-hc__play svg{display:block;margin-left:2px}
.ndti-hc__vid:hover .ndti-hc__play{background:#44a047}
.ndti-hc__vid-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:14px 16px 14px}
.ndti-hc__vid-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.76em;font-size:15.5px;line-height:1.38;font-weight:800;letter-spacing:-.005em}
.ndti-hc__vid:hover .ndti-hc__vid-t{color:#1f6f2d}
.ndti-hc__vid-by{display:flex;align-items:center;gap:8px;min-width:0;margin-top:auto;font-size:13px;font-weight:600;line-height:1.3;color:#5f7183}
.ndti-hc__vid-by img{flex:0 0 auto;width:24px;height:24px;margin:0;border:1px solid #e3e9ee;border-radius:6px;background:#fff;object-fit:contain}
.ndti-hc__vid-by span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* language tiles, on the dark section: every public language group */
.ndti-hc__langs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.ndti-hc__langs>li{display:flex;min-width:0;margin:0;padding:0;list-style:none}
.ndti-hc__lang{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:10px 14px 10px 10px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);color:#e7eef4;text-decoration:none;transition:border-color .15s,background-color .15s,transform .2s}
.ndti-hc__lang:hover,.ndti-hc__lang:focus-visible{border-color:#7FD18F;background:rgba(127,209,143,.1);color:#fff;text-decoration:none;transform:translateY(-2px)}
.ndti-hc__lang img{flex:0 0 auto;width:52px;height:52px;margin:0;border-radius:50%;background:#12222e;object-fit:cover}
.ndti-hc__lang-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ndti-hc__lang-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:800;line-height:1.35;color:#fff;text-align:left}   /* dir=auto: Arabic and Urdu names line up with the English name below */
.ndti-hc__lang-e{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.3;color:#a9bccc}

@media (min-width:1500px){
  .ndti-hc__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ndti-hc__grid>li:nth-child(n+9){display:flex}
  .ndti-hc__grid>li:nth-child(n+11){display:none}
  .ndti-hc__langs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:2300px){
  .ndti-hc__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ndti-hc__grid>li:nth-child(n+11){display:flex}
  .ndti-hc__langs{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media (max-width:1199px){
  .ndti-hc__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .ndti-hc__grid>li:nth-child(n+7){display:none}
  .ndti-hc__langs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:991px){
  /* tablets and phones: the language tiles become a sideways-scrolling block, four rows high (three on phones) */
  .ndti-hc__langs{grid-template-columns:none;grid-template-rows:repeat(4,auto);grid-auto-flow:column;grid-auto-columns:34%;overflow-x:auto;margin:0 calc(-1 * var(--wrappad,20px));padding:2px var(--wrappad,20px) 8px;scroll-padding-left:var(--wrappad,20px);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ndti-hc__langs::-webkit-scrollbar{display:none}
  .ndti-hc__langs>li{scroll-snap-align:start}
}
@media (max-width:767px){
  .ndti-hc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ndti-hc__grid>li:nth-child(n+5){display:none}
}
@media (max-width:640px){
  .ndti-hc__chips{flex-wrap:nowrap;overflow-x:auto;margin:-12px calc(-1 * var(--wrappad,20px)) 18px;padding:2px var(--wrappad,20px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ndti-hc__chips::-webkit-scrollbar{display:none}
  .ndti-hc__chip{padding:6px 6px 6px 11px;font-size:13px}
  .ndti-hc__langs{grid-template-rows:repeat(3,auto);grid-auto-columns:62%}
  .ndti-hc__lang{gap:10px;padding:8px 12px 8px 8px}
  .ndti-hc__lang img{width:44px;height:44px}
  .ndti-hc__lang-n{font-size:15px}
  .ndti-hc__calc{gap:6px;padding:13px 12px 11px;border-radius:14px}
  .ndti-hc__calc:hover,.ndti-hc__vid:hover{transform:none}
  .ndti-hc__code{font-size:10px;padding:2px 6px}
  .ndti-hc__calc-t{font-size:14px}
  .ndti-hc__calc-s{display:none}
  .ndti-hc__calc-foot{font-size:11.5px}
  .ndti-hc__vid{border-radius:14px}
  .ndti-hc__play{width:44px;height:32px;margin:-16px 0 0 -22px;border-radius:10px}
  .ndti-hc__vid-body{gap:6px;padding:10px 11px 11px}
  .ndti-hc__vid-t{font-size:13.5px}
  .ndti-hc__vid-by{font-size:11.5px}
  .ndti-hc__vid-by img{width:20px;height:20px}
  .ndti-hc__foot{margin-top:22px}
  .ndti-hc__foot .ndti-btn{flex:1 1 100%}
}