/* ============================================
   chronology.css (v8.5 - Responsive Fix)
   ============================================ */

/* --- 1. General Wrapper --- */
.chronology-wrapper {
  max-width: 100%;
  margin: 2rem auto;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

/* --- 2. Accessible Accordion --- */
.century-section { margin-bottom: 1rem; }

.century-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 1.5rem;
  background-color: #f2ebe0; border: none;
  border-left: 6px solid #a88860; border-radius: 6px;
  font-family: inherit; font-size: 1rem; color: #3b362f;
  text-align: left; cursor: pointer;
  transition: all 0.2s ease;
}
.century-header:hover {
  transform: translateY(-2px); background-color: #f7f1e8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.header-left { display: flex; flex-direction: column; gap: 4px; }
.century-title { font-weight: 700; font-size: 1.1rem; }
.century-subtitle { font-size: 0.85rem; color: #6a5a48; }

.toggle-hint {
  font-size: 0.75rem; background: rgba(255, 255, 255, 0.6);
  padding: 4px 10px; border-radius: 20px; color: #5a4943; 
  font-weight: 600; white-space: nowrap; margin-left: 1rem;
}

/* Content Area */
.century-content {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-out;
  background: transparent; overflow: hidden;
}
.century-content.open { grid-template-rows: 1fr; margin-top: 0.5rem; }
.century-content-inner { min-height: 0; }

/* --- 3. Century Colors --- */
.century-section[data-century="12"] .century-header { border-left-color: #f7d0b8; }
.century-section[data-century="13"] .century-header { border-left-color: #e8d9ae; }
.century-section[data-century="14"] .century-header { border-left-color: #f2c7c2; }
.century-section[data-century="15"] .century-header,
.century-section[data-century="16"] .century-header { border-left-color: #d9c8e8; }
.century-section[data-century="17"] .century-header { border-left-color: #d1e3c2; }
.century-section[data-century="18"] .century-header,
.century-section[data-century="19"] .century-header { border-left-color: #c0e0dc; }
.century-section[data-century="20"] .century-header,
.century-section[data-century="21"] .century-header { border-left-color: #c2dceb; }

/* --- 4. TABLE STYLES (Base) --- */
.chrono-table {
  width: 100%; border-collapse: collapse; background: #fffefb;
  margin: 0; table-layout: fixed; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.chrono-table thead { background: #c9b393; color: #fff; }
.chrono-table th {
  padding: 0.7rem 0.9rem; text-align: left; font-weight: 600;
  font-size: 0.85rem; border-right: 1px solid #b8a483;
}
.chrono-table th:last-child { border-right: none; }

/* Global Cell Style (Font Size 0.8rem applied everywhere) */
.century-section .century-content .chrono-table td,
.page-template-page-wide-timeline .chrono-table td,
.chrono-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e8e2d8;
  vertical-align: top;
  font-size: 0.8rem !important; /* Forces the small font size */
  line-height: 1.6;
}

/* --- 5. DESKTOP COLUMN WIDTHS (Strictly Non-Mobile) --- */
@media (min-width: 769px) {
    .col-period { width: 8%; }
    .col-year { width: 10%; }
    .col-material { width: 24%; }
    .col-related { width: 18%; }
    .col-event { width: 20%; }
    .col-note { width: 20%; }
}

/* --- 6. MOBILE CARD VIEW (The "Neat" Display) --- */
@media (max-width: 768px) {
  /* Hide the header row completely */
  .chrono-table thead { display: none !important; }

  /* Make table, body, rows, and cells block elements */
  .chrono-table, 
  .chrono-table tbody, 
  .chrono-table tr, 
  .chrono-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Style the Row as a "Card" */
  .chrono-table tr {
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #e8e2d8;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    padding: 0.5rem 0;
  }

  /* Style the Cells */
  .chrono-table td {
    text-align: left;
    padding: 0.6rem 1rem;
    padding-left: 35% !important; /* Reserve space for label */
    border-bottom: 1px solid #f9f6f0;
    position: relative;
    min-height: 2.5rem;
  }
  .chrono-table td:last-child { border-bottom: none; }

  /* Insert Label via data-label attribute (populated by JS) */
  .chrono-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 0.6rem;
    width: 30%;
    font-weight: 700;
    font-size: 0.75rem;
    color: #c9642d; /* Accent */
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .century-toggle-button { flex-wrap: wrap; }
  .toggle-hint { display: none; }
}

/* Wide Timeline Template Overrides */
.page-template-page-wide-timeline .chrono-table {
    table-layout: auto; min-width: 1200px; margin: 0;
}