/* Home page: "Hot in the market" panel and the automatic top-areas bento. Loaded on the front page only. */

/* ---------- Hot in the market ---------- */
.hot-sec { padding-top: 0; }
.hot { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; background: var(--ink-900); color: var(--on-dark-body); border-radius: var(--r-xl, 28px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.hot::before { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,30,30,.38), rgba(200,30,30,0)); z-index: -1; pointer-events: none; }
.hot--noimg { grid-template-columns: 1fr; }
.hot__media { position: relative; min-height: 380px; }
.hot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hot__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 100%); pointer-events: none; }
.hot__badge, .hot__chip { position: absolute; z-index: 1; padding: 8px 14px; font-size: .8125rem; font-weight: 700; line-height: 1.2; border-radius: var(--r-pill, 999px); }
.hot__badge { top: 20px; left: 20px; background: var(--red-600); border-color: transparent; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hot__chip { left: 20px; bottom: 20px; }
.hot__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 0; }
.hot__body .eyebrow { color: var(--red-300); }
.hot__body h2 { color: var(--on-dark); margin: 0 0 .45em; }
.hot__lead { margin: 0 0 var(--s5); color: var(--on-dark-body); max-width: 56ch; }
.hot__points { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: 12px; }
.hot__points li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-dark); font-weight: 600; line-height: 1.4; }
.hot__points .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,92,92,.16); color: var(--red-300); margin-top: -1px; }
.hot__points .ic svg { width: 14px; height: 14px; }
.hot__meta { margin: var(--s5) 0 0; font-size: .875rem; color: var(--on-dark-muted); }
.hot .btn--outline-light { white-space: nowrap; }

@media (max-width: 899px) {
	.hot { grid-template-columns: 1fr; }
	.hot__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 599px) {
	.hot__body { padding: 24px 20px 28px; }
	.hot .btn-row .btn { width: 100%; }
}

/* ---------- Top locations: cards are not links themselves so chips can link on their own ---------- */
.acard__a { color: inherit; text-decoration: none; }
.acard__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.acard__a:focus-visible { outline: none; }
.acard__a:focus-visible::after { outline: 3px solid var(--red-300); outline-offset: -3px; border-radius: inherit; }
.acard .go { pointer-events: none; }
.acard:hover .go { background: var(--red-500); border-color: var(--red-500); }
.acard:hover img { transform: scale(1.07); }
.acard .pillset a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; transition: background .2s; }
.acard .pillset a:hover { background: var(--red-500); border-color: var(--red-500); }
.acard .pillset a b { font-weight: 700; opacity: .7; }

/* Layout for fewer than four cards. */
@media (min-width: 1080px) {
	.bento--n1 { grid-template-rows: 380px; }
	.bento--n1 .acard--lg { grid-column: span 4; grid-row: span 1; }
	.bento--n2 .acard--lg { grid-column: span 2; grid-row: span 2; }
	.bento--n3 .acard--wide { grid-column: span 2; }
}
@media (max-width: 1079px) {
	.bento--n1, .bento--n2, .bento--n3 { grid-template-rows: none; grid-auto-rows: minmax(240px, auto); }
	.bento--n1 .acard--lg, .bento--n2 .acard--lg, .bento--n3 .acard--lg { min-height: 320px; }
	.bento--n2 .acard--lg, .bento--n3 .acard--lg { grid-row: span 1; }
}

/* Dark-section link colours must not tint card titles / sector chips. */
.bento .acard h3, .bento .acard h3 .acard__a, .bento .acard h3 .acard__a:hover { color: #fff; }
.bento .acard .pillset a, .bento .acard .pillset a:hover { color: #fff; }