/* ============================================================
   IPHIOS LOGISTICS CORP. — community
   The social wall inside "Community Involvement": three cards,
   one per channel, styled to sit inside the same paper/ink
   system as everything else on the page rather than looking
   like a bolted-on widget.
   ============================================================ */

.community{background:var(--paper)}

.social{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
}

.social__card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  background:var(--paper);
  opacity:0; /* community.js fades these in, matching .step/.contact__row */
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.social__card:hover{transform:translateY(-4px);border-color:var(--amber-deep)}

.social__head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.social__head i{font-size:14px;color:var(--amber-deep);width:16px;text-align:center}

.social__body{
  flex:1;min-height:260px;max-height:520px;overflow-y:auto;
  padding:18px 20px;display:flex;flex-direction:column;gap:18px;
  scrollbar-width:thin;
}
.social__body::-webkit-scrollbar{width:6px}
.social__body::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}

.social__body iframe{border:0;width:100%;display:block}
.social__body .fb-page,
.social__body .instagram-media{max-width:100% !important;width:100% !important}

.social__empty{
  margin:auto;text-align:center;color:var(--ash-2);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-mono);
}

.social__foot{
  display:block;padding:13px 20px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;color:var(--ash);
  transition:color .35s var(--ease);
}
.social__foot:hover{color:var(--amber-deep)}

@media(max-width:1080px){
  .social{grid-template-columns:1fr}
  .social__body{max-height:420px}
}