Template:Accession/styles.css

/* Template:Accession/styles.css — simple hero split layout */

/* ===== Layout wrappers ===== */
.accession-simple { margin-bottom: 2rem; }
.hero-header { background: #0b1b2a; border-radius: 14px; padding: 1.1rem 1.25rem; color: #fff; }
.hero-top { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.hero-title { margin:0; font-size: 2rem; line-height:1.1; }
.hero-subtitle { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity:.85; }

/* ===== Badges ===== */
.hero-badges{ display:flex; flex-wrap:wrap; gap:.35rem .45rem; align-items:center; }
.hero-badge{ padding:.34rem .62rem; border-radius:999px; font-size:.68rem; line-height:1; font-weight:700; border:1px solid transparent; }
.badge-active{ background:#e6f7ee; color:#116a3d; border-color:#b8e7cf; }
.badge-tier{ background:#ffeef2; color:#a01439; border-color:#ffc9d6; }
.badge-priority{ background:#fff7e6; color:#9a5400; border-color:#ffd699; }

/* ===== Split (grid) ===== */
.hero-split--grid{ display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .hero-split--grid{ grid-template-columns: 1fr; } }

.hero-image, .hero-map{ height: 420px; position: relative; }
@media (max-width: 768px){ .hero-image, .hero-map{ height: 320px; } }

/* ===== Photo area ===== */
.hero-img, .hero-image .mw-file-element { width:100%; height:100%; object-fit:cover; display:block; border-radius: 0; }

.photo-placeholder{
  height:100%; display:flex; align-items:center; justify-content:center;
  background: #f1f5f9; border:1px dashed #cbd5e1; border-radius: 12px; padding: 1rem; text-align:center; color:#475569;
}
.placeholder-icon{ font-size: 2.2rem; display:block; margin-bottom:.5rem; }
.placeholder-title{ font-weight:800; margin-bottom:.25rem; }
.placeholder-subtitle{ font-size:.9rem; margin-bottom:.5rem; }
.placeholder-instruction{ font-size:.8rem; color:#64748b; }

/* Image caption bar */
.image-overlay{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  color:#fff; padding:.6rem .9rem;
}
.image-caption{ margin:0; font-size:.9rem; font-weight:700; }

/* ===== Map card ===== */
.hero-map { background:#eef2f7; }
.map-container{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#64748b; font-weight:700; font-size:1rem;
}

/* Location overlay */
.map-overlay{
  position:absolute; top:1rem; left:1rem;
  background:#fff; border:1px solid #e2e8f0; border-radius: 10px;
  padding:.8rem .9rem; box-shadow:0 6px 16px rgba(0,0,0,.12);
  max-width: 240px;
}
.map-overlay h4{ margin:.05rem 0 .45rem; font-size:.73rem; letter-spacing:.02em; color:#64748b; text-transform:uppercase; }
.location-primary{ font-weight:800; color:#0f172a; font-size:.95rem; margin-bottom:.28rem; }
.location-secondary{ color:#64748b; font-size:.84rem; }

/* Coordinates chip (our own style) */
.coordinates{
  position:absolute; right:1rem; bottom:1rem; max-width:52ch;
  background:#111827; color:#fff; border-radius: 12px;
  padding:.48rem .66rem; box-shadow:0 8px 18px rgba(0,0,0,.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Neutralize Kartographer pill inside our chip */
.coordinates .mw-kartographer-maplink,
.hero-map .mw-kartographer-maplink {
  background: transparent; border:0; box-shadow:none; padding:0; display:inline;
}
.coordinates .mw-kartographer-coordinates { color:#fff; }

/* ===== Details strip ===== */
.hero-details{
  display:block; padding: 1rem 0; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;
  margin-bottom:1.25rem;
}
.detail-group{ display:inline-block; margin:0 1.25rem 1rem 0; min-width:150px; vertical-align:top; }
.detail-label{ font-size:.72rem; color:#64748b; margin-bottom:.35rem; letter-spacing:.02em; text-transform:uppercase; }
.detail-value{ font-size:1rem; font-weight:800; color:#111827; }
.detail-value.highlight{ color:#b91c1c; }

/* ===== Breadcrumb ===== */
.geographic-path{ padding-top:.5rem; }
.geographic-path h4{ margin:0 0 .45rem; color:#64748b; font-size:.85rem; }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.level{
  padding:.35rem .6rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px;
  font-weight:700; color:#334155; font-size:.9rem;
}
.separator{ color:#94a3b8; font-weight:700; }

/* ===== Documentation checks ===== */
.doc-checks{
  margin-top:.75rem; color:#475569; line-height:1.45;
  font-size:.9rem; font-weight:600;
}
/* keep totally plain (no chips/balloons) */
.doc-checks *{ background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ===== Responsive tweaks ===== */
@media (max-width: 680px){
  .hero-title{ font-size:1.6rem; }
  .detail-group{ min-width:120px; }
  .coordinates{ font-size:.74rem; }
}