/* Home page: category block, "spotlight" layout */
.cat-spot-wrap { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; } @media(max-width:700px){ .cat-spot-wrap { grid-template-columns:1fr; gap:10px; } } .cat-spot-wrap > a { align-self:stretch; } .cat-spot-left { border-radius:20px; overflow:hidden; cursor:pointer; text-decoration:none; position:relative; transition:transform .2s; border:1.5px solid var(--wh-line); display:block; height:100%; } .cat-spot-left:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1); border-color:color-mix(in srgb,var(--orange) 55%,var(--wh-surface)); } .cat-spot-img-area { width:100%; height:100%; min-height:280px; position:relative; overflow:hidden; } @media(max-width:1100px){ .cat-spot-img-area { min-height:240px; } } @media(max-width:700px){ .cat-spot-img-area { min-height:200px; height:220px; } } .cat-spot-img-area img { width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .3s; } .cat-spot-left:hover .cat-spot-img-area img { transform:scale(1.04); } .cat-spot-img-area .spot-emoji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:90px; } .cat-spot-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,22,40,.92) 0%,rgba(10,22,40,.3) 45%,transparent 100%); pointer-events:none; } .cat-spot-badge { position:absolute; top:12px; inset-inline-start:12px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:var(--orange-bar); color:var(--on-orange-bar); font-size:10px; font-weight:700; padding:5px 12px; border-radius:100px; box-shadow:0 2px 8px color-mix(in srgb,var(--orange) 40%,transparent); } .cat-spot-badge-star { font-size:9px; } .cat-spot-content { position:absolute; bottom:0; inset-inline-start:0; inset-inline-end:0; z-index:2; padding:16px 18px 20px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; pointer-events:none; } .cat-spot-content > * { pointer-events:auto; } .cat-spot-name { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.1; border-inline-start:4px solid var(--orange); padding-inline-start:12px; text-shadow:0 2px 12px rgba(0,0,0,.6); } .cat-spot-count { font-size:11px; color:rgba(255,255,255,.65); margin-top:4px; padding-inline-start:16px; } .cat-spot-btn { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:var(--orange-bar); color:var(--on-orange-bar); font-size:12px; font-weight:700; padding:9px 18px; border-radius:100px; white-space:nowrap; box-shadow:0 3px 10px color-mix(in srgb,var(--orange) 40%,transparent); } .cat-spot-right { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; align-self:stretch; } .cat-spot-mini { border-radius:16px; overflow:hidden; cursor:pointer; text-decoration:none; position:relative; transition:transform .2s; border:1.5px solid var(--wh-line); } .cat-spot-mini:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:color-mix(in srgb,var(--orange) 55%,var(--wh-surface)); } .cat-spot-mini-img { width:100%; height:100%; min-height:130px; position:relative; overflow:hidden; } .cat-spot-mini-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; } .cat-spot-mini:hover .cat-spot-mini-img img { transform:scale(1.06); } .cat-spot-mini-img .mini-emoji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:38px; } .cat-spot-mini-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,22,40,.72) 0%,transparent 55%); pointer-events:none; } .cat-spot-mini-info { position:absolute; bottom:0; inset-inline-start:0; inset-inline-end:0; padding:10px 14px 12px; z-index:2; text-align:start; } .cat-spot-mini-name { font-size:14px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 8px rgba(0,0,0,.8); letter-spacing:-.01em; border-inline-start:3px solid var(--orange); padding-inline-start:8px; line-height:1.3; }