/* card.css — shared visuals for quote / tv / haiku cards */

/* Base card look (quotes/haiku baseline) */
:is(.card, .quotecard, .tvcard, .haikucard, .catalogcard) {
  background: #fcfcfc;
  border: 2px solid #000;
  border-radius: 8px;
  margin: 20px 30px;
  padding: 0 30px 10px 30px;
  text-decoration: none;
  cursor: pointer;
}

/* Per-page visual deltas — TV uses different spacing + lighter border + shadow */
.tvcard {
  margin: 25px;
  padding: 10px;
  border-width: 2px;            /* TV’s 1px border in light */
  /* box-shadow: 1px 1px 5px #999; */ /* subtle light shadow */
}

/* Catalog image viewport: square by default */
.catalogcard .fixed-container {
  /* keeps card size consistent without touching the card itself */
  aspect-ratio: var(--catalog-aspect, 1 / 1); /* square; tweakable */
  width: 100%;
  overflow: hidden;          /* clips if using cover */
  display: block;
  margin: 12px 0;            /* breathing room from title and h5 */
}

/* Default: show entire artwork, no cropping; letterbox if not square */
.catalogcard .fixed-container > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* preserves full image, adds safe whitespace */
}

.author{color:#777;}

#search,
input[type="search"] {
  font-size: .8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;      /* match flat .card radius */
  outline: none;
  appearance: none;        /* remove OS/browser default styling */
  -webkit-appearance: none; /* Safari/iOS */
  -moz-appearance: none;    /* Firefox */
}

/* Light/default mode colors */
#search,
input[type="search"] {
  border: 1px solid #666;
  background: #fcfcfc;
  color: #000;
}

#search:focus,
input[type="search"]:focus {
  border-color: #666;
}


/* Dark mode deltas (shared) */
@media (prefers-color-scheme: dark) {
  :is(.card, .quotecard, .tvcard, .haikucard, .catalogcard) {
    background: #1e1e1e;
    border: 1px solid #fff;
  }
  .tvcard { background: #222; }

  .author{color:#ccc;}

  #search,
  input[type="search"] {
    border: 1px solid #666;
    background: #333;
    color: #fff;
  }

  #search:focus,
  input[type="search"]:focus {
    border-color: #aaa;
  }
}