/* ==========================
   Education Bento Layout
   Alternativa al timeline horizontal.
   NO modifica education_timeline.css ni .js
   ========================== */

/* ===== Container ===== */
.edu-bento {
   --bento-gap: 1.25rem;
   --bento-radius: 16px;
   --bento-card-bg: rgba(15, 18, 24, 0.7);
   --bento-border: rgba(255, 255, 255, 0.08);

   display: grid;
   grid-template-columns: 1fr;
   gap: var(--bento-gap);
   width: 100%;
}

@media (min-width: 768px) {
   .edu-bento {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ===== Shared card base ===== */
.bento-hero,
.bento-diploma,
.bento-courses {
   position: relative;
   background: var(--bento-card-bg);
   border: 1px solid var(--bento-border);
   border-radius: var(--bento-radius);
   transition:
      border-color 0.3s ease,
      box-shadow 0.3s ease;
}

/* ===== Zona 1: Titulación (hero card) ===== */
.bento-hero {
   padding: 2rem;
   background: rgba(16, 16, 16, 0.81);
}

.bento-hero .bento-logo-lg {
   border-radius: 50%;
   margin-bottom: 0.5rem;
}

.bento-hero:hover {
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ===== Bento hero sub-components (mobile: apilados) ===== */
.bento-hero__left {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.25rem;
}

/* Chip no debe estirarse en el flex column */
.bento-hero__left .bento-chip {
   width: fit-content;
}

.bento-hero__divider {
   display: none; /* visible solo en ≥768px */
}

.bento-hero__right {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* ===== Titulación desktop: layout horizontal ===== */
@media (min-width: 768px) {
   .bento-hero {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: auto 1px 1fr;
      gap: 2.5rem;
      align-items: center;
   }

   .bento-hero__left {
      margin-bottom: 0;
      align-items: flex-start;
   }

   .bento-hero__divider {
      display: block;
      align-self: stretch;
      background: rgba(240, 168, 48, 0.25);
      margin: 0.25rem 0;
   }

   /* Año: esquina inferior derecha de la card completa */
   .bento-hero .bento-year {
      position: absolute;
      bottom: 1.5rem;
      right: 1.5rem;
   }
}

/* ===== Zona 2: Diplomados ===== */
.bento-diploma {
   padding: 1.5rem;
   background: rgba(16, 16, 16, 0.81);
}

.bento-diploma .bento-logo-lg {
   background: none;
   padding: 0;
   width: 87px;
   height: 87px;
}

/* Diplomados: en ≥768px ocupan columnas automáticamente (1 cada uno) */

.bento-diploma:hover {
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.bento-diploma-header {
   display: flex;
   align-items: center;
   gap: 1rem;
}

/* ===== Zona 3: Cursos ===== */
.bento-courses {
   padding: 1.5rem;
   background: rgba(16, 16, 16, 0.81);
}

@media (min-width: 768px) {
   .bento-courses {
      grid-column: 1 / -1;
   }
}

/* Desktop: 1024px+ — más espacio y padding */
@media (min-width: 1024px) {
   .edu-bento {
      gap: 1.5rem;
   }
   .bento-hero {
      padding: 2.5rem;
   }
   .bento-diploma {
      padding: 2rem;
   }
   .bento-courses {
      padding: 2rem;
   }
   .bento-title-lg {
      font-size: 1.6rem;
   }
   .bento-title-md {
      font-size: 1.25rem;
   }
}

/* ===== Logos ===== */
.bento-logo-lg {
   width: 76px;
   height: 76px;
   object-fit: contain;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.06);
   padding: 4px;
   flex-shrink: 0;
}

.bento-logo-sm {
   width: 65px;
   height: 65px;
   object-fit: contain;
   border-radius: 6px;
   flex-shrink: 0;
   opacity: 0.85;
}

/* ===== Chips ===== */
.bento-chip {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.02em;
   margin-bottom: 0.4rem;
}

.bento-chip--gold {
   color: #F0A830;
   background: rgba(240, 168, 48, 0.15);
   border: 1px solid rgba(240, 168, 48, 0.3);
}

.bento-chip--cyan {
   color: #F0A830;
   background: rgba(240, 168, 48, 0.15);
   border: 1px solid rgba(240, 168, 48, 0.3);
}

/* ===== Titles ===== */
.bento-title-lg {
   font-size: 1.4rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--text-header, #e6f1ff);
   margin: 0;
}

.bento-title-md {
   font-size: 1.15rem;
   font-weight: 600;
   line-height: 1.25;
   color: var(--text-header, #e6f1ff);
   margin: 0;
}

/* ===== Org / Year ===== */
.bento-org {
   font-size: 0.9rem;
   color: var(--edu-text-dim, rgba(255, 255, 255, 0.81));
   margin: 0.25rem 0 0;
   line-height: 1.3;
}

.bento-year {
   position: absolute;
   bottom: 1rem;
   right: 1.25rem;
   font-family: var(--font-mono, 'Fira Code', monospace);
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.45);
   font-weight: 500;
}

/* ===== Tags inline ===== */
.edu-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.45rem;
   margin: 1rem 0;
}

.edu-tag {
   font-size: 0.78rem;
   font-weight: 600;
   color: #fff;
   border-radius: 999px;
   padding: 0.25rem 0.75rem;
   line-height: 1.4;
   white-space: nowrap;
   border: none;
}

.edu-tag:nth-child(7n+1) { background: rgba(79, 82, 196, 0.81); }
.edu-tag:nth-child(7n+2) { background: rgba(25, 82, 168, 0.81); }
.edu-tag:nth-child(7n+3) { background: rgba(10, 110, 75, 0.81); }
.edu-tag:nth-child(7n+4) { background: rgba(201, 127, 8, 0.81); }
.edu-tag:nth-child(7n+5) { background: rgba(196, 48, 74, 0.81); }
.edu-tag:nth-child(7n+6) { background: rgba(130, 130, 145, 0.81); }
.edu-tag:nth-child(7n+0) { background: rgba(212, 97, 15, 0.81); }

/* ===== Bullets ===== */
.bento-bullets {
   margin: 1rem 0 0;
   padding-left: 1.2rem;
   list-style: disc;
}

.bento-bullets li {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.78);
   margin: 0.4rem 0;
   line-height: 1.4;
}

.bento-bullets--gold li::marker {
   color: #F0A830;
}

.bento-bullets--cyan li::marker {
   color: #F0A830;
}

/* ===== Courses header ===== */
.bento-courses-header {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.5rem;
}

.bento-courses-title {
   font-size: 1rem;
   font-weight: 500;
   color: var(--text-header, #e6f1ff);
}

.bento-courses-count {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.4);
}

/* ===== Courses list ===== */
.bento-courses-list {
   max-height: 400px;
   overflow-y: auto;
}

/* scrollbar */
.bento-courses-list::-webkit-scrollbar {
   width: 6px;
}
.bento-courses-list::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.03);
   border-radius: 999px;
}
.bento-courses-list::-webkit-scrollbar-thumb {
   background: rgba(240, 168, 48, 0.2);
   border-radius: 999px;
}
.bento-courses-list:hover::-webkit-scrollbar-thumb {
   background: rgba(240, 168, 48, 0.35);
}

/* ===== Course rows ===== */
.bento-course-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.6rem 0.25rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   transition: background 0.2s ease;
}

.bento-course-row:last-child {
   border-bottom: none;
}

.bento-course-row:hover {
   background: rgba(255, 255, 255, 0.03);
}

.bento-course-year {
   flex-shrink: 0;
   width: 3.2rem;
   font-family: var(--font-mono, 'Fira Code', monospace);
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 500;
}


.bento-course-name {
   flex: 1;
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--text-body, #ECEBF3);
   line-height: 1.3;
   min-width: 0;
}