/* Platform Components block (fabricator/blocks/platform_components.html) — Products snippet card grid */
.card.comp{position:relative;display:flex;flex-direction:column;padding:0 1.5rem 0;gap:.9rem;
  border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .2s ease,border-color .15s}
.card.comp:hover{transform:translateY(-2px);box-shadow:0 18px 34px -22px rgba(74,66,62,.4);
  border-color:var(--line-2);}
.card.comp .ch{display:flex;align-items:center;gap:1rem;margin:0 -1.5rem;padding:1.25rem 1.5rem .25rem;}
.card.comp .ch h3{font-size:1.35rem;margin:0}
.card.comp .ch h3 a:hover{color:var(--tc,var(--green))}
.card.comp .ic-tile{width:4rem;height:4rem;border-radius:0;background:transparent;box-shadow:none;
  display:grid;place-items:center;flex:none}
.card.comp .ic-tile i,.card.comp .ic-tile svg{width:1.5rem;height:1.5rem;color:var(--tc,var(--green))}
.card.comp .ic-tile img{width:4rem;height:4rem;object-fit:contain}
.card.comp p{font-size:.9rem;line-height:1.62;color:var(--ink-2)}
.card.comp .upd{margin-top:auto;border-top:1px solid var(--line);padding-top:.85rem;display:flex;flex-direction:column}
.card.comp .upd-h{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.15rem}
.card.comp .upd-row{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;
  padding:.6rem .5rem;margin:0 -.5rem;border-radius:10px;border-bottom:1px solid var(--line);
  color:var(--ink);transition:color .15s,background .15s}
.card.comp .upd-row:last-child{border-bottom:0}
.card.comp .upd-row:hover{background:color-mix(in srgb,var(--tc,var(--green)) 7%,#fff);color:var(--ink)}
.card.comp .upd-row:hover .t{color:var(--tc,var(--green))}
.card.comp .upd-row .thumb{width:4rem;height:3rem;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-soft);flex:none;box-shadow:0 4px 10px -6px rgba(74,66,62,.35)}
.card.comp .upd-row .t{display:block;font-size:.86rem;font-weight:600;line-height:1.4;color:var(--ink)}
.card.comp .upd-row small{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tc,var(--green));background:color-mix(in srgb,var(--tc,var(--green)) 10%,#fff);
  padding:.1rem .45rem;border-radius:999px;margin-top:.35rem}
.card.comp .foot{display:flex;justify-content:space-between;align-items:center;margin:.3rem -1.5rem 0;
  padding:.9rem 1.5rem;border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:.87rem;font-weight:700;color:var(--amber);transition:background .15s,color .15s}
.card.comp .foot i,.card.comp .foot svg{width:1rem;height:1rem;transition:transform .15s}
.card.comp .foot:hover{background:var(--green-soft);color:var(--green-d)}
.card.comp .foot:hover i,.card.comp .foot:hover svg{transform:translateX(3px)}

/* the 7th (last) card stands alone — center it under a 3-column grid */
.platform-components .grid-3 .card.comp.solo{grid-column:2}
@media(max-width:960px){.platform-components .grid-3 .card.comp.solo{grid-column:1/-1;width:calc(50% - .625rem);justify-self:center}}
@media(max-width:620px){.platform-components .grid-3 .card.comp.solo{width:100%}}