/* ==========================================================================
   Tool Cards — Image Banner + Accent Strip + Type Pill
   Add link to this file inside index.html)
   ========================================================================== */

/* Header row: title + pill side by side */
.hp-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.hp-card-header .hp-card-title {
  flex: 1;
  min-width: 0;   /* critical — allows text to wrap within the flex column */
  margin-bottom: 0;
}

.hp-card-header .hp-type-pill {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px; /* optically align with the first line of the title */
}

/* ---- Per-type colour tokens ---- */
:root {
  --hp-type-visualisation:            #4f46e5; /* indigo   */
  --hp-type-visualisation-light:      #e0e7ff;
  --hp-type-activity:                 #d97706; /* amber    */
  --hp-type-activity-light:           #fef3c7;
  --hp-type-game:                     #16a34a; /* green    */
  --hp-type-game-light:               #dcfce7;
  --hp-type-puzzle:                   #0f766e; /* teal     */
  --hp-type-puzzle-light:             #ccfbf1;
  --hp-type-microworld:               #0891b2; /* cyan     */
  --hp-type-microworld-light:         #cffafe;
  --hp-type-manipulative:             #e11d48; /* rose     */
  --hp-type-manipulative-light:       #ffe4e6;
  --hp-type-representation-converter: #7c3aed; /* violet   */
  --hp-type-representation-converter-light: #ede9fe;
  --hp-type-inquiry:                  #2563eb; /* blue     */
  --hp-type-inquiry-light:            #dbeafe;
  --hp-type-scaffolding-framework:    #475569; /* slate    */
  --hp-type-scaffolding-framework-light: #e2e8f0;
}

/* ---- Accent strip ---- */
/* Base — fallback to indigo if no type modifier is present */
.hp-card-accent {
  height: 6px;
  background: var(--sm-indigo);
  border-radius: var(--hp-card-radius, 10px) var(--hp-card-radius, 10px) 0 0;
  flex-shrink: 0;
}

/* Per-type strip colours */
.hp-card-accent--visualisation            { background: var(--hp-type-visualisation); }
.hp-card-accent--activity                 { background: var(--hp-type-activity); }
.hp-card-accent--game                     { background: var(--hp-type-game); }
.hp-card-accent--puzzle                   { background: var(--hp-type-puzzle); }
.hp-card-accent--microworld               { background: var(--hp-type-microworld); }
.hp-card-accent--manipulative             { background: var(--hp-type-manipulative); }
.hp-card-accent--representation-converter { background: var(--hp-type-representation-converter); }
.hp-card-accent--inquiry                  { background: var(--hp-type-inquiry); }
.hp-card-accent--scaffolding-framework    { background: var(--hp-type-scaffolding-framework); }

/* ---- Type pill ---- */
/* Base — fallback */
.hp-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;        /* 11px */
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--sm-indigo-light);
  color: var(--sm-indigo);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Per-type pill colours */
.hp-type-pill--visualisation {
  background: var(--hp-type-visualisation-light);
  color: var(--hp-type-visualisation);
}
.hp-type-pill--activity {
  background: var(--hp-type-activity-light);
  color: var(--hp-type-activity);
}
.hp-type-pill--game {
  background: var(--hp-type-game-light);
  color: var(--hp-type-game);
}
.hp-type-pill--puzzle {
  background: var(--hp-type-puzzle-light);
  color: var(--hp-type-puzzle);
}
.hp-type-pill--microworld {
  background: var(--hp-type-microworld-light);
  color: var(--hp-type-microworld);
}
.hp-type-pill--manipulative {
  background: var(--hp-type-manipulative-light);
  color: var(--hp-type-manipulative);
}
.hp-type-pill--representation-converter {
  background: var(--hp-type-representation-converter-light);
  color: var(--hp-type-representation-converter);
}
.hp-type-pill--inquiry {
  background: var(--hp-type-inquiry-light);
  color: var(--hp-type-inquiry);
}
.hp-type-pill--scaffolding-framework {
  background: var(--hp-type-scaffolding-framework-light);
  color: var(--hp-type-scaffolding-framework);
}

/* Dark mode: lighten the pill text colour for all types */
[data-theme="dark"] .hp-type-pill--visualisation            { background: rgba( 79,  70, 229, 0.18); color: #a5b4fc; }
[data-theme="dark"] .hp-type-pill--activity                 { background: rgba(217, 119,   6, 0.18); color: #fcd34d; }
[data-theme="dark"] .hp-type-pill--game                     { background: rgba( 22, 163,  74, 0.18); color: #86efac; }
[data-theme="dark"] .hp-type-pill--puzzle                   { background: rgba( 15, 118, 110, 0.22); color: #5eead4; }
[data-theme="dark"] .hp-type-pill--microworld               { background: rgba(  8, 145, 178, 0.18); color: #67e8f9; }
[data-theme="dark"] .hp-type-pill--manipulative             { background: rgba(225,  29,  72, 0.18); color: #fda4af; }
[data-theme="dark"] .hp-type-pill--representation-converter { background: rgba(124,  58, 237, 0.18); color: #c4b5fd; }
[data-theme="dark"] .hp-type-pill--inquiry                  { background: rgba( 37,  99, 235, 0.18); color: #93c5fd; }
[data-theme="dark"] .hp-type-pill--scaffolding-framework    { background: rgba( 71,  85, 105, 0.25); color: #94a3b8; }

/* ---- Banner container (image cards) ---- */
.hp-card-banner {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: var(--hp-card-radius, 10px) var(--hp-card-radius, 10px) 0 0;
  flex-shrink: 0;
  background: var(--sm-border); /* subtle placeholder while image loads */
}

.hp-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* Slight zoom on hover — same feel as the rest of the card */
.hp-card--image:hover .hp-card-banner img,
.hp-card--image:focus-visible .hp-card-banner img {
  transform: scale(1.04);
}

/* ---- Image card: no accent strip (banner replaces it) ---- */
.hp-card--image .hp-card-accent {
  display: none;
}

/* ---- Dark mode: soften the image so it doesn't jar ---- */
[data-theme="dark"] .hp-card-banner img {
  opacity: 0.82;
}

/* ---- Responsive: slightly shorter banner on small screens ---- */
@media (max-width: 480px) {
  .hp-card-banner {
    height: 130px;
  }
}