/*
 * ═══════════════════════════════════════════════
 *  eKultura – sdílený design systém
 *  /vloz/styly-ek.css
 *  Importovat na každé stránce vedle Bootstrap.
 * ═══════════════════════════════════════════════
 *
 *  BAREVNÁ IDENTITA:
 *  eTeal      #00BFA6  – hlavní barva spolku, hero
 *  eNight     #1a2b3c  – navbar, footer
 *  eSolar     #F9A826  – akcent, motto v patičce
 *  eGold      #c9a84c  – nakladatelství, zlato
 *  eGoldLight #e8d5a3  – světlé zlato, avatary
 *  eGrayLight #f8f9fa  – světlé pozadí sekcí
 *  eGrayDark  #6c757d  – popisky, meta
 *
 *  FONTY:
 *  EB Garamond  – nadpisy, knižní, serif
 *  Source Sans 3 – UI, tělo textu, sans-serif
 * ═══════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Source+Sans+3:wght@300;400;600&display=swap');

/* ── SEKCE – univerzální blok ── */
/*
 * Použití:
 * <div class="ek-section">
 *   <div class="ek-section-head">
 *     <span class="ek-section-label">Popisek</span>
 *     <div class="ek-rule"></div>
 *     <h2>Nadpis</h2>
 *   </div>
 *   ... obsah ...
 * </div>
 */
.ek-section { padding: 2.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.ek-section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.ek-section-head h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.7rem; font-weight: 400; margin: 0; white-space: nowrap;
}
.ek-section-label {
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; color: #6c757d; white-space: nowrap;
}
.ek-rule { flex: 1; height: 1px; background: rgba(0,0,0,0.1); min-width: 20px; }

/* ── HERO – zelený (hlavní strana) ── */
/*
 * <section class="ek-hero-teal">
 *   <div class="container text-center text-white py-5">
 *     <h1>...</h1><p class="lead">...</p>
 *   </div>
 * </section>
 */
.ek-hero-teal { background-color: #00BFA6; }

/* ── HERO – knižní (nakladatelství) ── */
/*
 * <div class="ek-hero-book">
 *   <div class="ek-hero-brand">...</div>
 *   <h1>...</h1><p>...</p>
 *   <nav class="ek-subnav">...</nav>
 * </div>
 */
.ek-hero-book {
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: center;
}
.ek-hero-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; margin-bottom: 1.5rem;
}
.ek-hero-brand img { height: 36px; width: auto; }
.ek-hero-brand span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6c757d;
}
.ek-hero-book h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400; font-size: 2.6rem; margin-bottom: 1rem; line-height: 1.2;
}
.ek-hero-book p {
  font-family: 'EB Garamond', Georgia, serif; font-style: italic;
  font-size: 1.15rem; color: #555; max-width: 640px; margin: 0 auto 0.5rem; line-height: 1.65;
}
.ek-subnav {
  margin-top: 1.75rem; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
  display: flex; justify-content: center; flex-wrap: wrap;
}
.ek-subnav a {
  color: #555; text-decoration: none;
  padding: 0 0.8rem; border-left: 1px solid #ccc;
}
.ek-subnav a:first-child { border-left: none; }
.ek-subnav a:hover { color: #1a1a2e; }
.ek-isbn { font-size: 0.72rem; color: #aaa; margin-top: 0.75rem; letter-spacing: 0.05em; }

/* ── HERO – foto pozadí (série) ── */
/*
 * <section class="ek-hero-photo" style="background-image:url('...')">
 *   <div class="ek-hero-photo-overlay">
 *     <div class="container text-center text-white">...</div>
 *   </div>
 * </section>
 */
.ek-hero-photo {
  background-size: cover; background-position: center; min-height: 45vh;
}
.ek-hero-photo-overlay {
  background: rgba(0,0,0,0.45); min-height: 45vh;
  display: flex; align-items: center;
}

/* ── KNIŽNÍ MŘÍŽKA ── */
/*
 * <div class="ek-book-grid">
 *   <div class="ek-book-card">
 *     <div class="ek-cover">
 *       <img src="..."> nebo <div class="ek-cover-ph">Název</div>
 *       <div class="ek-cover-badge">Vydáno</div>  (volitelné)
 *     </div>
 *     <div class="ek-book-title">...</div>
 *     <div class="ek-book-edition">Edice Kořeny</div>
 *     <div class="ek-book-isbn"><a href="...">978-...</a></div>
 *     <div class="ek-format-badges">
 *       <span class="ek-badge-format ek-badge-ebook">e-kniha</span>
 *       <span class="ek-badge-format ek-badge-tisk">tisk · 248 Kč</span>
 *     </div>
 *   </div>
 * </div>
 */
.ek-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.75rem 1.25rem;
}
.ek-cover {
  width: 100%; aspect-ratio: 2 / 3;
  background: #e9ecef; border-radius: 2px; overflow: hidden;
  position: relative; margin-bottom: 0.6rem;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.12), -1px 0 0 rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.ek-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ek-cover-ph {
  padding: 0.75rem; text-align: center; font-size: 0.8rem;
  color: #999; font-style: italic; font-family: 'EB Garamond', serif;
}
.ek-cover-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(13,110,253,0.82); color: #fff;
  font-size: 0.57rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center; padding: 3px 0; z-index: 1;
}
.ek-book-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.1rem;
}
.ek-book-edition {
  font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: #6c757d; font-weight: 600;
}
.ek-book-isbn { font-size: 0.67rem; color: #0d6efd; margin-top: 0.1rem; }
.ek-book-isbn a { color: inherit; text-decoration: none; }
.ek-book-isbn a:hover { text-decoration: underline; }
.ek-format-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 0.3rem; }
.ek-badge-format {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px; border: 1px solid;
}
.ek-badge-ebook { color: #0d6efd; border-color: #0d6efd; background: rgba(13,110,253,0.06); }
.ek-badge-tisk  { color: #198754; border-color: #198754; background: rgba(25,135,84,0.06); }

/* ── EDICE – 4 pilíře ── */
/*
 * <div class="ek-edice-grid">
 *   <div class="ek-edice-card">
 *     <div class="ek-edice-sym">⊕</div>
 *     <div class="ek-edice-name">Kořeny</div>
 *     <div class="ek-edice-sub">Historie a tradice</div>
 *     <div class="ek-edice-desc">...</div>
 *   </div>
 * </div>
 */
.ek-edice-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.ek-edice-card {
  background: #faf8f2; padding: 1.75rem 1.5rem;
  position: relative; border: 1px solid #d4b870;
  box-shadow: 0 2px 12px rgba(176,141,60,0.08);
}
.ek-edice-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #c9a84c, #e8d5a3, #c9a84c);
}
.ek-edice-sym { font-size: 1.6rem; color: #b08d3c; margin-bottom: 0.75rem; line-height: 1; }
.ek-edice-name {
  font-family: 'EB Garamond', serif; font-size: 1.2rem;
  font-weight: 600; color: #1a1a2e; margin-bottom: 0.15rem;
}
.ek-edice-sub {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.13em;
  color: #b08d3c; font-weight: 700; margin-bottom: 0.75rem;
}
.ek-edice-desc { font-size: 0.85rem; color: #5a5448; line-height: 1.55; }

/* ── SÉRIE ── */
/*
 * <div class="ek-serie-grid">
 *   <div class="ek-serie-card">
 *     <div class="ek-serie-name">Zapomenuté hlasy</div>
 *     <div class="ek-serie-range">Edice Kořeny · I.–V.</div>
 *     <div class="ek-serie-desc">...</div>
 *     <div class="ek-serie-svazky"><a href="...">Celá série →</a></div>
 *   </div>
 * </div>
 */
.ek-serie-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.ek-serie-card {
  padding: 1.25rem 1.5rem; border: 1px solid rgba(0,0,0,0.08);
  border-left: 3px solid #c9a84c; border-radius: 2px; background: #fff;
}
.ek-serie-name {
  font-family: 'EB Garamond', serif; font-size: 1.05rem;
  font-weight: 600; color: #1a1a2e; margin-bottom: 0.2rem;
}
.ek-serie-range {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #b08d3c; font-weight: 700; margin-bottom: 0.5rem;
}
.ek-serie-desc { font-size: 0.85rem; color: #555; line-height: 1.5; }
.ek-serie-svazky { margin-top: 0.6rem; font-size: 0.75rem; color: #6c757d; }
.ek-serie-svazky a { color: #b08d3c; text-decoration: none; }
.ek-serie-svazky a:hover { text-decoration: underline; }

/* ── TÝM – 4 pilíře (nakladatelství) ── */
/*
 * <div class="ek-tym-grid">
 *   <div class="ek-tym-card">
 *     <div class="ek-tym-av">MK</div>
 *     <div class="ek-tym-name">Martin Kučera</div>
 *     <div class="ek-tym-role">Ediční plány</div>
 *     <div class="ek-tym-desc">...</div>
 *   </div>
 * </div>
 */
.ek-tym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ek-tym-card {
  padding: 1.5rem; border: 1px solid #e8d5a3; border-top: 2px solid #c9a84c;
  border-radius: 2px; background: #faf8f2;
}
.ek-tym-av {
  width: 44px; height: 44px; border-radius: 50%; background: #e8d5a3;
  display: flex; align-items: center; justify-content: center;
  font-family: 'EB Garamond', serif; font-size: 0.95rem;
  font-weight: 600; color: #7a6030; margin-bottom: 0.75rem;
}
.ek-tym-name {
  font-family: 'EB Garamond', serif; font-size: 1.05rem;
  font-weight: 600; color: #1a1a2e; margin-bottom: 0.1rem;
}
.ek-tym-role {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #b08d3c; font-weight: 700; margin-bottom: 0.5rem;
}
.ek-tym-desc { font-size: 0.82rem; color: #5a5448; line-height: 1.5; }

/* ── TÝM – fotky v kruhu (hlavní strana spolku) ── */
/*
 * <div class="ek-team-grid">
 *   <div class="ek-team-member">
 *     <img src="..." class="ek-team-photo" alt="Jméno">
 *     <div class="ek-team-name">Jméno Příjmení</div>
 *     <div class="ek-team-role">Role</div>
 *     <div class="ek-team-desc">...</div>
 *   </div>
 * </div>
 */
.ek-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2rem 1.5rem;
  text-align: center;
}
.ek-team-photo {
  width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.ek-team-name {
  font-family: 'EB Garamond', serif; font-size: 1rem;
  font-weight: 600; margin-bottom: 0.15rem;
}
.ek-team-role { font-size: 0.72rem; color: #6c757d; margin-bottom: 0.4rem; }
.ek-team-desc { font-size: 0.82rem; color: #555; line-height: 1.5; }

/* ── INFO BOX – tisk / objednávka ── */
/*
 * <div class="ek-info-box ek-info-green">
 *   <strong>Nadpis</strong> — text.
 * </div>
 */
.ek-info-box {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-radius: 2px; font-size: 0.85rem; color: #444;
}
.ek-info-green {
  border: 1px solid rgba(25,135,84,0.25); border-left: 3px solid #198754;
  background: rgba(25,135,84,0.04);
}
.ek-info-green strong { color: #198754; }
.ek-info-gold {
  border: 1px solid rgba(201,168,76,0.3); border-left: 3px solid #c9a84c;
  background: rgba(201,168,76,0.04);
}
.ek-info-gold strong { color: #b08d3c; }

/* ── RESPONZIVITA ── */
@media (max-width: 768px) {
  .ek-edice-grid { grid-template-columns: repeat(2, 1fr); }
  .ek-tym-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ek-edice-grid { grid-template-columns: 1fr; }
  .ek-tym-grid   { grid-template-columns: 1fr; }
  .ek-hero-book h1 { font-size: 2rem; }
}