/* /platforms (index). Page-only rules, prefix pfi-. No accent bars, side lines or icon tiles. */

/* Hero band: seven art tiles, each linked, named underneath. */
.pfi-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.pfi-tile{display:flex;flex-direction:column;gap:10px;min-height:44px;color:var(--ink);font-weight:600;line-height:1.25;text-decoration:none}
.pfi-tile img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:#0A0D14}
.pfi-tile:hover span,.pfi-tile:focus-visible span{text-decoration:underline;text-underline-offset:3px}

/* Cards: the platform's mark on its own art, then the two depth lines. Wide, three, wide. */
.pfi-cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pfi-card{grid-column:span 4;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pfi-card-wordpress,.pfi-card-woocommerce,.pfi-card-custom-php,.pfi-card-servers{grid-column:span 6}
.pfi-art{position:relative;height:clamp(120px,11vw,156px);background:#0A0D14}
.pfi-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 62%);mask-image:linear-gradient(to right,transparent 0,#000 62%)}
.pfi-logo{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:auto;height:30px;max-width:46%}
.pfi-logo-woocommerce{height:36px}
.pfi-logo-magento{height:34px}
.pfi-logo-shopify{height:38px}
.pfi-word{position:absolute;left:24px;top:50%;transform:translateY(-50%);font:600 1.5rem/1.1 var(--font-head);letter-spacing:-.03em;color:#fff}
.pfi-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:22px 24px 14px}
.pfi-body h3{font-size:1.25rem}
.pfi-body dl{display:grid;gap:8px;font-size:.93rem;line-height:1.45}
.pfi-body dt{font-weight:600;color:var(--ink)}
.pfi-body dd{margin:0;color:var(--muted)}
.pfi-body .box-link{margin-top:auto;padding-top:8px;min-height:44px}

/* Craft CMS: a heading and a short answer side by side, no box. */
.pfi-soon{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.pfi-soon p{color:var(--muted);line-height:1.6;margin-bottom:12px}

@media (max-width:1100px){
  .pfi-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pfi-card,.pfi-card-wordpress,.pfi-card-woocommerce,.pfi-card-custom-php,.pfi-card-servers{grid-column:span 6}
  .pfi-card-servers{grid-column:1 / -1}
}
@media (max-width:760px){
  .pfi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfi-tiles li:last-child:nth-child(odd){grid-column:1 / -1}
  .pfi-tiles li:last-child:nth-child(odd) img{aspect-ratio:2/1}
  .pfi-cards{grid-template-columns:minmax(0,1fr)}
  .pfi-card,.pfi-card-wordpress,.pfi-card-woocommerce,.pfi-card-custom-php,.pfi-card-servers{grid-column:auto}
  .pfi-card-servers{grid-column:auto}
  .pfi-soon{grid-template-columns:minmax(0,1fr)}
}