/* Homepage «Εργαλεία» / "Tools" made compact (owner t1368u 2026-11-01). One of: .htc-A (small cards), .htc-B (slim list), .htc-C (one card -> Tools page). Site colour variables only; dark + light. */
html #tools.htc .gc .gm>span:not(.ep-new),html #tools.htc .gc .gth{display:none}
html #tools.htc .gc .gm .ep-new{display:inline-block}
html #tools.htc .htc-l{margin:4px 0 0;font-family:var(--ser);font-size:.84rem;line-height:1.4;color:var(--m)}
/* A: small cards, thumbnail + title + one line; 3 columns desktop, 2 tablet, 1 phone */
html #tools.htc-A.tl-A.tl-S3 .tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px}
html #tools.htc-A.tl-A.tl-S3 .gc:nth-child(n){grid-column:auto;display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:16px;align-items:center;position:relative}
html #tools.htc-A .gc .gi{width:128px;aspect-ratio:16/10;margin:0}
html #tools.htc-A .gc .gb{padding:0;min-width:0}
html #tools.htc-A .gc .gb::before{display:none}
html #tools.htc-A .gc .gm{position:absolute;right:-12px;top:2px;margin:0;z-index:2}
html #tools.htc-A .gc .gb{position:relative;padding-right:14px}
html #tools.htc-A.tl-A.tl-S3 .gc:nth-child(n) h3{font-size:1.02rem;line-height:1.28;margin:0}
html #tools.htc-A .htc-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1000px){html #tools.htc-A.tl-A.tl-S3 .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){html #tools.htc-A.tl-A.tl-S3 .tgrid{grid-template-columns:1fr;gap:0}
 html #tools.htc-A.tl-A.tl-S3 .gc:nth-child(n){grid-template-columns:92px minmax(0,1fr);column-gap:14px;padding:11px 0;border-bottom:1px solid var(--gb)}
 html #tools.htc-A.tl-A.tl-S3 .gc:nth-child(n):last-child{border-bottom:0}
 html #tools.htc-A .gc .gi{width:92px}
 html #tools.htc-A.tl-A.tl-S3 .gc:nth-child(n) h3{font-size:.98rem}
 html #tools.htc-A .htc-l{font-size:.8rem;margin-top:2px}
 html #tools.htc-A .gc .gm{top:2px;right:0}}
/* B: slim text list, no pictures; 3 columns desktop, 2 tablet, 1 phone */
html #tools.htc-B.tl-A.tl-S3 .tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--gb)}
html #tools.htc-B.tl-A.tl-S3 .gc:nth-child(n){grid-column:auto;display:block;padding:14px 0 13px;border-bottom:1px solid var(--gb);position:relative}
html #tools.htc-B .gc .gi{display:none}
html #tools.htc-B .gc .gb{padding:0}
html #tools.htc-B .gc .gb::before{display:none}
html #tools.htc-B .gc .gm{position:absolute;right:0;top:16px;margin:0}
html #tools.htc-B.tl-A.tl-S3 .gc:nth-child(n) h3{font-size:1.04rem;line-height:1.3;margin:0;padding-right:14px}
html #tools.htc-B .gc h3::after{content:" →";color:var(--gold);opacity:0;transition:opacity .2s}
html #tools.htc-B .gc:hover h3::after,html #tools.htc-B .gc:focus-visible h3::after{opacity:1}
html #tools.htc-B .htc-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
@media(max-width:1000px){html #tools.htc-B.tl-A.tl-S3 .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){html #tools.htc-B.tl-A.tl-S3 .tgrid{grid-template-columns:1fr}
 html #tools.htc-B.tl-A.tl-S3 .gc:nth-child(n){padding:11px 0 10px}
 html #tools.htc-B.tl-A.tl-S3 .gc:nth-child(n) h3{font-size:.98rem}
 html #tools.htc-B .htc-l{white-space:normal;font-size:.8rem}}
/* C: one homepage card (mosaic of the tool pictures) -> Tools page */
html #tools.htc-C .htc-mo{display:grid;gap:6px;aspect-ratio:auto;overflow:visible;margin:0;background:none}
html #tools.htc-C .htc-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
html #tools.htc-C .htc-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
html #tools.htc-C .htc-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
html #tools.htc-C .htc-mo .htc-t{position:relative;aspect-ratio:16/10;margin:0;overflow:hidden}
html #tools.htc-C .htc-card .gm{display:flex;gap:10px;align-items:center}
html #tools.htc-C .htc-card .gm>span:not(.ep-new){display:inline}
html #tools.htc-C .htc-names{margin:.7rem 0 0;font-family:var(--ser);font-size:.8rem;line-height:1.5;color:var(--m)}
html #tools.htc-C .htc-go{display:inline-block;margin-top:.9rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--m);border-bottom:1px solid transparent;padding:4px 0}
html #tools.htc-C .htc-card:hover .htc-go,html #tools.htc-C .htc-card:focus-visible .htc-go{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:720px){html #tools.htc-C .htc-mo{gap:4px}html #tools.htc-C .htc-names{display:none}}
/* C: the Tools page itself (/ergaleia/, /en/tools/) = the former homepage cards, full size */
.htc-page{padding-top:clamp(24px,4vw,48px)}
.htc-page .sh h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.4rem);letter-spacing:-.01em;line-height:1.05;margin:0}