/* SITES-CROSSLINK-1: "Our worlds" cross-site art cards on Home.
   Own file so it can land beside ACITY-METAL-1's style.css rewrite.
   Regal palette from style.css (ACITY-METAL-1). Scoped to .worlds-*.
   Theme keys follow style.css: dark in :root, light under
   prefers-color-scheme without data-theme, then html[data-theme]. */

/* WORLDS-REGAL-1 / WORDMARK-METAL-1: headings and card titles reuse the
   shared logo metal from style.css (--heading-fill = --metal-fill,
   --heading-emboss = --metal-emboss: orange rim and warm glow in dark, orange
   rim and soft dark shadow in light). Only focus and lift live here. */
:root {
  --worlds-focus: var(--focus);
  --worlds-rim: rgba(232, 211, 168, 0.28);
  --worlds-lift-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.12), 0 2px 0 rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5), 0 24px 40px -16px rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --worlds-focus: #1e1446;
    --worlds-rim: rgba(255, 255, 255, 0.75);
    --worlds-lift-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 2px rgba(40, 44, 64, 0.14), 0 10px 18px rgba(40, 44, 64, 0.16), 0 26px 40px -18px rgba(40, 44, 64, 0.45);
  }
}

html[data-theme="dark"] {
  --worlds-focus: var(--focus);
  --worlds-rim: rgba(232, 211, 168, 0.28);
  --worlds-lift-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.12), 0 2px 0 rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5), 0 24px 40px -16px rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] {
  --worlds-focus: #1e1446;
  --worlds-rim: rgba(255, 255, 255, 0.75);
  --worlds-lift-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 2px rgba(40, 44, 64, 0.14), 0 10px 18px rgba(40, 44, 64, 0.16), 0 26px 40px -18px rgba(40, 44, 64, 0.45);
}

/* Theme-independent: the card text always sits on a dark scrim over art. */
.worlds {
  --worlds-hook: #e7e9ee;
  --worlds-scrim: 10, 10, 13;
  margin: 2rem auto 2.6rem;
}

.worlds-heading {
  margin: 0 0 0.9rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: 0.05em;
  color: var(--metal-solid);
  text-shadow: var(--metal-fallback-shadow);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .worlds-heading {
    background-image: var(--heading-fill);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: var(--heading-emboss);
  }
}

.worlds-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.worlds-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 15.5rem;
  overflow: hidden;
  color: var(--worlds-hook);
  text-decoration: none;
  background: var(--panel-fill);
  border: 1px solid var(--worlds-rim);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Embossed metallic slash bar, with a dark offset copy for depth. */
.worlds-card::before,
.worlds-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: var(--bar-h);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  pointer-events: none;
}

.worlds-card::before {
  z-index: 3;
  background: var(--accent-bar);
  box-shadow: var(--accent-bar-shadow);
}

.worlds-card::after {
  z-index: 2;
  top: 2px;
  background: var(--accent-bar-drop);
}

.worlds-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.worlds-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 2.6rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, rgba(var(--worlds-scrim), 0) 0, rgba(var(--worlds-scrim), 0.88) 1.9rem, rgba(var(--worlds-scrim), 0.93) 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 244, 222, 0.08);
}

.worlds-card-title {
  width: fit-content;
  max-width: 100%;
  font-family: "Russo One", "Arial Black", "Gill Sans", "Gill Sans MT", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--metal-solid);
  text-shadow: var(--metal-fallback-shadow-sm);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .worlds-card-title {
    background-image: var(--heading-fill);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: var(--heading-emboss);
  }
}

.worlds-card-hook {
  color: var(--worlds-hook);
  font-size: 1rem;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.worlds-card:hover {
  color: var(--worlds-hook);
  transform: translateY(-3px);
  box-shadow: var(--worlds-lift-shadow);
}

.worlds-card:focus-visible {
  outline: 3px solid var(--worlds-focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

@media (min-width: 760px) {
  .worlds-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .worlds-card {
    min-height: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .worlds-card {
    transition: none;
  }

  .worlds-card:hover {
    transform: none;
  }
}