/*
Theme Name: Thinking Through Things
Description: Tema a medida para el sitio Thinking Through Things, construido sobre el Kit Digital UC.
Version: 1.0.0
*/

/* ==========================================================================
   ESTILOS DEL TEMA
   Orden de visualizacion: tokens -> contenedor -> header -> hero ->
   contenido -> footer -> responsive.
   El header y el footer usan los componentes oficiales del kit, por eso no
   tienen reglas propias en este archivo.
   ========================================================================== */


/* ===== Tokens del diseño UC ===== */
:root {
    --uc-azul:        #173F8A;
    --uc-azul-oscuro: #03122E;
    --uc-azul-medio:  #0176DE;
    --uc-amarillo:    #FEC60D;
    --uc-gris:        #707070;
    --uc-gris-linea:  #C6C6C6;
    --ttt-ancho:      1216px;
}


/* ===== Contenedor centrado ===== */
.ttt-container {
    width: 100%;
    max-width: var(--ttt-ancho);
    margin-inline: auto;
    padding-inline: 24px;
}


/* ===== HEADER ===== */
/* Lo estiliza el kit (uc-header, uc-navbar). Sin reglas propias. */


/* ===== HERO (portada) ===== */
.ttt-hero {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;

    /* Mobile por defecto: imagen cuadrada */
    aspect-ratio: 1 / 1;
    background: url('assets/home_movil_logo.png') center / contain no-repeat;
}

.ttt-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(10px, 1.6vw, 18px);
    height: 100%;
}

.ttt-hero > .container {
    position: absolute;
    inset: 0;
}
.ttt-hero .row {
    height: 100%;
}

/* Desktop: imagen ancha */
@media (min-width: 992px) {
    .ttt-hero {
        aspect-ratio: 1440 / 938;
        background-image: url('assets/home_logo.png');
    }
}

.ttt-hero__title {
    margin: 0;
    max-width: 630px;
    color: #000;
    font: 700 clamp(24px, 4.5vw, 40px)/1.2 "Roboto", sans-serif;
}

/* Móvil: el título en español es más largo y se monta sobre las ilustraciones */
@media (max-width: 991.98px) {
    .ttt-hero__title {
        max-width: 15ch;
        font-size: clamp(20px, 5.2vw, 28px);
    }
}

/* ===== CONTENIDO ===== */

/* Espacio entre las pestañas y el contenido del panel */
.uc-tab-body {
    margin-top: 60px;
}

/* Titulo de seccion con linea amarilla a la derecha */
.ttt-section-title {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 20px;
}
.ttt-section-title::after {
    content: "";
    flex-shrink: 0;
    width: 48px;
    height: 4px;
    background: var(--uc-amarillo);
}

/* Video */
.ttt-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ttt-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tarjetas del Step By Step */
.ttt-step-card .uc-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.ttt-card-line {
    display: block;
    width: 36px;
    height: 4px;
    margin: 12px 0;
    background: var(--uc-amarillo);
}

/* Pagina Method: breadcrumb */
.ttt-breadcrumb-wrap {
    padding-top: 32px;
}


/* Pagina Method: tabla del timetable */
.ttt-timetable-wrap {
    margin-top: 24px;
    overflow-x: auto;
}
.ttt-timetable-wrap .uc-table {
    min-width: 760px;
}

/* ----- Ritmo vertical de la página de paso (igual que Method) ----- */
.ttt-step                 { padding-top: 2.5rem; padding-bottom: 6rem; }
.ttt-step .uc-breadcrumb  { margin-bottom: 2.5rem; }
.ttt-stepper              { counter-reset: step -1; margin-bottom: 3.5rem; }
.ttt-step-header          { margin-bottom: 1.5rem; }   /* ya es flex con la línea amarilla */
.ttt-step-intro           { margin-bottom: 3rem; }
.ttt-step-intro p         { margin-bottom: 1rem; }
.ttt-activity             { margin-bottom: 1.5rem; }
.ttt-next                 { margin-top: 2.5rem; }

/* ----- Stepper clickeable ----- */
.ttt-step-link { text-decoration: none; color: inherit; }
.ttt-step-link:hover { text-decoration: none; }
.ttt-step-link:hover .uc-step_info .p-size--sm { color: var(--uc-azul-medio); }

/* ----- Step: link de ejemplos ----- */
.ttt-example-link { margin-top: 16px; }

/* ----- Modal de ejemplos: más ancho + imágenes apaisadas grandes ----- */
.uc-modal_content.ttt-modal-wide { max-width: 960px; width: 92vw; }
.ttt-modal-wide .uc-message_body { max-height: 82vh; overflow-y: auto; }

.ttt-modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ttt-modal-grid .ttt-modal-img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Una sola imagen: usa todo el ancho de la modal */
.ttt-modal-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Tres imágenes: la tercera se centra en la última fila */
.ttt-modal-grid > :nth-child(3):nth-last-child(1) {
  grid-column: 1 / -1;
  width: calc(50% - 10px);
  justify-self: center;
}

@media (max-width: 700px) {
  .ttt-modal-grid { grid-template-columns: 1fr; }
  .uc-modal_content.ttt-modal-wide { width: 94vw; }
}

/* Paso 1 (siguiente): círculo blanco, borde azul, número azul */
.ttt-stepper .uc-step.ttt-step-next .uc-step_count {
  background-color: #fff;
  border: 2px solid #0176de;
}
.ttt-stepper .uc-step.ttt-step-next .uc-step_count,
.ttt-stepper .uc-step.ttt-step-next .uc-step_count::before {
  color: #0176de;
}

/* Pasos 2–6 (pendientes): círculo gris, número blanco, línea gris */
.ttt-stepper .uc-step.ttt-step-pending .uc-step_count {
  background-color: #c6c6c6;
  border: none;
}
.ttt-stepper .uc-step.ttt-step-pending .uc-step_count,
.ttt-stepper .uc-step.ttt-step-pending .uc-step_count::before {
  color: #fff;
}
.ttt-stepper .uc-step.ttt-step-pending .uc-step_line {
  background-color: #c6c6c6;
}

/* Línea amarilla junto al título (ajústala a tu gusto) */
.ttt-step-header { display: flex; align-items: center; gap: 16px; }
.ttt-sep-amarillo { display: inline-block; width: 100px; height: 4px; background: var(--uc-amarillo); }

/* ----- Collections ----- */
.ttt-collections-grid {
  margin-left: -16px;
  margin-right: -16px;
}
.ttt-collections-grid > [class*="col-"] {
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 32px;
}
.ttt-collection-card { height: 100%; }
.ttt-collection-card .uc-card_body { display: flex; flex-direction: column; height: 100%; }
.ttt-collection-card .uc-card_body .text-right { margin-top: auto; padding-top: 16px; }
.ttt-collection-card .ttt-placeholder {
  height: 216px;
  display: flex; align-items: center; justify-content: center;
  background: #eaeaea; color: #b0b0b0;
  border-radius: 4px 4px 0 0;
}
.ttt-collection-card .ttt-placeholder .uc-icon { font-size: 48px; }
.ttt-collection-img {
  width: 100%; height: 216px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

/* ----- About: fichas de persona y logos ----- */
.ttt-photo-carousel .item img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  cursor: default;
}

.ttt-team-group { margin: 32px 0 80px; }
.ttt-person {
  background: #f6f6f6; border: 1px solid #eaeaea; border-radius: 4px;
  margin-top: 64px; padding-bottom: 24px; overflow: visible;
}
.ttt-person_avatar {
  width: 128px; height: 128px; margin: -64px auto 0;
  border-radius: 50%; background: #eaeaea; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #b0b0b0;
}
.ttt-person_avatar .uc-icon { font-size: 56px; }
.ttt-person_avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ttt-person_name { color: #000; margin: 16px 0 4px; }
.ttt-person_role { color: #707070; margin: 0; }

/* Logos de instituciones colaboradoras (Acknowledgments) */
.ttt-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: center;
  justify-items: start;
  margin-top: 32px;
}

.ttt-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ttt-logo img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.ttt-logo:nth-child(n+3) img { max-height: 82px; }

/* Desde tablet: grilla original de 4 columnas */
@media (min-width: 768px) {
  .ttt-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    padding-inline: 16px;
  }
  .ttt-logo:nth-child(1) { grid-column: 1; grid-row: 1; } /* Nube      — fila sup */
  .ttt-logo:nth-child(2) { grid-column: 2; grid-row: 1; } /* U21       — fila sup */
  .ttt-logo:nth-child(3) { grid-column: 1; grid-row: 2; } /* UMAG      — fila inf */
  .ttt-logo:nth-child(4) { grid-column: 2; grid-row: 2; } /* Melbourne — fila inf */
  .ttt-logo:nth-child(5) { grid-column: 3; grid-row: 2; } /* NUS       — fila inf */
  .ttt-logo:nth-child(6) { grid-column: 4; grid-row: 2; } /* Lund      — fila inf */
}

/* ===== FOOTER ===== */
.uc-footer {
    margin-top: 160px;
}
.ttt-lang-tag {
  color: #f5a800;
  font-weight: 600;
  font-size: 0.85em;
  margin-left: 0.15rem;
}

/* ===== RESPONSIVE ===== */
/* El hero y las tipografias escalan con clamp(); el header y el footer
   traen su propio responsive desde el kit. Los ajustes finos de pantallas
   chicas se iran agregando aqui a medida que crezca el sitio. */