/* =========================================================
   ΑΘΗΝΑ – εμφάνιση τύπου Yale Online Exhibitions
   Omeka S 4.0.4 · site "lib" (theme Bookshelf)
   Selectors ελεγμένοι στο πραγματικό markup της σελίδας
   /s/lib/page/collections (blocks: list-of-sites, preview-block).
   Εφαρμογή: Sites > lib > CSS Editor (ή style.css σε child theme)
   ========================================================= */

:root {
  --ath-accent: #1f5d7a;      /* μπλε-πετρόλ του λογοτύπου ΤΕΠΑΚ – προσάρμοσέ το */
  --ath-accent-2: #b3272d;    /* κόκκινο λογοτύπου, για λεπτομέρειες */
  --ath-text: #1e1e1e;
  --ath-muted: #5b5b5b;
  --ath-line: #e2e2e2;
  --ath-bg-soft: #f6f5f2;
  --ath-radius: 6px;
}

/* ---------- Γενικό πλάτος & τυπογραφία ---------- */
#content { max-width: 1200px; margin-left: auto; margin-right: auto; }
#content h2 {
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 3px solid var(--ath-accent);
  padding-bottom: .35rem;
  margin: 2.5rem 0 1.25rem;
}

/* ---------- 1. «Ιστοσελίδες ψηφιακών συλλογών» (block list-of-sites) ----------
   Στυλ Yale: μεγάλες εικόνες, τίτλος από κάτω, καθόλου κείμενο. */
.list-of-sites .site-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
}
.list-of-sites .site {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  overflow: hidden;
  margin: 0;
  transition: box-shadow .15s ease, transform .15s ease;
}
.list-of-sites .site:hover,
.list-of-sites .site:focus-within {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.list-of-sites .site-thumbnail {
  aspect-ratio: 4 / 3;
  background: var(--ath-bg-soft);   /* κενό πλαίσιο όταν λείπει εικόνα (π.χ. Μολέσκη) */
  overflow: hidden;
}
.list-of-sites .site-thumbnail {
  width: 100% !important; height: auto !important; float: none !important;
  margin: 0 !important; max-width: none !important;
}
.list-of-sites .site-thumbnail-image {
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.list-of-sites .site:hover .site-thumbnail-image { transform: scale(1.04); }
.list-of-sites .site-link {
  display: block;
  padding: .9rem 1rem 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ath-text);
  text-decoration: none;
}
/* όλη η κάρτα clickable */
.list-of-sites .site-link::after { content: ""; position: absolute; inset: 0; }
.list-of-sites .site-link:hover { color: var(--ath-accent); }

/* Κάρτα χωρίς εικόνα: βάλε το τίτλο πάνω σε χρωματιστό φόντο */
.list-of-sites .site:not(:has(.site-thumbnail)) {
  justify-content: flex-end;
  min-height: 100%;
  background: linear-gradient(135deg, var(--ath-accent), #143e52);
}
.list-of-sites .site:not(:has(.site-thumbnail)) .site-link { color: #fff; }

/* ---------- 2. «Ψηφιακές Συλλογές» (preview-block → ul.resource-list.preview) ---------- */
.preview-block .resource-list.preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.preview-block .resource-list.preview > li.resource {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: 0 0 1rem;
  background: #fff;
  border: 1px solid var(--ath-line);
  border-radius: var(--ath-radius);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.preview-block .resource-list.preview > li.resource:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.preview-block .resource-list.preview > li.resource > br { display: none; }
.preview-block .resource-list.preview > li.resource > a:first-child { display: block; }
.preview-block .resource-list.preview img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  margin: 0 0 .8rem;
  float: none;
  max-width: none;
}
/* τίτλος συλλογής (2ο link) */
.preview-block .resource-list.preview > li.resource > a:not(:first-child) {
  display: block;
  padding: 0 1rem;
  margin-bottom: .45rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ath-text);
  text-decoration: none;
}
.preview-block .resource-list.preview > li.resource > a:not(:first-child)::after {
  content: ""; position: absolute; inset: 0;   /* όλη η κάρτα clickable */
}
.preview-block .resource-list.preview > li.resource:hover > a:not(:first-child) { color: var(--ath-accent); }

/* περιγραφή: 3 γραμμές μόνο */
.preview-block .resource-list.preview .description {
  padding: 0 1rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ath-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 3. Hero (για την αρχική, με HTML block – βλ. οδηγίες) ---------- */
.ath-hero {
  position: relative;
  margin: 0 0 2rem;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--ath-radius);
  overflow: hidden;
  background: #222 center / cover no-repeat;
}
.ath-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 60%);
}
.ath-hero-text { position: relative; padding: 2rem; color: #fff; max-width: 720px; }
.ath-hero-text h1, .ath-hero-text h2 { color: #fff; border: 0; margin: 0 0 .5rem; font-size: 2rem; }
.ath-hero-text p { margin: 0 0 1rem; font-size: 1.05rem; }
.ath-hero-text a.ath-btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 4px;
  background: #fff; color: var(--ath-accent); font-weight: 600; text-decoration: none;
}

/* ---------- 4. Footer ---------- */
footer {
  margin-top: 3rem;
  padding: 1.5rem 1rem;
  background: var(--ath-bg-soft);
  border-top: 3px solid var(--ath-accent);
  font-size: .9rem;
  color: var(--ath-muted);
}

/* ---------- 5. Προσβασιμότητα & κινητά ---------- */
#content a:focus-visible { outline: 3px solid var(--ath-accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .list-of-sites .site, .list-of-sites .site-thumbnail-image { transition: none; transform: none !important; }
}
@media (max-width: 600px) {
  .list-of-sites .site-list { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .list-of-sites .site-link { padding: .6rem .7rem .8rem; font-size: .9rem; }
  .preview-block .resource-list.preview { grid-template-columns: 1fr; }
  .ath-hero { min-height: 220px; }
  .ath-hero-text h1, .ath-hero-text h2 { font-size: 1.5rem; }
}