/* Gemstones: home-page section (round tiles) and gemstones page (cards). */
.gems { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.75rem, 7vw, 6.25rem); background: radial-gradient(ellipse at 15% 0%, rgba(206, 3, 7, 0.22), transparent 50%), var(--wine-2); color: #e8d9bd; overflow: hidden; }
.gems .sec-head h2 { color: #fff3dc; }
.gems .sec-head p { color: rgba(232, 217, 189, 0.78); }
.gems .sec-head .textlink { color: var(--yellow); white-space: nowrap; }
.gems :focus-visible { outline-color: var(--yellow); }
.gem-tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1.6rem 1rem; padding-top: 0.4rem; }
.gem-tile a { display: grid; justify-items: center; gap: 0.9rem; text-align: center; text-decoration: none; color: #f8ecd5; font: 400 1rem/1.25 var(--serif); }
.gem-img {
    width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--wine);
    box-shadow: 0 0 0 4px var(--wine-2), 0 0 0 5px rgba(252, 195, 20, 0.45); transition: box-shadow 0.25s, transform 0.4s var(--ease);
}
.gem-img img { width: 100%; height: 100%; object-fit: cover; }
.gem-tile a:focus-visible .gem-img { box-shadow: 0 0 0 4px var(--wine-2), 0 0 0 5px var(--yellow), 0 18px 30px -12px rgba(252, 195, 20, 0.45); transform: translateY(-5px); }
@media (hover: hover) and (min-width: 701px) {
.gem-tile a:hover .gem-img { box-shadow: 0 0 0 4px var(--wine-2), 0 0 0 5px var(--yellow), 0 18px 30px -12px rgba(252, 195, 20, 0.45); transform: translateY(-5px); }
}

@media (hover: hover) and (min-width: 701px) {
.gem-tile a:hover .gem-name { color: var(--yellow); }
}


.gem-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 1.5rem; }
.gem-card { scroll-margin-top: calc(var(--hh) + 5rem); padding: 0.9rem 0.9rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-1); transition: box-shadow 0.3s, border-color 0.3s; animation: rise 0.55s var(--ease) both; }
.gem-card:target { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 165, 33, 0.35), var(--sh-2); }
.gem-card-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.gem-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
@media (hover: hover) and (min-width: 701px) { .gem-card:hover .gem-card-img img { transform: scale(1.05); } }
.gem-card-name { margin: 1.1rem 0.4rem 0; font-size: 1.55rem; line-height: 1.15; }
.gem-card-d { margin: 0.5rem 0.4rem 0; color: var(--ink-soft); font-size: 0.95rem; }
.gem-ask { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0.4rem 0; padding: 0.45rem 1rem; border: 1px solid rgba(206, 3, 7, 0.3); border-radius: 999px; color: var(--red); font-size: 0.86rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
@media (hover: hover) and (min-width: 701px) {
.gem-ask:hover { background: var(--red); color: #fff7ea; }
}

.gem-cards.swap { animation: rise 0.4s var(--ease); }
@media (max-width: 1000px) {
    .gem-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.2rem; }
    .gem-tile a { max-width: 10rem; margin-inline: auto; }
    .gem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .gem-tiles { gap: 1.6rem 0.8rem; } .gem-tile a { font-size: 0.95rem; } .gem-cards { grid-template-columns: 1fr; } }