<script>
  // A single hub "room" card. Presentational — the page passes live preview data in.
  // Every card is tinted with a darker top strip; layout varies by preview type:
  // news = inset photo on top, art = inset photo on the right, static = centered header.
  let { room, artImg = null, newsImg = null, newsHeadline = '' } = $props();
</script>

<a class="card card--{room.size} card--{room.preview}" href={room.href}
   style={room.tint ? `--tint:${room.tint}` : ''}>
  {#if room.preview === 'news'}
    {#if newsImg}<div class="photo photo--top" style="background-image:url({newsImg})"></div>{/if}
    <div class="content">
      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
      {#if newsHeadline}<p class="headline">“{newsHeadline}”</p>{:else}<p class="blurb">{room.blurb}</p>{/if}
      <span class="cta">{room.cta} <span class="arr">→</span></span>
    </div>

  {:else if room.preview === 'art'}
    <div class="content">
      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
      <p class="blurb">{room.blurb}</p>
      <span class="cta">{room.cta} <span class="arr">→</span></span>
    </div>
    {#if artImg}<div class="photo photo--right" style="background-image:url({artImg})"></div>{/if}

  {:else}
    <div class="content">
      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
      <p class="blurb">{room.blurb}</p>
      <span class="cta">{room.cta} <span class="arr">→</span></span>
    </div>
  {/if}
</a>

<style>
  .card {
    --pad: clamp(13px, 1.7vw, 18px);
    position: relative; display: flex; overflow: hidden; text-decoration: none; color: var(--ink);
    background: var(--tint, var(--surface)); border: 1px solid rgba(20, 30, 45, 0.07);
    border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 30, 45, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    padding: var(--pad);
  }
  .card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(20, 30, 45, 0.12); }

  /* size variants — grid spans set by the page; these set the heights */
  .card--large { min-height: 340px; }
  .card--wide { min-height: 200px; }
  .card--small { min-height: 168px; }

  .content { display: flex; flex-direction: column; flex: 1; }

  /* shared side-by-side header (icon + title), clean modern sans title */
  .head { display: flex; align-items: center; gap: 10px; }
  .ic { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; }
  .title {
    font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
  }
  .blurb { margin: 11px 0 14px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
  .cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: 0.98rem; }
  .arr { transition: transform 0.18s ease; }
  .card:hover .arr { transform: translateX(4px); }

  /* photos sit inset (rounded) so the card colour shows all around them */
  .photo { background-size: cover; background-position: center; border-radius: 11px; }

  /* News — inset photo on top, headline below; larger hero header */
  .card--news { flex-direction: column; }
  .card--news .photo--top { width: 100%; flex: 1 1 auto; min-height: 150px; }
  .card--news .content { flex: 0 0 auto; padding-top: 14px; }
  .card--news .ic { font-size: clamp(2rem, 2.8vw, 2.5rem); }
  .card--news .title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .card--news .headline {
    margin: 12px 0 4px; font-family: Georgia, serif; font-style: italic;
    font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.34; max-width: 40ch;
  }

  /* Art — inset rectangular photo on the RIGHT (cover-cropped to hide ragged edges) */
  .card--art { flex-direction: row; align-items: stretch; gap: var(--pad); }
  .card--art .content { justify-content: center; }
  .card--art .photo--right { flex: 0 0 40%; min-width: 120px; align-self: stretch; }

  /* Static — centered header, body left, link pinned to the bottom (cards line up) */
  .card--static .head { justify-content: center; }
  .card--static .blurb { margin: 12px 0 14px; }
  .card--static .cta { margin-top: auto; }
</style>
