/* ============================================================================
   tiles.css — front-page grouped tiles (front page only).
   Reuses the start.localhost .card / .subs / .sub-btn system, adds group
   section headings and the labeled "ISOs" action button.
   ========================================================================== */

/* group sections */
.group{margin-bottom:34px}
.group-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.group-head h2{font-family:var(--cond);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;font-size:14px;color:var(--ink-dim)}
.group-head .note{font-size:10.5px;color:var(--ink-faint)}

/* mobile: stack the heading row so the note sits UNDER the group name and the
   search goes full-width — instead of squishing the note into a narrow column */
@media (max-width:640px){
  .group-head{flex-direction:column;align-items:flex-start;gap:6px}
  .group-head .note{margin:0}
  .tilesearch{margin-left:0;width:100%}
  .tilesearch input{width:100%;min-width:0}
}

/* responsive auto-fill grid — identical mechanic to the launcher */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.card{position:relative;cursor:pointer;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--edge);border-radius:5px;padding:18px 19px 16px;
  box-shadow:0 14px 34px -24px #000;
  transition:border-color .15s, transform .12s, box-shadow .15s}
.card:hover{border-color:var(--accent,#2c3a44);transform:translateY(-3px);
  box-shadow:0 20px 40px -22px #000, 0 0 0 1px var(--accent,transparent) inset}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:2px;background:var(--accent,var(--amber))}
.card h2{font-family:var(--cond);font-weight:700;letter-spacing:.03em;font-size:21px;margin:0 0 3px}
.card:hover h2{color:var(--accent,var(--amber-soft))}
/* Every tile reserves a top strip (logo top-left, actions top-right); the title
   sits BELOW it, so long names like "AlmaLinux Kitten" never collide with icons. */
.card.has-top{padding-top:46px}

/* top-left brand logo, or a monogram fallback for brands we have no logo for.
   Logos are fixed by HEIGHT and free in WIDTH, so wide wordmarks (VMware, Veeam,
   Microsoft, Zerto) render bigger than square marks instead of being squashed. */
.tlogo{position:absolute;top:11px;left:13px;height:28px;
  display:flex;align-items:center;justify-content:flex-start}
/* tiles with a border badge: drop the logo a touch so it clears the badge */
.card.has-badge .tlogo{top:16px}
.tlogo img{height:auto;width:auto;max-height:24px;max-width:80px;object-fit:contain;display:block}
.tlogo svg{height:24px;width:auto;max-width:80px;display:block}
.tlogo.mono{width:28px;height:28px;justify-content:center;
  font-family:var(--cond);font-weight:700;font-size:13px;color:var(--accent,var(--amber-soft));
  border:1px solid var(--edge);border-radius:7px;background:rgba(255,255,255,.03)}
.card .desc{color:var(--ink-dim);font-size:11.5px;margin-bottom:14px;min-height:30px}
.card .go{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-faint)}
.card .go .host{color:var(--ink-dim)}
.card:hover .go .host{color:var(--ink)}
.card .go .arrow{margin-left:auto;color:var(--accent,var(--amber));font-size:14px;
  transform:translateX(-3px);opacity:.7;transition:.14s}
.card:hover .go .arrow{transform:translateX(0);opacity:1}

/* corner action icons (download / ISOs) — start.localhost .subs pattern,
   extended with an optional text label (the ISOs button). */
.subs{position:absolute;top:13px;right:13px;display:flex;gap:6px}
.sub-btn{display:flex;align-items:center;justify-content:center;gap:6px;
  height:30px;min-width:30px;padding:0 8px;line-height:1;color:var(--ink-dim);
  text-decoration:none;border:1px solid var(--edge);border-radius:6px;
  background:rgba(255,255,255,.02);transition:.13s}
/* pre-tinted FA SVG as a plain <img> — renders in every browser (Safari-safe;
   the CSS-mask approach silently fails in Safari with var()-based masks) */
.ico{width:15px;height:15px;flex:0 0 auto;display:block;opacity:.92}
.sub-btn:hover .ico{opacity:1;filter:brightness(1.25)}
.sub-btn .lbl{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.04em;color:inherit}
.sub-btn:hover{border-color:var(--accent,var(--amber));color:var(--ink);
  background:rgba(255,255,255,.06);transform:scale(1.08)}

/* "OFFICIAL MIRROR" badge — straddles the card's top border, centred + tucked right.
   Solid-ish chip background so it reads as sitting ON the border line. */
.official{position:absolute;top:-11px;left:13px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 11px;white-space:nowrap;
  border:1px solid rgba(244,165,42,.45);border-radius:11px;
  background:linear-gradient(180deg,#1a1d22,#13161b);color:var(--amber-soft);text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 2px 8px -3px #000;transition:border-color .13s,color .13s,transform .13s}
.official .star{color:#ffcf4d;font-size:11px;line-height:1}
.official:hover{border-color:var(--amber);color:#ffe1a3;transform:scale(1.05)}

/* last-sync stamp in the .go row */
.card .go .synced{color:var(--ink-faint);font-size:10.5px;white-space:nowrap}
.card:hover .go .synced{color:var(--ink-dim)}

/* tile search box (right-aligned in the first group heading) */
.tilesearch{margin-left:auto}
.tilesearch input{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel);
  border:1px solid var(--edge);border-radius:6px;padding:6px 11px;min-width:210px;outline:none;
  transition:border-color .13s}
.tilesearch input:focus{border-color:var(--amber)}
.tilesearch input::placeholder{color:var(--ink-faint)}

/* search filtering */
.hidden{display:none!important}
.group-empty .grid{display:none}
.group-empty:not(.group-first){display:none}
.group-first.group-empty{margin-bottom:18px}